Boards

CSSの質問をしたり答えたりする掲示板

だら@Crieit開発者

2019-01-30に作成

CSSに関する質問を何でもしていい掲示板です。匿名での投稿も可能です。BootstrapやBulma等のCSSフレームワークなども良いと思います。どんなことでもどしどし書き込んでください。回答もどなたでも自由にできます。僕も回答できる内容であれば必ず回答します！

質問は下記に沿って書いていただくと回答しやすくなります。

実際のソースコードがある場合、可能な範囲で書いていただくと問題点を見つけやすくなります。
実際に発生したエラーメッセージがある場合、コピペしていただくと問題解決につながる可能性が高いです。
見た目上の問題の場合、スクリーンショットを貼ると状況が把握しやすくなります。

ボードとは？

A y u m i

2022-12-31に投稿

#CSS #HTML

position、relative、absoluteについての質問です。
一つのページ内に、いくつか四角が重なったページを作りたいです。
それぞれrelative、absoluteをつけた時、ちゃんと基準にしたい四角の下にくっついているのですが、位置を調整するためにtopやleft、rightをつけた途端に一番上に記載した資格を基準に配置されてしまいます。
hightを設定するなど調べてやってみましたが解決せず…。
どのように記載したら良いのでしょうか？

(匿名) #447aa1b5

2019-12-17に更新

スライダー　携帯　画面から外れる

テンプレートを参考にしてホームページを作っています。
https://demos.freehtml5.co/ranger/
パソコンでは見ると問題ないのですが、携帯で見るとき、指でスライドすると画面が外れて隠してある次の写真が見えてしまいます。解決策がわかりません。わかる方教えていただけませんか。

<div id="fh5co-product-screenshots" data-section="screenshots">

    <div class="row row-bottom-padded-sm animate-box" data-animate-effect="fadeIn">
            <div class="col-md-12 section-heading text-center">
                App Screenshots
                <div class="row">
                    <div class="col-md-6 col-md-offset-3">
                        Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
                    </div>
                </div>
            </div>
        </div>
    <div class="owl-carousel-center">
        <div class="animate-box" data-animate-effect="fadeIn"><img src="images/screen-1-1-login.jpg" alt="Free HTML5 Bootstrap Template by FreeHTML5.co"></div>
        <div class="animate-box" data-animate-effect="fadeIn"><img src="images/screen-1-8-list.jpg" alt="Free HTML5 Bootstrap Template by FreeHTML5.co"></div>
        <div class="animate-box" data-animate-effect="fadeIn"><img src="images/screen-2-1-login.jpg" alt="Free HTML5 Bootstrap Template by FreeHTML5.co"></div>
        <div class="animate-box" data-animate-effect="fadeIn"><img src="images/screen-2-6-overview.jpg" alt="Free HTML5 Bootstrap Template by FreeHTML5.co"></div>
        <div class="animate-box" data-animate-effect="fadeIn"><img src="images/screen-3-7-groups.jpg" alt="Free HTML5 Bootstrap Template by FreeHTML5.co"></div>
        <div class="animate-box" data-animate-effect="fadeIn"><img src="images/screen-4-7-groups.jpg" alt="Free HTML5 Bootstrap Template by FreeHTML5.co"></div>
        <div class="animate-box" data-animate-effect="fadeIn"><img src="images/screen-5-6-overview.jpg" alt="Free HTML5 Bootstrap Template by FreeHTML5.co"></div>
    </div>
</div>

(匿名) #8ffad39d

2019-11-18に投稿

summaryのアイコンを変更したときの背景リピートについて

お世話になります。
標記に尽いて質問をさせてください。

summaryの「▶」を画像に変更しようとCSSを書いたのですが、
背景までその画像になってしまいます（画像参照）。
いろいろ参考にさせていただいたブログさまの通り書いているのですが、
どうにもうまくいきません。

コードについてご指導をよろしくお願いいたします。

summary{
cursor:pointer;
list-style:none;
background-image:url(URL);
background-repeat: no-repeat;
}
summary::-webkit-details-marker{
background:url(URL);
no-repeat; center/6px;
color:transparent;
background-size:11px;
}

※この画面を確認したブラウザはchromeです

(匿名) #62d58f90

2019-08-11に投稿

[st-mybox title="もくじ" fontawesome="" color="#190707" bordercolor="#CEECF5" bgcolor="#E1F5FE" borderwidth="2" borderradius="5" titleweight="bold" fontsize="120" myclass="st-mybox-class" margin="25px 0 25px 0"]

[/st-mybox]

ボーダーライン上にタイトルの”もくじ”が左側にあるのですが、それを中央に配置したいです。

完全初心者です。よろしくお願いします。

Dr. Takeyuki Ueda

2019-04-03に更新

横並びで高さを youtube iframe に合わせたい

背景にニュースが流れている時計、のようなアプリをつくろうとしています
こんな感じの、背景にニュースが流れている時計をつくろうとしています

画面は、youtube を再生する player と、再生チャンネルを決める panel を横並びにして、その下に時計 clock を表示しています

<div class="container" style="display:flex;">
      <div id="player"></div>
      <div id="panel">
</div>
<h1 id="clock"></h1>

player の高さは window の height から動的に指定していて、panel は固定サイズです
こんな感じの表示になります↓

ここで、flex-container の高さを、高いほうの子要素ではなく常に player の高さに揃え、panel が切れたときにはスクロールするようにしたいのですが可能でしょうか？

いくつか（panel の height を 0 にして overflow: auto をつける、panel のpadding に巨大な数を指定してから引く）試してみたのですが、どれもうまくいかず（scroll バーがでない、panel が表示されない）ご相談させていただきました次第です

ご参考まで、全体は以下です

<!DOCTYPE html>
<html>
  <body>
<!--    <script>document.write("innerHeight = " +window.innerHeight);</script> -->
<!--    <script>document.write("innerWidth = " +window.innerWidth);</script> -->
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div class="container" style="display:flex;">
      <div id="player"></div>
      <div id="panel">
        <div>
          <button onclick='playYT("lrX6ktLg8WQ");'>
            <img src="http://i.ytimg.com/vi/lrX6ktLg8WQ/sddefault.jpg" width="64"/>
            <br>Sky News live<br>
            lrX6ktLg8WQ
          </button>
        </div>
        <div>
          <button onclick='playYT("5avbHxRppxo");'>
            <img src="http://i.ytimg.com/vi/5avbHxRppxo/sddefault.jpg" width="64"/>
            <br>Euronews English Live<br>
            5avbHxRppxo
          </button>
        </div>
        <div>
          <button onclick='playYT("a-M_5rGhPdg");'>
            <img src="http://i.ytimg.com/vi/a-M_5rGhPdg/sddefault.jpg" width="64"/>
            <br>FRANCE 24 en Direct<br>
            a-M_5rGhPdg
          </button>
        </div>
        <div>
          <button onclick='playYT("rWFTvniIDUs");'>
            <img src="http://i.ytimg.com/vi/rWFTvniIDUs/sddefault.jpg" width="64"/>
            <br>Africa24 Live<br>
            rWFTvniIDUs
          </button>
        </div>
      </div>
    </div>
    <h1 id="clock"></h1>

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        let height = window.innerHeight - 100;
        let width  = height * 16 / 9;
        player = new YT.Player('player', {
          height: height,
          width:  width,
          videoId: 'lrX6ktLg8WQ',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.setVolume(100);
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
//        if (event.data == YT.PlayerState.PLAYING && !done) {
//          setTimeout(stopVideo, 6000);
//          done = true;
//        }
      }
/*
      function stopVideo() {
        player.stopVideo();
      }
*/

      function playYT(v_id) {
        // https://stackoverflow.com/questions/13180540/how-to-dynamically-change-youtube-player-videoid
        player.loadVideoById(v_id);
      }
    </script>
    <script>
      var clock = document.getElementById("clock");
      function clockwork() {
        time = new Date();
        clock.innerHTML = time.getFullYear()+"/"
                          +(time.getMonth()+1)+"/"
                          +time.getDate()+" "
                          +("0" + time.getHours()).slice(-2)+":"
                          +("0" + time.getMinutes()).slice(-2)+":"
                          +("0" + time.getSeconds()).slice(-2);
        setTimeout(clockwork, 100);
      }
      clockwork();
    </script>
  </body>
</html>