Q&A
3点補足願います。
「画像」とはどれですか？
「メディアクエリ」とはどれですか？
「メディアクエリで指定したPX」とはなんですか？
メディアクエリで画像をflexを解除しても真下にこず左右にずれて表示されます。メディアクエリで指定したPXからも大きく表示されてしまいます。
ご助言お願いします。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<meta name="description" content=""> 6<link href="../css/reset.css" rel="stylesheet" type="text/css" madia="screen"> 7<link href="../css/style.css"rel="stylesheet" type="text/css" madia="screen"> 8<link href="../css/machine.css" rel="stylesheet" type="text/css" madia="screen"> 9<link rel="shortcut icon" href="/favicon.ico"> 10<meta name="viewport" content="width=device-width,initial-scale=1.0"> 11<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet"> 12<title>******┃******</title> 13</head> 14<body> 15 <div class="wrapper01"> 16 <header> 17 <!-- header--> 18 <div class="headline"> 19 <a href="#"><img src="images/rogo.svg" alt=""></a> 20 <p class="syamei">******</p> 21 </div> 22 <nav class="main-nav"> 23 <ul class="nav-list"> 24 <li class="top-nav"><a href="#">HOME</a></li> 25 <li class="top-nav"><a href="#">会社概要</a> 26 <ul> 27 <li><a href="#">会社沿革</a></li> 28 <li><a href="#">会社理念</a></li> 29 <li><a href="#">事業案内</a></li> 30 </ul> 31 </li> 32 <li class="top-nav"><a href="#">お問い合わせ</a></li> 33 <li class="top-nav"><a href="#">よくある質問</a></li> 34 <li class="top-nav"><a href="#">採用</a></li> 35 </ul> 36 </nav> 37 </header> 38 <main> 39 <ol class="breadcrumb"> 40 <li><a href="#">HOME</a></li> 41 <li><a href="#">**********</a></li> 42 </ol> 43 <h1 class="for">*************</h1> 44 <div class="info-container"> 45 <div class="car-container"> 46 <img class="info1" src="images/car.jpg" alt=""> 47 </div> 48 <div class="ryouri-container"> 49 <img class="net" src="images/beef-balls-2426890_640.jpg" alt=""> 50 </div> 51 </div> 52 <h2 class="infor">*********************<br>*******************</h2> 53 <h2 class="syousai">********</h2> 54 <div class="kizau-container"> 55 <div class="hananana"> 56 <a href="#"><img class="oki" src="images/car5.jpg" alt=""></a> 57 <h2 class="zyouhou"><a href="#"><******></a></h2> 58 <p>・*****************</p> 59 </div> 60 <div class="hanana"> 61 <a href="#"><img class="hoken" src="images/riteliru.jpg" alt=""></a> 62 <h2 class="cons"><a href="#"><*******></a></h2> 63 <p class="kokowa">・*********************</p> 64 </div> 65 </div> 66 <div class="betu-company"> 67 <ul> 68 <li><a href="#">***************</a></li> 69 <li><a href="#">***************</a></li> 70 </ul> 71 </div> 72<div class="sitagazou"> 73<img class="footerue" src="images/image1.jpg" alt=""> 74<p>～***********～</p> 75</div> 76 </main> 77 <div class="bottom"> 78<!--footer--> 79 <footer> 80 <ul class="footer-nav"> 81 <li class="footer-nav1"><a href="#">HOME</a></li> 82 <li> 83 <ul class="footer-nav1"> 84 <li class="niretu"><a href="#">会社概要</a></li> 85 <ll class="niretu"><a href="#">会社沿革</a></ll> 86 <li class="niretu"><a href="#">経営理念</a></li> 87 <li class="niretu"><a href="#">事業案内</a></li> 88 </ul> 89 </li> 90 <li> 91 <ul class="footer-nav2"> 92 <li class="niretu"><a href="#">お問い合せ</a></li> 93 </ul> 94 </li> 95 <li> 96 <ul class="footer-nav2"> 97 <li class="niretu"><a href="#">よくある質問</a></li> 98 </ul> 99 </li> 100 <li> 101 <ul class="footer-nav2"> 102 <li class="niretu"><a href="#">採用</a></li> 103 </ul> 104</li> 105</ul> 106<div class="sitalogo"> 107<img src="images/rogo.svg" alt="#"> 108</div> 109<p class="tyosakuken">©*********** All rights reserved</p> 110 </footer> 111 </div> 112</div> 113</body> 114</html>
CSS
1@charset "utf-8"; 2.for{ 3 font-size: 24px; 4 margin-top: 60px; 5 margin-bottom: 15px; 6 padding-left: 15%; 7} 8.infor{ 9 margin-bottom: 60px; 10 padding-left: 15%; 11} 12h2{ 13 font-size: 20px; 14 margin-bottom: 10px; 15 margin-top: 25px; 16} 17.info-container{ 18 display: flex; 19} 20.car-container{ 21 padding-left: 15%; 22} 23.machine{ 24 font-size: 24px; 25 margin-top: 50px; 26 margin-bottom: 50px; 27} 28.syousai{ 29 padding-left: 15%; 30} 31.hana1container{ 32 padding-left: 15%; 33} 34.car-costam,.insyokuzigyou{ 35 font-size: 20px; 36 margin-bottom: 10px; 37} 38.car-syousai{ 39 font-size: 20px; 40 margin-top: 30px; 41 margin-bottom: 20px; 42} 43.carcos-container{ 44 font-size:0; 45 padding:20px 0 0; 46} 47.carcos-container a{ 48 display:inline-block; 49 width: calc(80% / 3 ); 50 margin: 0 calc(10% / 3 ); 51} 52.carcos-container img{ 53 vertical-align:bottom; 54 width: 100%; 55} 56.carcos{ 57 width: 40%; 58 width: calc(100% / 3); 59} 60.car{ 61 margin-top: 10px; 62 margin-left: auto; 63 margin-right: auto; 64} 65.car1:hover{ 66 opacity: 0.6; 67} 68.car2:hover{ 69 opacity: 0.6; 70} 71.car3:hover{ 72 opacity: 0.6; 73} 74.insyokuzigyou{ 75 margin-top: 50px; 76} 77.insyoku { 78 width: 33%; 79 width: calc(100% / 3); 80} 81.insyoku > p{ 82 margin-top: 0; 83 margin-bottom: 0; 84} 85.riteiru{ 86 font-size: 20px; 87 margin-top: 50px; 88 margin-bottom: 30px; 89} 90.insyokuten1 img{ 91 height: 40%; 92 width: auto; 93 margin:auto; 94} 95.insyoku-container{ 96 font-size:0; 97 padding:20px 0 0; 98} 99.insyoku-container a{ 100 display:inline-block; 101 width: calc(80% / 3 ); 102 margin: 0 calc(10% / 3 ); 103} 104.insyoku-container img{ 105 vertical-align:bottom; 106 width: 100%; 107} 108.betu-company{ 109 margin-top:50px; 110 margin-bottom: 10px; 111 list-style-type:none; 112 padding-left: 40px; 113} 114.betu-company li{ 115 margin-top:30px; 116 margin-bottom: 10px; 117 list-style-type:none; 118} 119.osc{ 120 list-style-type:none; 121 margin-bottom: 15px; 122} 123.info{ 124 font-size: 20px; 125 margin-top: 30px; 126 margin-bottom: 20px; 127} 128 129.info-container,.hoken-container{ 130 font-size: 20px; 131 margin-bottom: 20px; 132 margin-top: 40px; 133} 134.info-container,.hoken-container{ 135 font-size:0; 136 padding:20px 0 0; 137} 138.info-container a,.hoken-container a{ 139 display:inline-block; 140 width: calc(80% / 2); 141 margin: 0 calc(10% / 2 ); 142} 143.info-container img,.hoken-container img{ 144 vertical-align:bottom; 145 width: 100%; 146} 147.hana1{ 148 display: flex; 149 width: calc(90% / 2); 150 margin: 0 calc(10% / 2 ); 151} 152.hoken-container{ 153 margin-bottom: 50px; 154} 155.betu-company{ 156 margin-top: 70px; 157} 158.betu-company li{ 159 margin-top:30px; 160 margin-bottom: 10px; 161 list-style-type:none; 162} 163.cons,.zyouhou{ 164 display: flex; 165} 166.cons h2{ 167 margin-left: 5px; 168} 169.hanana h2{ 170 margin-left: 40px; 171} 172.info1{ 173 height: 360px; 174 width: auto; 175} 176.net{ 177 height: 360px; 178 width: auto; 179} 180.oken{ 181 margin-right: 350px; 182} 183.kizau-container{ 184 display: flex; 185 margin:0; 186} 187.kizau-container p{ 188 margin-left: 60px; 189} 190.kizau-container a{ 191 display: inline-block; 192 width: 450px; 193 margin-right: 0; 194} 195.kizau-container img{ 196 vertical-align:bottom; 197 width: 80%; 198 height: auto; 199 margin: 0; 200} 201.hanana{ 202 margin: 0; 203 margin-left:200px; 204} 205.hanana h2{ 206 margin-left: 15px; 207} 208.hanana img{ 209 height: 350px; 210 width: auto; 211 margin: 0; 212} 213.hanana img a{ 214 width: 350px; 215 height: 400px; 216} 217.hanana p{ 218 margin-left: 18px; 219 margin-bottom: 5px; 220 line-height:1.4; 221} 222.hananana{ 223 width: 400px; 224 height: auto; 225 padding-left:18%; 226 /*width: calc(90% / 2 );*/ 227 /*margin:0 calc(10% / 2);*/ 228} 229.hananana p{ 230 margin-left: 0; 231} 232.hananana img{ 233 height: 350px; 234 width: auto; 235} 236.hananana img a{ 237 width: 350px; 238 height: 400px; 239} 240.hana img:hover{ 241 opacity:0.6; 242} 243.hanana img:hover{ 244 opacity:0.6; 245} 246.hananana img:hover{ 247 opacity:0.6; 248} 249/* ########### 768px以上 ########### */ 250@media screen and (max-width: 768px){ 251main{ 252 width: 90%; 253 padding-left: 5%; 254 padding-right: 5%; 255} 256.hana1{ 257 display: flex; 258 width: calc(80% / 2); 259 margin-left: 70px; 260} 261.hanana img{ 262 height: 350px; 263 width: auto; 264 margin-left: 80px; 265 margin-right: auto; 266} 267} 268/* ########### 400px以下 ########### */ 269 270@media screen and (max-width: 400px) { 271main{ 272 width: 90%; 273 padding-left: 5%; 274 padding-right: 5%; 275} 276.info-container{ 277 flex-flow: column; 278} 279削除 280/*.info1{ 281 max-width: 100%;*/ 282} 283削除 284/*.net{ 285 max-width: 100%; 286 margin-right: auto; 287 margin-left: auto;*/ 288} 289/*.info-container img{ 290 width: auto; 291 height: 200px;*/ 292} 293..hanana p{ 294 padding-left: 2px; 295 font-size: 14px; 296} 297.kizau-container{ 298 flex-flow: column; 299 margin-bottom: 10px; 300} 301削除 302/*.kizau-container img{ 303 max-width: 100%; 304 margin-right: auto; 305 margin-left:auto;*/ 306}追加 307.hananana img{ 308 width: 30%; 309 height: auto; 310 padding-left:0; 311 margin-left:0; 312}追加 313.hanana img{ 314 width: 30%; 315 height: auto; 316 padding-left:0; 317 margin-left:0; 318}追加 319.hananana,.hanana p{ 320 width: 375px; 321 font-size: 15px; 322 padding-bottom: 10px; 323}削除 324/*.kizau-container p{ 325 width: 490px; 326 font-size: 15px; 327 padding-bottom: 10px;*/ 328} 329} 330/* ########### 375px以下 ########### */ 331@media screen and (max-width: 375px){ 332main{ 333 width:90%; 334 padding-right: 5%; 335 padding-left: 5%; 336} 337.info-container{ 338 flex-flow: column; 339} 340}
各ページに起こっていることなんですが上記では .kizau-container メディアクエリ @media screen and (max-width: 400px) PX .kizau-container p{ width: 490px;｝になります。
「画像」が .kizau-container
「メディアクエリ」が @media screen and (max-width: 400px)
「メディアクエリで指定したPX」が .kizau-container p{ width: 490px;｝
ということですね？
---
ということは、「画像をflexを解除」とは「.kizau-container をflexを解除」ということだと思うのですが、その部分のルールはどれですか？
---
なお、「.kizau-container p{ width: 490px;｝から大きくずれている」という現象は確認できませんでした。
.kizau-containerにはflex-flow: column;を適用してます。上下になりますが左右にぶれます
「flexを解除」とは、フレックスレイアウトの方向を垂直にする、という意味ですか？
だとすると、かなり独自性の強い言葉の使い方なので、他者に向けては使わないことをお勧めします。普通は通じないです。
「左右にぶれます」とは、具体的にはどういう現象ですか？
当方で試したところ、要素がはみ出しているように見えましたが、そういうことですか？
申し訳ありません。ご迷惑かけてすいません。
メディアクエリで指定してる要素がimgがはみ出しています。画像サイズも大きくなったままです。
「メディアクエリで指定してる要素がimgがはみ出しています」とはどういう現象ですか？
「メディアクエリで指定してる要素」は .kizau-container でいいでしょうか。これがスクリーンからはみ出しているということですか？
画像が縮小化されていないので要素からはみ出しています。
「画像」とは .kizau-container のことですよね？ 問題が再現しませんでした。
メディアクエリでimgの記載すればimgは自動的に縮小されるのでしょうか？
私の方ははみ出して右よりに配置されてしまいます。
コードを見ていましたが、それ以前の問題だと思います。
@media screen and (max-width: 400px)
の中に
width: 490px;
などを入れていれば、はみ出して当然、という気がします。
その箇所を訂正してもはみ出していまうのです。
そこだけじゃないですからね……
開発者ツールを使った方がいいと思いますよ。
わかりました。再度確認してみます。
一度書いてたものは削除して書き直します。
..hanana p{
padding-left: 2px;
font-size: 14px;
}
詰まってる所と直接関係ないでしょうけど
ドットが一つ余計に入ってるので、このセレクタのcssはきいてないと思います。
セレクタを追加、削除しましたが、左側にあったマージンとパディングを0にしたのですが、hananana imgの画像の右斜め下に表示されてしまいます。
各要素のpadding marginを消して縦並びになりましたが画面が横スクロールします。他要素のmargin,paddingを削除するばいいんでしょうか？
たぶん、そうなんじゃないでしょうか。
あとは、 mari.rinnさんのコメントも読んだ方がいいと思います。
編集でいくつか削除されてるのを拝見しましたが、基本、メディアクエリによって画像表示を変化させる場合は、その画像のセレクタは削除せずにちゃんとcssを当てないとなかなか思うようにはいきません。
ただ今までのLhankor_Mhyさんとのやりとりを拝見するに、paddingとかmarginとかやみくもにこちょこちょいじってもなかなか解決は難しいように思います。
とりあえずこのコードのファイルは置いといて、別にテストファイルを作って、最もシンプルな、ただ画像を表示するだけのhtml cssでまずはレスポンシブ表示を正しく出来るようにして、それがオッケーなら少しそこに何かを付け足してまたレスポンシブにして〜
というふうに、少しずつ確認しながら要素を付け足していく みたいなやり方でやられた方が良いのではないかと思いますがいかがですか？
やはりなかなか難しいですね。HOMEはうまくいったのでサブページの同様にといもっていたのですが考えが甘かったようですね
個人的な経験で言えば、モバイルファーストで作った方が楽でした。
あとは、BootstrapのようなCSSライブラリを使うのもいいかもしれませんね。
現状PCファーストで作ってしまったのでメディアクエリでモバイルに変更しているのですが、今後はモバイルファーストにしようと思っています。ここから作り直すのは難しいと思いますので。
mari.rinnさん、納期もあるのでなかなか難しい所なんですよね。もう少しスキルが深ければなんとかできるんですが・・・まだまだ勉強不足です。
＞let
＞納期もあるのでなかなか難しい所なんですよね。もう少しスキルが深ければなんとかできるんですが・・・まだまだ勉強不足です
え？納期って、これはお仕事案件なのですか？てっきり独学で勉強されてるのかと。
お仕事ならなおさら、私が上に書いた、
..hanana p{
padding-left: 2px;
font-size: 14px;
}
のセレクタの書き方、..hanana p{ のドットを一つ消して、.hanana p{ と直してくださいね。
仕事でやっているのであれば、ちょっとマズい状況だと思います。
letさんの手に余っていると思いますので、早めに上司に相談した方がいいと思いますよ。
納期と言っても友人からの依頼なのできっちりしたした仕事ではないです。
質問ばかりで申し訳ないのですが現状PCファーストで作成してますが、簡単にモバイルファーストに変更できたりしますか？
いや、モバイルファーストの方がやりやすいというのは、あくまで個人的な感想なので。
人によると思いますから、気にしないでください。
HTMLの書籍読むとモバイルファーストがいいと記載が多いんですよね。ただモバイルファーストの作り方は記載されてないのが多いのでPCファースト構築したんですがここでひっかかるならモバイルファーストの方が良かったなとおもいまして。
基本的には全部作り直しになると思っていいです。デザインの問題なので。
最初の内は、テンプレートなどを使って、コンポーネントを意識するようにした方がいいかもしれないですね。
https://coliss.com/articles/build-websites/operation/css/simple-css-for-popular-layouts-and-patterns.html
コンポーネント間のレイアウト変更だけでレスポンシブデザインを実現するのが理想なので。
そういう意味で、Bootstrapとかはいいと思います。
Bootstrapですね、勉強します。
あなたの回答
tips
プレビュー
