tag:crieit.net,2005:https://crieit.net/boards/qa-css/feed Crieitで「CSSの質問をしたり答えたりする掲示板」ボードに投稿された最近の投稿 2022-12-31T14:31:26+09:00 https://crieit.net/boards/qa-css/feed tag:crieit.net,2005:PublicArticle/06587d36392f339e1d875347aba4ead7 2022-12-31T14:31:26+09:00 2022-12-31T14:31:26+09:00 https://crieit.net/boards/qa-css/06587d36392f339e1d875347aba4ead7 <p>position、relative、absoluteについての質問です。<br /> 一つのページ内に、いくつか四角が重なったページを作りたいです。<br /> それぞれrelative、absoluteをつけた時、ちゃんと基準にしたい四角の下にくっついているのですが、位置を調整するためにtopやleft、rightをつけた途端に一番上に記載した資格を基準に配置されてしまいます。<br /> hightを設定するなど調べてやってみましたが解決せず…。<br /> どのように記載したら良いのでしょうか？</p> A y u m i tag:crieit.net,2005:PublicArticle/becf1a31b4a51ed0bbd4d97a706cee98 2019-12-17T16:24:32+09:00 2019-12-17T16:27:29+09:00 https://crieit.net/boards/qa-css/becf1a31b4a51ed0bbd4d97a706cee98 <p>テンプレートを参考にしてホームページを作っています。<br /> <a target="_blank" rel="nofollow noopener" href="https://demos.freehtml5.co/ranger/">https://demos.freehtml5.co/ranger/</a><br /> パソコンでは見ると問題ないのですが、携帯で見るとき、指でスライドすると画面が外れて隠してある次の写真が見えてしまいます。解決策がわかりません。わかる方教えていただけませんか。</p> <pre><code><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> </code></pre> Anonymous tag:crieit.net,2005:PublicArticle/d2d24107480426eb112e359c93d2d8de 2019-11-18T17:13:17+09:00 2019-11-18T17:13:17+09:00 https://crieit.net/boards/qa-css/d2d24107480426eb112e359c93d2d8de <p>お世話になります。<br /> 標記に尽いて質問をさせてください。</p> <p>summaryの「▶」を画像に変更しようとCSSを書いたのですが、<br /> 背景までその画像になってしまいます（画像参照）。<br /> いろいろ参考にさせていただいたブログさまの通り書いているのですが、<br /> どうにもうまくいきません。</p> <p>コードについてご指導をよろしくお願いいたします。</p> <p>summary{<br /> cursor:pointer;<br /> list-style:none;<br /> background-image:url(URL);<br /> background-repeat: no-repeat;<br /> }<br /> summary::-webkit-details-marker{<br /> background:url(URL);<br /> no-repeat; center/6px;<br /> color:transparent;<br /> background-size:11px;<br /> }</p> <p>※この画面を確認したブラウザはchromeです</p> <p><a href="https://crieit.now.sh/upload_images/c5e3b697326bc7d75c36f464c7f38a735dd25210ebb40.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/c5e3b697326bc7d75c36f464c7f38a735dd25210ebb40.png?mw=700" alt="image.png" /></a></p> Anonymous tag:crieit.net,2005:PublicArticle/4ea0a1d8ca97f1acf5eb0b331023ac80 2019-08-11T23:07:34+09:00 2019-08-11T23:07:34+09:00 https://crieit.net/boards/qa-css/4ea0a1d8ca97f1acf5eb0b331023ac80 <p class="entry-title">[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"]</p> <p>[/st-mybox]</p> <p>ボーダーライン上にタイトルの”もくじ”が左側にあるのですが、それを中央に配置したいです。</p> <p>完全初心者です。よろしくお願いします。</p> Anonymous tag:crieit.net,2005:PublicArticle/80429a6922a9d574810aaa2ae58abab2 2019-04-03T09:18:08+09:00 2019-04-03T09:18:45+09:00 https://crieit.net/boards/qa-css/80429a6922a9d574810aaa2ae58abab2 <p>横並びで高さを youtube iframe に合わせたい</p> <p>背景にニュースが流れている時計、のようなアプリをつくろうとしています<br /> <a target="_blank" rel="nofollow noopener" href="https://curved-beast.surge.sh/">こんな感じ</a> の、背景にニュースが流れている時計をつくろうとしています</p> <p>画面は、youtube を再生する <strong>player</strong> と、再生チャンネルを決める <strong>panel</strong> を 横並びにして、その下に時計 <strong>clock</strong> を表示しています</p> <pre><code class="html:"><div class="container" style="display:flex;"> <div id="player"></div> <div id="panel"> </div> <h1 id="clock"></h1> </code></pre> <p>player の高さは window の height から動的に指定していて、panel は固定サイズです<br /> こんな感じの表示になります↓</p> <p><a href="https://crieit.now.sh/upload_images/329774329ffc05bfd1cac3e66c6122875ca3f9c1e03b2.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/329774329ffc05bfd1cac3e66c6122875ca3f9c1e03b2.png?mw=700" alt="スクリーンショット 2019-04-03 8.59.13.png" /></a></p> <p>ここで、flex-container の高さを、高いほうの子要素ではなく常に <strong>player</strong> の高さに揃え、<strong>panel</strong> が切れたときにはスクロールするようにしたいのですが可能でしょうか？</p> <p>いくつか（panel の height を 0 にして overflow: auto をつける、panel のpadding に巨大な数を指定してから引く）試してみたのですが、どれもうまくいかず（scroll バーがでない、panel が表示されない）ご相談させていただきました次第です</p> <p>ご参考まで、全体は以下です</p> <pre><code class="html:"><!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> </code></pre> Dr. Takeyuki Ueda