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

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

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

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

HTML5

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

Q&A

1回答

1142閲覧

Iphone seサイズ時の余白

free_teku

総合スコア103

CSS3

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

HTML5

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

0グッド

0クリップ

投稿2021/11/02 08:59

編集2021/11/02 09:44

前提・実現したいこと

画像のように、なぜか右端に余白ができてしまう(Chorme)

レスポンシブ

発生している問題・エラーメッセージ

newsのセクションにのみ右端の余白ができる

試したこと

・レスポンシブの調整中にnews-listに余白がある。(By div tool)
・中央揃えしたいのだが、右の余白が邪魔してる説があり、消したい
・しかし、何の余白なのか、div toolでは理解できず、質問しました。

該当のソースコード

字数制限により、下記サイト参照いただけると幸いです。

html,css
変更

css

1@charset "UTF-8"; 2html { 3 font-size: 62.5%; 4} 5 6body { 7 font-size: 1.6rem; 8 color: #000000; 9 min-width: 100vw; 10} 11 12img { 13 width: 100%; 14 height: auto; 15 vertical-align: bottom; 16} 17 18a { 19 text-decoration: none; 20} 21 22li { 23 list-style: none; 24} 25 26@media screen and (min-width: 600px) and (max-width: 1179px) { 27 section { 28 margin-top: 60px; 29 } 30} 31 32@media screen and (max-width: 599px) { 33 section { 34 margin-top: 60px; 35 } 36} 37 38.inner { 39 max-width: 1180px; 40 margin: 0 auto; 41 -webkit-box-sizing: border-box; 42 box-sizing: border-box; 43} 44 45@media screen and (min-width: 600px) and (max-width: 1179px) { 46 .inner { 47 padding: 0 25px; 48 } 49} 50 51@media screen and (max-width: 599px) { 52 .inner { 53 padding: 0 15px; 54 } 55} 56 57.wrapper { 58 width: 100%; 59 margin: 0 auto; 60 /* -webkit-box-sizing: content-box; 61 box-sizing: content-box; */ 62} 63 64@media screen and (min-width: 600px) and (max-width: 1179px) { 65 .wrapper { 66 padding: 0px 20px; 67 } 68} 69 70@media screen and (max-width: 599px) { 71 .wrapper { 72 padding: 0 20px; 73 } 74} 75 76.sec-theme { 77 margin: 0 auto; 78} 79 80.sec-theme > img { 81 display: block; 82 width: 3.3%; 83 height: 5.1%; 84 margin: 0 auto; 85 padding-top: 60px; 86 padding-bottom: 20px; 87} 88 89.sec-theme .cmn-ttl { 90 display: block; 91 font-size: 3.6rem; 92 color: #000000; 93 text-align: center; 94 margin: 0 auto; 95} 96 97.cmn-link { 98 background-color: #ffffff; 99 width: 40%; 100 height: calc(54px/545px*100%); 101 border: 1px solid #707070; 102 font-size: 1.6rem; 103 text-align: center; 104} 105 106@media screen and (min-width: 600px) and (max-width: 1179px) { 107 .cmn-link { 108 margin-top: 50px; 109 margin: 0 auto; 110 } 111} 112 113@media screen and (max-width: 599px) { 114 .cmn-link { 115 width: 100%; 116 margin-top: 35px; 117 margin: 0 auto; 118 } 119}

news

1 2.news { 3 background-color: #ffffff; 4} 5 6@media screen and (min-width: 600px) and (max-width: 1179px) { 7 .news { 8 margin: 0 auto; 9 padding: 0 25px; 10 } 11} 12 13@media screen and (max-width: 599px) { 14 .news { 15 padding: 0 25px; 16 } 17} 18 19.news-link { 20 display: -webkit-box; 21 display: -webkit-flex; 22 display: -ms-flexbox; 23 display: flex; 24 -webkit-box-pack: center; 25 -webkit-justify-content: center; 26 -ms-flex-pack: center; 27 justify-content: center; 28 -webkit-box-align: center; 29 -webkit-align-items: center; 30 -ms-flex-align: center; 31 align-items: center; 32} 33 34.news-link > a { 35 display: block; 36 margin: 46px 26px 49px; 37} 38 39.news-link > a .sale-info { 40 padding-bottom: 1px; 41 border-bottom: 1px solid #000; 42} 43 44.news .news-list { 45 display: -ms-grid; 46 display: grid; 47 -ms-grid-columns: (1fr)[2]; 48 grid-template-columns: repeat(2, 1fr); 49 gap: 20px 46px; 50 -webkit-box-pack: center; 51 -webkit-justify-content: center; 52 -ms-flex-pack: center; 53 justify-content: center; 54 width: calc(100% - 40px*1); 55} 56 57@media screen and (max-width: 599px) { 58 .news .news-list { 59 display: -webkit-box; 60 display: -webkit-flex; 61 display: -ms-flexbox; 62 display: flex; 63 -webkit-box-orient: vertical; 64 -webkit-box-direction: normal; 65 -webkit-flex-direction: column; 66 -ms-flex-direction: column; 67 flex-direction: column; 68 display: block; 69 } 70} 71 72.news .news-list .news-item { 73 background-color: #F6F6F6; 74 display: block; 75 /* height:60px; 76 margin:0px; */ 77 max-width: calc(100% - 40px); 78 min-width: 34%; 79 margin-top: 49px; 80 margin-bottom: 20px; 81 display: -webkit-box; 82 display: -webkit-flex; 83 display: -ms-flexbox; 84 display: flex; 85 -webkit-box-align: center; 86 -webkit-align-items: center; 87 -ms-flex-align: center; 88 align-items: center; 89 word-break: break-all; 90 /* margin-top: 49px; 91 margin-bottom: 20px; 92 display: flex; 93 align-items: center; */ 94} 95 96@media screen and (min-width: 600px) and (max-width: 1179px) { 97 .news .news-list .news-item { 98 width: 100%; 99 max-width: calc(100% - 40px); 100 } 101} 102 103@media screen and (max-width: 599px) { 104 .news .news-list .news-item { 105 width: 100%; 106 max-width: calc(100% - 40px); 107 } 108} 109 110.news .news-list .news-item:nth-child(2n) { 111 margin-left: 40px; 112 width: calc(100% - 40px*1); 113} 114 115@media screen and (min-width: 600px) and (max-width: 1179px) { 116 .news .news-list .news-item:nth-child(2n) { 117 width: 100%; 118 max-width: calc(100% - 40px); 119 } 120} 121 122@media screen and (max-width: 599px) { 123 .news .news-list .news-item:nth-child(2n) { 124 display: block; 125 width: 100%; 126 max-width: calc(100% - 40px); 127 } 128} 129 130.news .news-list .news-item > a { 131 display: block; 132 display: -webkit-box; 133 display: -webkit-flex; 134 display: -ms-flexbox; 135 display: flex; 136} 137 138@media screen and (min-width: 600px) and (max-width: 1179px) { 139 .news .news-list .news-item > a { 140 display: -webkit-box; 141 display: -webkit-flex; 142 display: -ms-flexbox; 143 display: flex; 144 -webkit-box-orient: vertical; 145 -webkit-box-direction: normal; 146 -webkit-flex-direction: column; 147 -ms-flex-direction: column; 148 flex-direction: column; 149 } 150} 151 152@media screen and (max-width: 599px) { 153 .news .news-list .news-item > a { 154 width: 100vw; 155 display: block; 156 max-width: 100%; 157 } 158} 159 160.news .news-list .news-item > a > img { 161 width: 100px; 162 height: 100px; 163 padding: 15px 10px; 164} 165 166@media screen and (min-width: 600px) and (max-width: 1179px) { 167 .news .news-list .news-item > a > img { 168 width: 100%; 169 height: 100%; 170 } 171} 172 173@media screen and (max-width: 599px) { 174 .news .news-list .news-item > a > img { 175 width: 100px; 176 height: 100px; 177 } 178} 179 180.news .news-list .news-item > a .news-txt time { 181 padding: 15px 10px; 182} 183 184.news .news-list .news-item > a .news-txt .news-desc { 185 padding-top: 10px; 186}

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

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

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

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

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

guest

回答1

0

HTMLに</li>が1つ多く記されていたり(94行目または96行目)、</div></form>の後であるべきところが前になっていたりという構造上のミスでレイアウト崩れが起きているものと思われます。
HTMLをよく見直してみてください。

投稿2021/11/02 09:09

cerfweb

総合スコア1899

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

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

free_teku

2021/11/02 09:22

ご指摘ありがとうございます。 承知しました。newsの部分を一度確認してみます。
free_teku

2021/11/02 09:41

Dirty Markupを使い、HTML,CSSをクリーンにしましたが結論変わりませんでした。汗 原因についてご教授いただけると幸いです。m(__)m
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問