質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

551閲覧

widthが100%にならないので困っています。

iceforest

総合スコア15

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2023/02/24 03:48

編集2023/02/24 20:25

レスポンシブデザインのサイトを作っており、display:flexを、display:blockに変えて、
@media を作っていたら、widthが100%にできないところがあり、それを直したいと思い質問しました。

2カラムの部分(66%と33%)をスマホ用に、1カラムに変えるところが100%になりません。
chromeの検証で見ても、width:66%の見た目のまま左寄せになって縦並びになっています。
横幅がいっぱいに広がりません。
ググって調べてコードをいじっても、いまひとつうまくいきません。
お知恵を貸していただけるとありがたいです。

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <link rel="stylesheet" href="stylesheet.css" /> 8 <title>Document</title> 9 </head> 10 <body> 11 <header> 12 <h1 class="header-h1"><a href="">Travel Blog</a></h1> 13 <nav class="header-nav"> 14 <ul class="header-ul"> 15 <li class="header-li"><a href="#"> NEW</a></li> 16 <li class="header-li"><a href="#"> COLUMN</a></li> 17 <li class="header-li"><a href="#"> SERIES</a></li> 18 <li class="header-li"><a href="#"> Q&A</a></li> 19 <li class="header-li"><a href="#"> CONTACT</a></li> 20 </ul> 21 </nav> 22 </header> 23 <section class="A"> 24 <ul> 25 <li> 26 <img src="img\pexels-asad-photo-maldives-1268871.jpg" alt="" /> 27 <h2> 28 タイトルテキストテキストテキストテキストテキストテキストテキスト 29 </h2> 30 <p>READ MORE</p> 31 </li> 32 <li> 33 <img src="img\pexels-asad-photo-maldives-1450363.jpg" alt="" /> 34 <h2> 35 タイトルテキストテキストテキストテキストテキストテキストテキスト 36 </h2> 37 <p>READ MORE</p> 38 </li> 39 <li> 40 <img src="img\pexels-donald-tong-189296.jpg" alt="" /> 41 <h2> 42 タイトルテキストテキストテキストテキストテキストテキストテキスト 43 </h2> 44 <p>READ MORE</p> 45 </li> 46 </ul> 47 </section> 48 49 <section class="b"> 50 <main class="b-main"> 51 <div class="b-div"> 52 <h2 class="b-h2">タイトルテキストテキストテキストテキストテキスト</h2> 53 <ul class="b-ul"> 54 <li class="b-li">2020/01/01</li> 55 <li class="b-li">カテゴリ1</li> 56 </ul> 57 <img src="img\pexels-maria-salazar-879010.jpg" alt="" /> 58 <p> 59 本文テキストテキストテキストテキストテキストテキストテキストテキスト<br /> 60 テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br /> 61 テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br /> 62 </p> 63 <div class="read-more">READ MORE</div> 64 </div> 65 <div class="b-div"> 66 <h2 class="b-h2">タイトルテキストテキストテキストテキストテキスト</h2> 67 <ul class="b-ul"> 68 <li class="b-li">2020/01/01</li> 69 <li class="b-li">カテゴリ1</li> 70 </ul> 71 <img src="img\pexels-pixabay-237272.jpg" alt="" /> 72 <p> 73 本文テキストテキストテキストテキストテキストテキストテキストテキスト<br /> 74 テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br /> 75 テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br /> 76 </p> 77 <div class="read-more">READ MORE</div> 78 </div> 79 <div class="b-div"> 80 <h2 class="b-h2">タイトルテキストテキストテキストテキストテキスト</h2> 81 <ul class="b-ul"> 82 <li class="b-li">2020/01/01</li> 83 <li class="b-li">カテゴリ1</li> 84 </ul> 85 <img src="img\pexels-pixabay-258154.jpg" alt="" /> 86 <p> 87 本文テキストテキストテキストテキストテキストテキストテキストテキスト<br /> 88 テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br /> 89 テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br /> 90 </p> 91 <div class="read-more">READ MORE</div> 92 </div> 93 </main> 94 <aside class="aside"> 95 <section class="aside-section"> 96 <img 97 class="aside-img" 98 src="https://placehold.jp/120x120.png" 99 alt="" 100 /> 101 <h3 class="aside-title">Name Name</h3> 102 <p class="aside-p"> 103 プロフィールテキストテキストテキストテキストテキストテキストテキスト<br /> 104 テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br /> 105 テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br /> 106 </p> 107 </section> 108 <section class="aside-section"> 109 <h2 class="asite-title">Ranking</h2> 110 <img 111 src="img\pexels-pixabay-261169.jpg" 112 alt="" 113 class="aside-section" 114 /> 115 <p class="aside-p"> 116 タイトルテキストテキストテキストテキストテキストテキスト 117 </p> 118 119 <img 120 src="img\pexels-pixabay-261169.jpg" 121 alt="" 122 class="aside-section" 123 /> 124 <p class="aside-p"> 125 タイトルテキストテキストテキストテキストテキストテキスト 126 </p> 127 128 <img 129 src="img\pexels-pixabay-261169.jpg" 130 alt="" 131 class="aside-section" 132 /> 133 <p class="aside-p"> 134 タイトルテキストテキストテキストテキストテキストテキスト 135 </p> 136 </section> 137 <section class="archive aside-section"> 138 <h2 class="asite-title">Archive</h2> 139 <ul class="archive-ul"> 140 <li class="archive-li">XXXX年XX月(XX)</li> 141 <li class="archive-li">XXXX年XX月(XX)</li> 142 <li class="archive-li">XXXX年XX月(XX)</li> 143 <li class="archive-li">XXXX年XX月(XX)</li> 144 <li class="archive-li">XXXX年XX月(XX)</li> 145 <li class="archive-li">XXXX年XX月(XX)</li> 146 <li class="archive-li">XXXX年XX月(XX)</li> 147 <li class="archive-li">XXXX年XX月(XX)</li> 148 <li class="archive-li">XXXX年XX月(XX)</li> 149 <li class="archive-li">XXXX年XX月(XX)</li> 150 <li class="archive-li">XXXX年XX月(XX)</li> 151 <li class="archive-li">XXXX年XX月(XX)</li> 152 <li class="archive-li">XXXX年XX月(XX)</li> 153 </ul> 154 </section> 155 </aside> 156 </section> 157 <footer> 158 <div class="contents"> 159 <div class="contens1"> 160 <h3 class="aside-title">About</h3> 161 <p class="contents-p"> 162 テキストテキストテキストテキストテキストテキスト<br /> 163 テキストテキストテキストテキストテキストテキスト<br /> 164 テキストテキストテキストテキストテキストテキスト<br /> 165 テキストテキストテキストテキストテキストテキスト<br /> 166 テキストテキストテキストテキストテキストテキスト 167 </p> 168 <ul class="contents-ul"> 169 <li class="contents-li">プロフィール詳細</li> 170 <li class="contents-li">お仕事の依頼</li> 171 <li class="contents-li">お問い合わせ</li> 172 </ul> 173 </div> 174 <div class="contents2"> 175 <h3 class="aside-title">menu</h3> 176 <ul> 177 <li>NEW</li> 178 <li>CATEGORY</li> 179 <li>COLUMN</li> 180 <li>SERIES</li> 181 <li>Q&A</li> 182 </ul> 183 </div> 184 <div class="contens3"> 185 <h3 class="aside-title left">twitter</h3> 186 <div class="contents3-div"> 187 <a 188 class="twitter-timeline" 189 data-width="300" 190 data-height="300" 191 href="https://twitter.com/Nippon_Mask?ref_src=twsrc%5Etfw" 192 >Tweets by Nippon_Mask</a 193 > 194 <script 195 async 196 src="https://platform.twitter.com/widgets.js" 197 charset="utf-8" 198 ></script> 199 </div> 200 </div> 201 </div> 202 <div class="copy">© Travel & Blog</div> 203 </footer> 204 </body> 205</html> 206

css

1* { 2 margin: 0; 3 padding: 0; 4 text-decoration: none; 5 list-style: none; 6 box-sizing: border-box; 7} 8 9header { 10 width: 100%; 11 position: fixed; 12 align-items: center; 13 z-index: 10; 14} 15 16.header-h1 { 17 width: 100%; 18 19 padding: 20px 16px; 20 font-size: 1.5rem; 21 text-align: left; 22} 23 24.header-h1 a { 25 text-decoration: none; 26} 27 28nav { 29 width: auto; 30 background-color: black; 31} 32 33nav a { 34 color: white; 35} 36 37.header-ul { 38 display: flex; 39 list-style: none; 40} 41 42.header-li { 43 padding: 10px 40px 10px 0; 44 margin-left: 20px; 45} 46 47.A { 48 margin-bottom: 80px; 49} 50 51.A img { 52 width: 100%; 53} 54 55.A li { 56 width: 32%; 57} 58 59.A ul { 60 padding-top: 130px; 61 display: flex; 62 justify-content: space-around; 63} 64 65@media screen and (max-width: 768px) { 66 .A ul { 67 padding-top: 130px; 68 display: block; 69 } 70 .A li { 71 width: 100%; 72 } 73} 74 75.A h2 { 76 font-size: 1rem; 77} 78 79.A p { 80 text-align: center; 81 font-size: 0.8rem; 82} 83 84.b { 85 display: flex; 86 margin: 0 auto; 87 max-width: 1200px; 88} 89 90.b-main { 91 width: 66%; 92} 93 94.b-div { 95 margin-bottom: 80px; 96} 97 98.b img { 99 max-width: 100%; 100} 101 102.read-more { 103 text-align: center; 104 margin-top: 30px; 105} 106 107@media screen and (max-width: 768px) { 108 .b { 109 display: block; 110 } 111 .b-main { 112 width: 100%; 113 } 114 .aside { 115 width: 100%; 116 } 117} 118 119 120 121 122.aside { 123 width: 33%; 124 padding: 20px; 125} 126 127.aside-section { 128 text-align: center; 129 margin-bottom: 50px; 130} 131 132.aside-title { 133 font-size: 1.125rem; 134 font-weight: bold; 135 margin-bottom: 30px; 136 text-align: center; 137} 138 139.aside-img { 140 border-radius: 50%; 141} 142 143.aside-p { 144 text-align: left; 145} 146 147.archive-ul { 148 border-bottom: solid black 1px; 149} 150.archive-li { 151 text-align: left; 152 border-top: solid black 1px; 153 padding: 20px; 154} 155 156footer { 157 margin: 0 auto; 158 background-color: #f7f7f7; 159} 160 161.contents { 162 max-width: 1200px; 163 display: flex; 164 justify-content: space-between; 165 margin: 0 auto; 166} 167 168@media screen and (max-width: 768px) { 169 .contents { 170 max-width: 1200px; 171 display: block; 172 text-align: center; 173 } 174 .contents1 { 175 width: 100%; 176 } 177 .contents2 { 178 width: 100%; 179 } 180 .contents2 li { 181 text-align: center; 182 padding: 15px; 183 border-top: solid 1px black; 184 font-size: 0.8rem; 185 } 186 .contents3 { 187 width: 100%; 188 } 189} 190 191.contents1 { 192 width: 33%; 193} 194 195.aside-title left { 196 text-align: left; 197} 198 199.contents-ul { 200 margin: 20px 0; 201} 202 203.contents2 { 204 width: 33%; 205} 206 207.contents2 ul { 208 border-bottom: solid 1px black; 209} 210 211.contents2 li { 212 text-align: left; 213 padding: 15px; 214 border-top: solid 1px black; 215 font-size: 0.8rem; 216} 217 218.contents3 { 219 width: 33%; 220} 221.contents3-div { 222 height: 200px; 223} 224 225.copy { 226 text-align: center; 227 font-size: 0.7rem; 228 margin-top: 60px; 229} 230

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2023/02/24 04:10

コード内にコメントを書きたい場合は各言語に即したコメントにしてください。 手元で確認する際にそのままでは動きませんし、実際のコードではない情報かどうかこちらでは分かりません。 実際のコードにないのであれば、コード内にそのまま書くより行番号をコードブロックの外に書くだけでも伝わると思います。
recal

2023/02/24 04:14

.bはちゃんと100%になってましたよ。
iceforest

2023/02/24 06:35

返信ありがとうございます。 .bを確認しました。 確かに100%になっていました。 ありがとうございます。
iceforest

2023/02/24 06:41

2カラムでの、display:flexを解除するときに、おこりやすいミスなどを教えていただければ、自分で試行錯誤したいと思っているので、やりたいことの丸投げと思わずに、お知恵をお貸しいただけないでしょうか。 ホームページの模写が、中級レベルまで出来るようになってきたので、まだわからないことが多いので、ヒントだけでも教えていただきたいです。 よろしくお願いします。
doyuma

2023/02/24 07:19

CSSを拝見しましたが、記載順序を意識した方が良いかと思います。 例えば、.asideですが、114行目と122行目にあります。 この記載順ですと、幅が768px以下になってもwidth: 33%;が適用されてしまいます(CSSの優先順位)。
iceforest

2023/02/24 09:35

返信ありがとうございます。 おっしゃられていた、記載順序を、@mediaを一番最後の行に移動したら、問題が一気に解決しました。 試行錯誤してたので、とてもうれしいです。 ありがとうございます。 ベストアンサーに選びたいので、回答欄に回答をしていただけないでしょうか。 よろしくお願いします。
doyuma

2023/02/24 10:09

解決できて良かったです!
m.ts10806

2023/02/24 10:12

一応お知らせしておきますと、 質問者自身も回答投稿できます。 コメントに書く場合は回答前に試してほしいとか確認してほしいレベルのこともあります(そこはご相談ください)
iceforest

2023/02/24 11:25

ありがとうございます。 とても助かります。
guest

回答1

0

ベストアンサー

CSSを拝見しましたが、記載順序を意識した方が良いかと思います。
例えば、.asideですが、114行目と122行目にあります。
この記載順ですと、幅が768px以下になってもwidth: 33%;が適用されてしまいます(CSSの優先順位)。

投稿2023/02/24 10:09

doyuma

総合スコア66

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問