Q&A
もし CSS で質問文以外に記述しているコードがあれば、質問文に追記していただきたいです。また、HTML で読み込んでいる2つの CSS ファイルのうち、どちらにどのコードが書かれているかについても、教えていただけませんか？
max-width:500pxでは【実現したい】縦４横２構成→【現実】縦８横１に
max-width:620pxでは【実現したい】縦２横４構成→【現実】縦３横３になってしまいます。
悩んで３日経ったのですが、どうしてもうまくいきません。
どなたか原因が分かる方、ご教授願えませんでしょうか？
HTML
1<!DOCTYPE html> 2<html lang="en"> 3 4 5 <head> 6 <meta charset="utf-8"> 7 8 <meta http-equiv="X-UA=Compatible" content="IE=edge,chrome=1"> 9 10 <title>2-1</title> 11 12 <meta name="viewport" content="width=device-width,initial-scale=1"> 13 14 <link rel="stylesheet" href="css/css"> 15 <link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 900px)"> 16 17 </head> 18 <body> 19<div class="nav"><div class="section-inner"> 20 <ul> 21 <li>About</li> 22 <li>About</li> 23 <li>About</li> 24 <li>About</li> 25 <li>About</li> 26 <li>About</li> 27 <li>About</li> 28 <li>About</li> 29 </ul> 30 </div></div> 31</body> 32</head>
CSS
1div.nav { 2 background-color: #DDDDDD; 3 overflow:hidden; 4} 5 6div.nav ul { 7 list-style: none; 8 margin:0; 9 padding:0; 10} 11 12div.nav ul li { 13 float:left; 14 padding:10px 15px; 15 border-right:1px solid #CCCCCC; 16 font-size:93%; 17 18}
responsive.css
1 2div.nav ul li { 3 width: 25%; 4 border-bottom: 1px solid #CCCCCC; 5} 6 7 8 9@media screen and (max-width: 620px) { 10 11 div.nav ul li { 12 width: 33%; 13 } 14} 15 16@media screen and (max-width: 500px) { 17 18 div.nav ul li { 19 width:50%; 20 font-size:83%; 21 } 22}
s8−chu様 目を通して頂いてありがとうございます。nav部分のレスポンシブ対応を練習しているので上記のみでございます。
返信ありがとうございます。HTML で読み込んでいる2つの CSS ファイルのうち、どちらにどのコードが書かれているかについても、教えていただけませんか？
s8−chu様 失礼いたしました。上から２つ目が上のCSS、３つ目が下のresponsive.cssでございます。
こちらの環境で試したとき、「`620px`のときに縦３横３になってしまう」という現象だけが再現できませんでした。「もう一度その現象が再現するか」、「現象が再現したブラウザは何か」、「そのブラウザのバージョンは何か」、を教えていただけませんか？
s8−chu様 ブラウザはGooglechromでバージョンは70.0.3538.77５です。もう一度した所変化として①一列（縦１横８）②縦３横３③縦４横２④縦８横１に変化致しました。お時間頂き申し訳ありません。
実現したいのはpc(max-width900)、タブレット(max-width620)、スマホ（max-width500)①一列②縦４横２③縦２横４です。
現状を再現したくコードをコピペさせてもらったのですが、620px幅までの時に縦4横２になるのですが、提示忘れないですか？例えばbox-sizingとか。
あと、metaタグのcontent="width=device-width"の2つ目の”（ダブルクォーテーション）は不要です
akihiro3様 貴重なお時間を頂き感ありがとうございます。上記のみでございます。そうですよね…そのままスマホ幅までその状態が続けば良いのですが、最後が崩れてしまいます。申し訳ないです。
akihiro3さん> 横から失礼します。質問文によると、「`620px`以下のときには縦２横４(2行4列)にしたい」ようですから、質問文のコードでは条件を満たしていないのではないでしょうか？
akihiro3 様 metaタグの気づき、本当にありがとうございました。皆様のお力添えを頂き解決致しました。お時間頂き助けて頂いて本当に感謝しております。本当にありがとうございました。
s8_chuさん、さすがです。7つ目のコメントを何度も読み返してやっと気付けました
回答2件
0
ベストアンサー
max-width:500pxでは【実現したい】縦４横２構成→【現実】縦８横１に
HTML の要素は、デフォルトの状態ではpaddingやborderを要素の横幅や高さに含めません。つまり、「widthプロパティで指定した横幅が、必ずしも実際にブラウザで見る要素の横幅と同じにならない」ということです。
今回もこの問題が発生しています。質問文のコードを見ると、div.nav ul liに対して、以下のようにborder-rightプロパティと、paddingプロパティを設定しています。
CSS
1div.nav ul li { 2 float: left; 3 padding: 10px 15px; 4 border-right: 1px solid #CCCCCC; 5 font-size: 93%; 6}
これにより、width: 50%;を設定すると、このwidthプロパティの横幅に、paddingやborderの幅が加わり、横幅が2つの要素で100%より大きくなってしまうので、8行1列になってしまいます。
この問題を解決するには、box-sizingプロパティを使用します。box-sizingプロパティにborder-boxという値を設定すると、paddingやborderを要素の横幅や高さに含めようになります。
max-width:620pxでは【実現したい】縦２横４構成→【現実】縦３横３に
max-width: 620pxのときのメディアクエリを見ると、以下のようになっています。
CSS
1@media screen and (max-width: 620px) { 2 div.nav ul li { 3 width: 33%; 4 } 5}
もしも2行4列にしたいならば、各列の横幅は25%でなければ、4つの要素が入りません。
pc(max-width: 900px)のとき、1列にしたい
max-width: 900pxのときのメディアクエリを見ると、以下のようになっています。
CSS
1div.nav ul li { 2 width: 25%; 3 border-bottom: 1px solid #CCCCCC; 4}
もしも1行8列にしたいならば、各列の横幅は12.5%でなければ、8つの要素が入りきりません。
これら3つを行うと、最終的なコードは以下のようになります。
index.html
HTML
1<!DOCTYPE html> 2<html lang="en"> 3 4 5<head> 6 <meta charset="utf-8"> 7 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 9 10 <title>2-1</title> 11 12 <meta name="viewport" content="width=device-width, initial-scale=1"> 13 14 <link rel="stylesheet" href="css/2-1.css"> 15 <link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 900px)"> 16 17</head> 18<body> 19<div class="nav"> 20 <div class="section-inner"> 21 <ul> 22 <li>About</li> 23 <li>About</li> 24 <li>About</li> 25 <li>About</li> 26 <li>About</li> 27 <li>About</li> 28 <li>About</li> 29 <li>About</li> 30 </ul> 31 </div> 32</div> 33</body> 34</html>
2-1.css
CSS
1div.nav { 2 background-color: #DDDDDD; 3 overflow: hidden; 4} 5 6div.nav ul { 7 list-style: none; 8 margin: 0; 9 padding: 0; 10} 11 12div.nav ul li { 13 box-sizing: border-box; /* 追記 */ 14 float: left; 15 padding: 10px 15px; 16 border-right: 1px solid #CCCCCC; 17 font-size: 93%; 18}
responsive.css
CSS
1div.nav ul li { 2 width: 12.5%; /* 修正 */ 3 border-bottom: 1px solid #CCCCCC; 4} 5 6@media screen and (max-width: 620px) { 7 div.nav ul li { 8 width: 25%; /* 修正 */ 9 } 10} 11 12@media screen and (max-width: 500px) { 13 div.nav ul li { 14 width: 50%; 15 font-size: 83%; 16 } 17}
投稿2018/11/10 15:21
総合スコア14731
s8−chu 様 できました！！！！！！！！！！！感動です。３日間の悩みが解決いたしました！！！！なるほどpaddingなどの数値も含めて考え設定しなければならないのですね。この度は質問の仕方が下手くそで何度も聞き返して頂いて申し訳ありませんでした。感謝感激です。こんな時間ですのにお付き合い頂き、心よりお礼申し上げます。今回学んだことは絶対に忘れず勉強頑張ります。本当にありがとうございました！！！
動作確認ブラウザ: Google Chrome 70.0.3538.77（Official Build）（64 ビット）
hellohelloさん>
いえいえ、解決できたようで良かったです。
s8−chu 様 皆様の優しさに感動で胸が一杯です。本当に本当にありがとうございました！
0
詳しい解説とともに解決してますね。
flexboxの別パターン作ったので良かったら参考にしてください
（flexboxはレイアウトがとても楽ですよ）
flexbox参考
css
1 div.nav { 2 background-color: #DDDDDD; 3 overflow:hidden; 4 } 5 6 div.nav ul { 7 list-style: none; 8 margin:0; 9 padding:0; 10 display: flex; /* 追加 */ 11 flex-direction: column; /* 追加 */ 12 } 13 14 div.nav ul li { 15 /* float:left; */ /* 削除 */ 16 width: 25%; 17 padding:10px 15px; 18 border-right:1px solid #CCCCCC; 19 border-bottom: 1px solid #bababa; 20 font-size:93%; 21 box-sizing: border-box; /* 追加 */ 22 }
css
1 /* レスポンシブは丸ごと変更 */ 2 @media screen and (max-width: 620px) { 3 4 div.nav ul { 5 flex-direction: row; 6 flex-wrap: wrap; 7 } 8 9 div.nav ul li { 10 width: 25%; 11 } 12 } 13 14 @media screen and (max-width: 500px) { 15 16 div.nav ul li { 17 width:50%; 18 font-size:83%; 19 } 20 }
投稿2018/11/10 15:49
総合スコア955
akihiro3様…！なんと…！もう今夜は涙が真剣に止まらない忘れられない夜でございます。別パターンまで考えて下さって本当にありがとうございます。このような質問の仕方さえままならない初心者にお時間さいて頂きありがとうございます。こちらも是非試させて頂きます。flexbox、なかなか上手く使いこなせていないのですが、もっと頑張ります！ベストアンサーをお二人につけられないことが悔しくてなりません。申し訳ありません。akihiro3様、この度は本当にありがとうございました。
あなたの回答
tips
プレビュー
