FlexboxのレシポンシブCSSで困ってます。
- Flexboxのレシポンシブの書き方で困ってます。
- PC版とスマホ版での表示方法がうまくできません。
- 他のCSSの関係上@media screen and (max-width:567px) の書き方は変えずに、PC版では横並びで幅が20%、20%、60%に、スマホ版では画面横一杯に縦並びに表示したいです。
- ベストアンサー
FlexboxのレシポンシブCSSで困ってます。
Flexboxのレシポンシブの書き方で困ってます。各クラスのitemをPC版での場合は横並びで幅は20％、20％、60％。スマホ版では各itemが100%の画面横一杯に縦並びに表示したいです。他のCSSの関係上@media screen and (max-width:567px) の書き方は変えないでおきたいのですが上手くできません。 どなたか教えて下さい。宜しくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title></title> <style> <!-- .infofl{ display: -webkit-flex; display: flex; padding:0; width:100% } .infofl-item1 { display: -webkit-flex; display: flex; flex-basis: 20%; } .infofl-item2 { display: -webkit-flex; display: flex; flex-basis: 20%; } .infofl-item3 { display: -webkit-flex; display: flex; flex-basis: 60%; } @media screen and (max-width:567px) { .infofl-item1 { display: block; } .infofl-item2 { display: block; } .infofl-item3 { display: block; } } --> </style> </head> <body> <div class="infofl"> <div class="infofl-item1" style="background-color : green;">フレックスアイテム1</div> <div class="infofl-item2" style="background-color : fuchsia;">フレックスアイテム2</div> <div class="infofl-item3" style="background-color : silver;">フレックスアイテム3</div> </div> </body> </html>
- jeday8118
- お礼率74% (56/75)
- CSS
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
flexレイアウトでは、display: flexが指定された要素の子要素の並びを指定することができます。したがって、子要素にdisplay: flexを指定する必要はありません。 また、flex-basisは必ずしも指定した幅で表示されるとは限りません。この場合は単純にwidthを指定するので十分です。 ※OKWAVEの仕様上、コードのインデントを全角スペースで表示していますのでご注意ください。 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title></title> <style> .infofl{ display: -webkit-flex; display: flex; padding: 0; width: 100% } .infofl-item1, .infofl-item2{ width: 20%; } .infofl-item3 { width: 60%; } @media screen and (max-width:567px) { .infofl{ display: block; } .infofl > div{ width: 100%; } } </style> </head> <body> <div class="infofl"> <div class="infofl-item1" style="background-color : green;">フレックスアイテム1</div> <div class="infofl-item2" style="background-color : fuchsia;">フレックスアイテム2</div> <div class="infofl-item3" style="background-color : silver;">フレックスアイテム3</div> </div> </body> </html>
関連するQ&A
- FlexboxのレシポンシブCSSで困ってます2
Proof4さんスミマセン！再度質問させてください。教えて頂いた通りにしたらboxのレシポンシブ化は出来たので、infofl-item2にｈ3とリストを作成したらinfofl-item2のリストがｈ3の下に来なくて右横に来てしまいました。どこが悪いのかわかりません？お手数ですが教えて下さい。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Introduction to CSS(flex-basis)</title> <script src="js/flexibility.js"></script> <style> <!-- .infofl{ display: -webkit-flex; display: flex; padding:0; width:100%; } .infofl-item1 { display: -webkit-flex; display: flex; flex-basis: 40%; } .infofl-item2 { display: -webkit-flex; display: flex; flex-basis: 60%; } @media screen and (max-width:567px) { .infofl{ display: block; } .infofl > div{ width: 100%; } } --> </style> </head> <body> <div class="infofl"> <div class="infofl-item1" style="background-color : yellow;"> <dl> <dt>■test1 <dd>test <dd>test <dt>■test2 <dd>test <dd>test <dt>■test3 </dl> </div> <div class="infofl-item2" style="background-color : silver;"> <h3 style="color : white;background-color : #212121;padding-top : 0.5em;padding-left : 0.5em;width : 98%;height : 1.5em;">お知らせ・新着情報</h3> <dl> <dt>■test1 <dd>test <dt>■test2 <dt>test <dt>■test3 <dt>■test4 <dt>■test5 </dl> </div> </div> </body> </html> 何度お尋ねしてもうしわけありまんがよろしくお願いいたします。
- ベストアンサー
- CSS
- htmlについて
このコードでスマホ画面の際、画像を右横に表示しテキストを画像の真横に表示させたいのですが、どうすればいいですか？ <div class="parent"> <div class="child"><img src="image/t1.png"><p class="text">あ</p></div> <div class="child">い</div> <div class="child">う</div> <div class="child">え</div> <div class="child">お</div> </div> 以下css div { font-size: 2rem; text-align: center; margin: 10px; padding: 10px; } .parent { background: lightblue; display: flex; } .child { background: lightgreen; width: 150px; } .child>img { width:100%; } @media screen and (max-width: 800px) { .parent { flex-wrap: wrap; } } @media screen and (max-width: 400px) { .parent { display: block; float:right; } }
- ベストアンサー
- HTML
- ｃｓｓで中央よせ
CSSでwidthはパーセントで設定する場合テキストボックス、ボタン、リンクを一列に 中央配置したいのですがどうしたらいいのでしょうか。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!--Android 1.6対応--> <style type="text/css"> <!-- div#topCouponSearch { background-image: url("./top_coupon_search_bg.jpg"); display: block; height: 26px; margin-bottom: 1px; width: 100%; } .topCouponSearcha { display: block; font-weight: bold; height: 15px; padding: 5px 0 0 1px; width: 100%; } .topCouponSearcha2 { background-color: #FFFFFF; background-image: url("./spacer.gif"); color: #999999; height: 10px; padding: 3px 0 0; width: 40%; font-size: 10px; } .topCouponSearcha3 { font-size: 11px; font-weight: normal; margin-left: 3px; } button#getad { font-size: 10px; } --> </style> </head> <body> <form id="form1" action="" method="post" name="form1"> <div id="topCouponSearch"> <span class="topCouponSearcha"> <input id="address" class="topCouponSearcha2" type="text" value="" name="address" style="color: #999999;"> <button id="getad">検索</button> <span class="topCouponSearcha3"> <a href="?act=u05">店舗一覧</a> </span> </span> </div> </form> </body> </html>
- ベストアンサー
- CSS
- CSS：全体の画面の中央ぞろえ
全体的にレイアウトを中央にそろえたいのですが、それをするのにあるサイトに、「margin:0 auto」または「margin-left:auto ; margin-right:auto」を指定すると書いてあったのですが、そのようにしても中央ぞろえにはなっていませんでした。 どのようにすればよいのでしょうか？ div { float: left; margin-left: auto; margin-right: auto } div.Kukaku1 { background-color:blue; width: 900px; height: 150px; } div.Kukaku2_1 { background-color:green; width: 300px; height: 25px } div.Kukaku2_2 { background-color:aqua; width: 300px; height: 25px } div.Kukaku2_3 { background-color:gray; width: 300px; height: 25px } div.Kukaku3_1 { background-color: black; width: 250px; height: 200px; } div.Kukaku3_2 { background-color: fuchsia; width: 650px; height: 150px } div.Kukaku3_3 { background-color: lime; width: 650px; height: 50px } div.Kukaku4_Ga { width: 450px; height: 150px } div.Kukaku4_1 { background-color: maroon; width: 450px; height: 80px } div.Kukaku4_2 { background-color: navy; width: 450px; height: 70px } div.Kukaku4_3 { background-color: red; width: 450px; height: 150px } <div class="Kukaku1"></div> <div class="Kukaku2_1"></div> <div class="Kukaku2_2"></div> <div class="Kukaku2_3"></div> <div class="Kukaku3_1"></div> <div class="Kukaku3_2"></div> <div class="Kukaku3_3"></div> <div class="Kukaku4_Ga"> <div class="Kukaku4_1"></div> <div class="Kukaku4_2"></div> </div> <div class="Kukaku4_3"></div> 回答よろしくお願いします。
- ベストアンサー
- HTML
- 画像を 並べる
サイズの違う画像を並べているのですが、 サンブル通りにやると全て並んでしまいます。 3.4個おきに折り返したいのですが、cssを教えてください。 html <div class="flex-container"> <div class="flex-item"> <div class="image-wrap"> <img src="image1.jpg"> </div> </div> <div class="flex-item"> <div class="image-wrap"> <img src="image2.jpg"> </div> </div> <div class="flex-item"> <div class="image-wrap"> <img src="image3.jpg"> </div> </div> <div class="flex-item"> <div class="image-wrap"> <img src="image4.jpg"> </div> </div> </div> css htmlflex-container { display: flex; } .flex-item { flex-basis: 100%; } .image-wrap{ position: relative; overflow: hidden; padding-top: 60%; margin: 10px 5px; } .image-wrap img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; }
- ベストアンサー
- CSS
- CSSで「overflow:scroll」をしてい
CSSで「overflow:scroll」をしているボックス内で表示している 特定のボックスを最前面に表示させることは 可能なのでしょうか。 文字では説明しにくいので 例として ------------- <STYLE type="text/css"> .box1{ overflow: scroll; width: 200px; height: 100px; } .box2{ width: 200px; height: 40px; background-color: yellow; position: relative } .box3{ width: 200px; height: 40px; background-color: pink; position: relative; left: 100px; top: -10px } </STYLE> <div class="box1"> <div class="box2">Box No.2</div> <div class="box3">Box No.3</div> </div> ------------- だとして、 <div class="box3">Box No.3</div>を <div class="box1">よりも前面に表示させたいのですが スタイルシートで実現可能なのでしょうか。 いろいろ調べながらやってみましたが 解決できなかったので知恵をお貸し頂ければと思い 投稿させて頂きました。 よろしくお願い致します。
- ベストアンサー
- CSS
- 次のhtml・cssでspan内の文字を点滅させる
次のhtml・cssでspan内の文字を点滅させるには、どのようにしたらよいのでしょうか。 但し、テスト1が表示されている間は、テスト2と3は消えており、 テスト2、3が表示されている間はテスト1が消えている状態にしたいです。 なぜか、反復の意味を持つdurationタグの後ろに連結して、duration:blinkはできませんでした。 <div class="test"> <span class="brinking1">テスト1</span> <span class="brinking2">テスト2</span> <span class="brinking3">テスト3</span> </div> <style> .test { margin: auto; background-color: white; position: relative; } .test blinking { width: 50%; animation-name: test; -webkit-animation-name: test; animation-duration:blink 10s; -webkit-animation-duration: 10s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; opacity: 0;} .test .brinking1 { display: block; margin: 0 auto; } .test .brinking2,.test .brinking3 { animation-delay:5s; -webkit-animation-delay:5s; position: absolute; top: 0; left: 25%; } @keyframes test { 0% { opacity: 0; } 50% { opacity: 1; } } @-webkit-keyframes test { 0% { opacity: 0; } 50% { opacity: 1; } } </style>
- 締切済み
- CSS
- CSSでメニューバー
初心者の質問ですいません。 CSSでこのようにボックス分けして * { margin : 0 ; padding : 0 ; } body { width : 100% ; } #my_body{margin:0 auto; width:875px;} #my_header { width : 100% ; height : 80px ; } #my_header2{ width : 100% ; background-color: #0080ff;} #my_navigation{float:left; width:150px; background-color: #0080ff; min-height: 1000px;} #my_contents{float:left; width:725px; background-color: #e5f6ff; min-height: 1000px;} #my_footer { width : 100% ; clear : both ; background-color: #0080ff; } HTMLのコード <div id="my_body"> <div id="my_header">一番上のタイトルとグラデーション</div> <div id="my_header2"> グラデーション <style type="text/css"> body { background-image: url("縦長の写真"); background-repeat: repeat-x; } </style> メニューバー <form> <input type="button" value="" class="li01" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li02" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li03" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li04" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li05" onClick="URL'" /> </form> </div> 左のメニューバー <div id="my_navigation"> <div id="mynavi"> </div> </div> 本文 <div id="my_contents"> <div id="mymain"> </div> </div> フッダー <div id="my_footer"></div> </div> これで、my_header2で指定したグラデーションがメニューバーの両側に表示されると思うのですが、グラデーションが表示されません。 初心者なので根本的な間違えを起こしていたらすみません。 なぜ表示されないか教えていただけませんか。 長文失礼しました。
- 締切済み
- HTML
- CSS：区画のレイアウト1
現在、CSSの練習中なんですが、 http://kokoro.es.land.to/HTML/Rensyuu.html 上記のURLで、最終的にURL内の下の図（CSSによる区画のレイアウト）のようなレイアウトにしたいのですが、Kukaku4_3（class名、色：red）のところで画面のあるとおり、Kukaku4_2（class名、色：navy）から下の方に範囲が伸びてしまい、うまくいきません。ほかにもいろいろ試したのですが、URL内の下の図（CSSによる区画のレイアウト）のようにするにはどうすればよいでしょうか？ 回答よろしくお願いします。 div { float: left;} div.Kukaku1 { background-color:blue; width: 900px; height: 179px } div.Kukaku2_1 { background-color:green; width: 300px; height: 20px } div.Kukaku2_2 { background-color:aqua; width: 300px; height: 20px } div.Kukaku2_3 { background-color:gray; width: 300px; height: 20px } div.Kukaku3_1 { background-color: black; width: 250px; height: 300px; } div.Kukaku3_2 { background-color: fuchsia; width: 650px; height: 150px } div.Kukaku3_3 { background-color: lime; width: 650px; height: 150px } div.Kukaku4_1 { background-color: maroon; width: 500px; height: 80px } div.Kukaku4_2 { background-color: navy; width: 500px; height: 70px } div.Kukaku4_3 { background-color: red; width: 400px; height: 150px }
- ベストアンサー
- HTML
- マウスのロールオーバーについて
ブログのサイトタイトルの下にメニューバーをつけました。 メニューバーにマウスが乗った時、色を変えたいのですがCSSを書いたどの箇所に、 a:hover { color:#999; text-decoration:underline; } などのタグを入れたらいいのが分かりません。 どなたかお教えお願いします。 ／＊HTML＊／ <div id="global"> <button class="button"> <span> </span> <span> </span> <span> </span> </button> <nav class="items"> <a href="#" class="item">サンプル</a> <a href="#" class="item">サンプル</a> <a href="#" class="item">サンプル</a> <a href="#" class="item">サンプル</a> </nav> </div> <div id="overlday"> </div> ／＊CSS ＊／ #global { display: block; width: 100%; box-sizing: border-box; margin-top: 0px; background-color: #000000; } #global .button, #overlday { display: none; } #global .items { display: flex; justify-content: center; } #global .items > .item { display: block; color: #fff; text-decoration: none; box-sizing: border-box; padding: 30px 30px; border-right: 1px solid #fff; border-left: 1px solid #fff; } #global .items > .item:last-of-type { border-right: 1px solid #fff; } @media only screen and (max-width: 768px) { #overlday { display: none; position: fixed; z-index: 9; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, .65); } #overlday.active { display: block; } #global { position: fixed; z-index: 10; left: 0; top: 0; text-align: right; margin-top: 0; background-color: transparent; } #global .button, #global .button > span { display: inline-block; transition: all .4s; box-sizing: border-box; } #global .button { position: relative; width: 40px; height: 30px; border: none; cursor: pointer; background: transparent; margin: 10px; } #global .button > span { position: absolute; left: 0; width: 100%; height: 4px; background-color: #ffffff; border-radius: 4px; } #global .button > span:nth-of-type(1) { top: 0; } #global .button > span:nth-of-type(2) { top: 13px; } #global .button > span:nth-of-type(3) { bottom: 0; } #global.active .button > span { background-color: #fff; } #global.active .button > span:nth-of-type(1) { transform: translateY(13px) rotate(-45deg); } #global.active .button > span:nth-of-type(2) { opacity: 0; } #global.active .button span:nth-of-type(3) { transform: translateY(-13px) rotate(45deg); } #global .items { display: none; flex-wrap: wrap; text-align: left; background-color: #9c9c9c; } #global.active .items { display: flex; } #global .items > .item { width: 100%; padding: 10px; border-right: none; border-bottom: 1px solid #fff; } #global .items > .item:last-of-type { border-bottom: none; } }
- ベストアンサー
- CSS
お礼
回答ありがとうございます。お陰様で改善できました。