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

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

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

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

Q&A

解決済

1回答

384閲覧

レスポンシブデザイン:スマホ表示がうまくいかない

退会済みユーザー

退会済みユーザー

総合スコア0

CSS

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

0グッド

0クリップ

投稿2019/07/28 05:26

・解決したい問題
レスポンシブにてスマホ表示にした際、画像のようにヘッダーとh1要素のみスマホ幅よりはみ出してしまいます。原因がわかりません。

イメージ説明

html

1<body> 2 <!-- Start Header --> 3 <header> 4 <div class="container header-contents"> 5 <div class="header-left"> 6 <img src="img/logo.png" class="logo"> 7 </div> 8 <div class="header-right"> 9 <ul class="header-list"> 10 <li><a href="#card">Card</a></li> 11 <li><a href="#news">News</a></li> 12 <li><a href="#price">Price</a></li> 13 <li><a href="#access">Access</a></li> 14 <li><a href="#contact">Contact</a></li> 15 </ul> 16 </div> 17 </div> 18 </header> 19 <!-- End Header --> 20 <!-- Start Main Page --> 21 <section class="main-wrapper"> 22 <div class="container"> 23 <h1>一番伝えたいことを書く</h1> 24 <p>リードリードリード</p> 25 <a href="#" class="btn">お問い合わせ</a> 26 </div> 27 </section> 28 <!-- End Main Page --> 29 <script src="js/script.js"></script> 30</body>

css

1* { 2 margin: 0; 3 padding: 0; 4} 5 6body { 7 font-family: 'Yu Gothic'; 8} 9 10.container { 11 width: 1366px; 12 max-width: 100%; 13 margin: 0 auto; 14} 15 16li { 17 list-style: none; 18} 19 20a { 21 text-decoration: none; 22 color: #fff; 23} 24 25header { 26 height: 100px; 27 background-color: #3F51B5; 28 box-shadow: 0 3px 3px; 29 position: fixed; 30 top: 0; 31 left: 0; 32 width: 100%; 33 box-shadow: 0 3px 3px #000000; 34} 35 36.header-contents { 37 display: flex; 38 justify-content: space-between; 39} 40 41.logo { 42 padding: 31px 0 30px 140px; 43 width: 200px; 44 height: 39px; 45} 46 47.header-right { 48 width: 344px; 49 height: 25.5px; 50 margin: 40px 140px 34.5px 0; 51 font-size: 16px; 52} 53 54.header-list { 55 display: flex; 56} 57 58.header-list li { 59 margin-right: 30px; 60} 61 62.header-list a { 63 line-height: 21px; 64} 65 66.header-list a:hover { 67 border-bottom: 3px solid #E81919; 68} 69 70.main-wrapper { 71 text-align: center; 72 background-image: url(../img/main-img.jpg); 73 background-position: center center; 74 background-repeat: no-repeat; 75 background-size: cover; 76 height: 700px; 77 padding-top: 100px; 78} 79 80.main-wrapper h1 { 81 width: 748px; 82 height: 87px; 83 padding-top: 249px; 84 margin-bottom: 12px; 85 margin: 0 auto; 86 font-size: 68px; 87 line-height: 108px; 88} 89 90.main-wrapper p { 91 width: 342px; 92 height: 49px; 93 padding-bottom: 82px; 94 margin: 0 auto; 95 font-size: 38px; 96 font-weight: bold; 97 line-height: 61px; 98} 99 100.btn { 101 width: 228px; 102 height: 49px; 103 padding: 17px 81px; 104 margin-bottom: 138px; 105 display: inline-block; 106 background-color: #3F51B5; 107 border-radius: 12px; 108 box-shadow: 0 3px 6px #000000; 109 font-size: 38px; 110 font-weight: bold; 111} 112 113@media screen and (max-width: 767px) { 114 header { 115 height: 80px; 116 } 117 .header-list { 118 display: none; 119 } 120 .logo { 121 padding-left: 70px; 122 width: 180px; 123 height: 30px; 124 line-height: 80px; 125 } 126 .main-wrapper h1 { 127 font-size: 40px; 128 } 129 .main-wrapper p { 130 font-size: 20px; 131 width: 342px; 132 height: 30px; 133 padding-bottom: 40px; 134 } 135 .main-wrapper .btn { 136 width: 150px; 137 height: 40px; 138 padding: 8px 40px; 139 margin-bottom: 60px; 140 font-size: 20px; 141 font-weight: bold; 142 line-height: 40px; 143 } 144} 145

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

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

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

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

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

guest

回答1

0

ベストアンサー

スマホ表示の時のh1要素のwidthを指定していないから、 width: 748px;がスマホ表示でも適応されている。
スマホの横幅が425pxなのにh1要素の横幅が748pxだからはみ出す。

width:100%にするか、メディアクエリーの中のh1要素のwidthを指定してあげるかしてください。

投稿2019/07/28 07:23

zushi0905

総合スコア683

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

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

退会済みユーザー

退会済みユーザー

2019/07/29 04:00

解決できました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問