Q&A
どの要素のことですか？
paddingもmarginもどちらも設定してるんですがうまくいきません。
ご助言お願いします。
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" madia="all" rel="stylesheet" madia="screen"> 7<link href="../../../../css/style.css" media="all" rel="stylesheet" madia="screen"> 8<link href="../../../../css/annai.css" media="all" rel="stylesheet" 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/" 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 <!-- /header --> 39 <div class="breadcrumb"> 40 <ol> 41 <li><a href="#">HOME</a></li> 42 <li><a href="#">会社概要</a></li> 43 <li><a href="#">会社沿革</a></li> 44 <li><a href="#">会社理念</a></li> 45 <li><a href="#">事業案内</a></li> 46 </ol> 47 </div> 48 </header> 49 <main> 50 <div class="mlc"> 51 <h1 class="zigyousyoukai">********</h1> 52 <h2 class="kikai">**********（************）</h2> 53 <p class="kankaku"> 54 「********」と「***********」**********************、<br>******************</p> 55 <h3 class="syousai"><**********></h3> 56 <p>*************************************</p> 57 <h3 class="syousai"><**********></h3> 58 <p>**************************************</p> 59 <h3 class="naiyou"><a href="#">**************</a></h3> 60 </div> 61 <div class="office-servce"> 62 <h2 class="office">***************（**********）</h2> 63 <p>「*********」と「************」********************************<br>**************************</p> 64 <h3 class="syousai"><*************></h3> 65 <p>*******************************************</p> 66 <h3 class="syousai"><*************></h3> 67 <p>*****************************</p> 68 <h3 class="naiyou"><a href="#">**************************</a></h3> 69 </div> 70 <div class="information-finance"> 71 <h2 class="information">********************（*******************）</h2> 72 <p>「********」と「**************」****************************<br>**************************</p> 73 <h3 class="syousai"><************></h3> 74 <p>********************************************</p> 75 <h3 class="syousai"><****************></h3> 76 <p>****************************************</p> 77 <h3 class="naiyou01"><a href="#">*************************</a></h3> 78 </div> 79 <div class="sitagazou"> 80<img class="footerue" src="images/" alt=""> 81<p>*****************</p> 82 </main> 83 <div class="bottom"> 84<!--footer--> 85 <footer> 86 <ul class="footer-nav"> 87 <li class="footer-nav1"><a href="#">HOME</a></li> 88 <li> 89 <ul class="footer-nav1"> 90 <li class="niretu"><a href="#">会社概要</a></li> 91 <ll class="niretu"><a href="#">会社沿革</a></ll> 92 <li class="niretu"><a href="#">経営理念</a></li> 93 <li class="niretu"><a href="#">事業案内</a></li> 94 </ul> 95 </li> 96 <li> 97 <ul class="footer-nav2"> 98 <li class="niretu"><a href="#">お問い合せ</a></li> 99 </ul> 100 </li> 101 <li> 102 <ul class="footer-nav2"> 103 <li class="niretu"><a href="#">よくある質問</a></li> 104 </ul> 105 </li> 106 <li> 107 <ul class="footer-nav2"> 108 <li class="niretu"><a href="#">採用</a></li> 109 </ul> 110</li> 111</ul> 112<div class="sitalogo"> 113<img src="images/" alt=""> 114</div> 115<p class="tyosakuken">©**************** All rights reserved</p> 116</footer> 117 </div> 118</div> 119</body> 120</html>
CSS
1@charset "utf-8"; 2/*事業一覧ページh1*/ 3.zigyousyoukai{ 4 font-size:30px; 5 margin-top: 50px; 6 margin-bottom: 30px; 7 padding-left: 400px; 8} 9.kikai{ 10 font-size:20px; 11 margin:14px 5px 14px 420px; 12} 13.kankaku{ 14 line-height: 1.8; 15 padding-left: 420px; 16} 17.syousai{ 18 font-size:15px; 19 margin: 5px; 20 line-height: 1.8; 21 padding-left: 420px; 22} 23.mlc p{ 24 padding-left: 420px; 25} 26.office-servce p{ 27 padding-left: 420px; 28} 29.information-finance p{ 30 padding-left: 420px; 31} 32.naiyou{ 33 font-size:20px; 34 margin: 30px 0 20px 420px; 35} 36.naiyou01{ 37 font-size:23px; 38 margin: 10px 0 90px 420px; 39} 40.office-servce{ 41 line-height: 1.8; 42} 43.office{ 44 font-size:20px; 45 margin:14px 5px 14px 420px; 46} 47.information-finance{ 48 line-height: 1.8; 49} 50.information{ 51 font-size:20px; 52 margin:14px 5px 14px 420px; 53} 54/* ########### 768px以上 ########### */ 55@media screen and (max-width: 768px) { 56 57} 58/* ########### 400px以下 ########### */ 59@media screen and (max-width: 400px) { 60main{ 61 width: 90%; 62 margin-right:5%; 63 margin-left:5%; 64} 65.mlc{ 66 width: 360px; 67 height: auto; 68 padding-left: 0; 69 margin-left: 0; 70 padding-right: 0; 71 margin-right: 0; 72} 73.kikai{ 74 width: 360px; 75 height: auto; 76 padding-left: 0; 77 margin-left: 0; 78 padding-right: 0; 79 margin-right: 0; 80} 81.zigyousyoukai{ 82 width: 360px; 83 font-size: 20px; 84 height: auto; 85 padding-left: 0; 86 padding-right: 0; 87 margin-left: 0; 88 margin-right: 0; 89} 90.kankaku{ 91 width: 360px; 92 height: auto; 93 padding-left: 0; 94 margin-left: 0; 95 padding-right: 0; 96 margin-right: 0; 97} 98.syousai{ 99 width: 360px; 100 height: auto; 101 padding-left: 0; 102 margin-left: 0; 103 padding-right: 0; 104 margin-right: 0; 105} 106.naiyou{ 107 width: 360px; 108 height: auto; 109 padding-left: 0; 110 margin-left: 0; 111 padding-right: 0; 112 margin-right: 0; 113} 114.office-servce{ 115 width: 360px; 116 height: auto; 117 padding-left: 0; 118 margin-left: 0; 119 padding-right: 0; 120 margin-right: 0; 121} 122.office{ 123 width: 360px; 124 height: auto; 125 padding-left: 0; 126 margin-left: 0; 127 padding-right: 0; 128 margin-right: 0; 129} 130.information-finance{ 131 width: 360px; 132 height: auto; 133 padding-left: 0; 134 margin-left: 0; 135 padding-right: 0; 136 margin-right: 0; 137} 138.information{ 139 width: 360px; 140 height: auto; 141 padding-left: 0; 142 margin-left: 0; 143 padding-right: 0; 144 margin-right: 0; 145} 146.naiyou01{ 147 width: 360px; 148 height: auto; 149 padding-left: 0; 150 margin-left: 0; 151 padding-right: 0; 152 margin-right: 0; 153} 154} 155/* ########### 375px以下 ########### */ 156@media screen and (max-width: 375px){ 157main{ 158 width: 90%; 159 margin-right:5%; 160 margin-left:5%; 161} 162.mlc{ 163 width: 360px; 164 height: auto; 165 padding-left: 0; 166 margin-left: 0; 167 padding-right: 0; 168 margin-right: 0; 169} 170.kikai{ 171 width: 360px; 172 height: auto; 173 padding-left: 0; 174 margin-left: 0; 175 padding-right: 0; 176 margin-right: 0; 177} 178.zigyousyoukai{ 179 width: 360px; 180 font-size: 20px; 181 height: auto; 182 padding-left: 0; 183 padding-right: 0; 184 margin-left: 0; 185 margin-right: 0; 186} 187.kankaku{ 188 width: 360px; 189 height: auto; 190 padding-left: 0; 191 margin-left: 0; 192 padding-right: 0; 193 margin-right: 0; 194} 195.syousai{ 196 width: 360px; 197 height: auto; 198 padding-left: 0; 199 margin-left: 0; 200 padding-right: 0; 201 margin-right: 0; 202} 203.naiyou{ 204 width: 360px; 205 height: auto; 206 padding-left: 0; 207 margin-left: 0; 208 padding-right: 0; 209 margin-right: 0; 210} 211.office-servce{ 212 width: 360px; 213 height: auto; 214 padding-left: 0; 215 margin-left: 0; 216 padding-right: 0; 217 margin-right: 0; 218} 219.office{ 220 width: 360px; 221 height: auto; 222 padding-left: 0; 223 margin-left: 0; 224 padding-right: 0; 225 margin-right: 0; 226} 227.information-finance{ 228 width: 360px; 229 height: auto; 230 padding-left: 0; 231 margin-left: 0; 232 padding-right: 0; 233 margin-right: 0; 234} 235.information{ 236 width: 360px; 237 height: auto; 238 padding-left: 0; 239 margin-left: 0; 240 padding-right: 0; 241 margin-right: 0; 242} 243.naiyou01{ 244 width: 360px; 245 height: auto; 246 padding-left: 0; 247 margin-left: 0; 248 padding-right: 0; 249 margin-right: 0; 250} 251}
回答2件
0
ベストアンサー
下のコードのscreenとandの間に全角スペースがあるので、
全角スペースを半角スペースに変更してからキャッシュクリアして確認してみていただけますか
CSS
1@media screen and (max-width: 400px) { 2 3@media screen and (max-width: 375px){
投稿2021/04/13 11:14
退会済みユーザー
総合スコア0
0
こうしてみてはどうでしょうか。
css
1 main { 2 padding-left: 0; 3 margin-left: 0; 4 padding-right: 0; 5 margin-right: 0; 6 }
コメントを受けて追記
打ち消し忘れていますよ。
css
1 .mlc p { 2 padding-left: 0; 3 } 4 .office-servce p { 5 padding-left: 0; 6 } 7 .information-finance p { 8 padding-left: 0; 9 }
投稿2021/04/13 09:48
編集2021/04/13 10:17総合スコア36158
変わらないですね
何が変わらないですか？
表示させたいエリアにpaddingとmarginが左側に表示されてエリア外に本文が表示されてしまいます。
「エリア外」とはなんですか？
375px指定外という意味です
ああ、なるほど、これのことでしたか。
問題を把握しました。
追記しました。
追記しましたが、変化ありません。デベロッパーツールでも今までと同じになります。
何が変化しませんか？
変化しませんでした
.mlc p の padding-left はどうなっていますか？
縦書きに375pxの外に表示されてます。
縦書きですか？ 国語の教科書みたいにでしょうか？
それは、まったく問題が再現しないですね……
おそらく、ご提示いただいていない部分に原因があると思います。
問題が再現するコードをご提示ください。
コードは文字の所は＊にリンクは＃に変更してるだけなので同じコードになります
そんなことはないと思います。
3つあるCSSのうち、一つだけしか示されていませんし、画像も同じものを使っているわけではないです。
表示に違いが出てくる可能性はあります。
毎回毎回同じことを書いてしまって申し訳ないのですが、問題が再現しませんと、なんともしがたいです。
とりあえず、いただいたコードで作ったサンプルです。
表示部分を375px以下にしてみても、縦書きになる、ということは起きていないと思います。
https://jsfiddle.net/Lhankor_Mhy/xLbn9sz1/
起きてないですね。他のCSS記載したいのですが文字制限で投稿できないのです
パディング、マージン消えました。375pxにはいりました。ありがとうございます。
どこがいけなかったんでしょうか？いけないところがありすぎてよく解らないのですがどこになるんでしょうか？
確認していませんが、amiya-seさんのご回答の通りなのではないでしょうか。
当方では、コードエディタが自動的に修正してくれていたのかもしれません。
そういえば、CSSのエラーがいつの間にか消えていたような気がしてきました。
皆様いつもありがとうござます。
あなたの回答
tips
プレビュー
