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

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

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

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

HTML5

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

Q&A

解決済

1回答

457閲覧

同じクラスにも関わらずコンテンツ幅に違いが生じた

wkou4627

総合スコア12

CSS3

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

HTML5

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

0グッド

0クリップ

投稿2023/02/03 02:57

編集2023/02/03 03:04

実現したいこと

コンテンツの最大横幅を1200px、横のパディングを5%に指定したいです。
(メインビジュアルのみ全幅)

前提

模写コーディングをしています。

コンテンツ幅を指定するcssには、同じクラス(wrapper)を用いているのですが、
Archive、Newのセクションのみ、コンテンツの最大横幅1200px、横のパディング5%が効いていて
Catalog、Antique、フッターのセクションには同じように効いていません。

Catalog、Antique、フッターのセクションもArchive、Newのセクションと同じコンテンツ幅を指定したいです。

現状はこのような表示になっています。

該当のソースコード

HTML

1 2ー省略ー 3 4 <main> 5 <section class="wrapper"> 6 <h2 class="section-title">A special, long article in a newspaper or magazine</h2> 7 <p class="section-text"> 8 テキストテキストテキストテキストテキストテキストテキストテキスト<br> 9 テキストテキストテキストテキストテキスト 10 </p> 11 12 <div class="container"> 13 <a href="index.html" class="archive"> 14 <img src="./assets/img/magazine-archive.jpg" alt="アーカイブ"> 15 <div class="archive-title"> 16 <h3>Archive</h3> 17 <p> 18 テキストテキストテキストテキスト<br> 19 テキストテキストテキスト 20 </p> 21 </div> 22 </a> 23 24 <a href="index.html" class="news"> 25 <img src="./assets/img/magazine-new.jpg" alt="ニュース"> 26 <div class="news-title"> 27 <h3>News</h3> 28 <p> 29 テキストテキストテキストテキスト<br> 30 テキストテキストテキスト 31 </p> 32 </div> 33 </a> 34 </div> 35 </section> 36 37 <section class="grid"> 38 <img src="./assets/img/fashion.jpg" class="section-visual" alt="背景画像"> 39 <div class="wrapper grid-items"> 40 <h2 class="section-title">Fashion & Style</h2> 41 <p class="section-text"> 42 テキストテキストテキストテキストテキストテキストテキストテキスト<br> 43 テキストテキストテキストテキストテキスト 44 </p> 45 46 <a href="index.html" class="read-more-botton"> 47 Read More 48 </a> 49 </div> 50 </section> 51 52 <section class="wrapper wrapper-gray"> 53 <div class="flex"> 54 <div class="child-catalog-left"> 55 <img src="./assets/img/catalog.jpg" alt="カタログ"> 56 </div> 57 <div class="child-catalog-right"> 58 <h2>Catalog</h2> 59 <p> 60 <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span> 61 <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span> 62 <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span> 63 </p> 64 65 <p> 66 <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span> 67 <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span> 68 <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span> 69 </p> 70 71 <p> 72 <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span> 73 <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span> 74 <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span> 75 </p> 76 </div> 77 </div> 78 79 <div class="flex-reverse"> 80 <div class="child-catalog-left"> 81 <img src="./assets/img/catalog.jpg" alt="アンティーク"> 82 </div> 83 <div class="child-catalog-right"> 84 <h2>Antique</h2> 85 <p> 86 <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span> 87 <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span> 88 <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span> 89 </p> 90 91 <p> 92 <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span> 93 <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span> 94 <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span> 95 </p> 96 97 <a href="index.html">Read more</a> 98 </div> 99 </div> 100 </section> 101 </main> 102 103 <footer> 104 <div class="wrapper footer-wrapper"> 105 <div class="item"> 106 <img src="./assets/img/logo.svg" alt="Wag88"> 107 </div> 108 109 <div class="item"> 110 <h3>タイトル</h3> 111 <ul> 112 <li>テキストテキストテキスト</li> 113 <li>テキストテキストテキスト</li> 114 <li>テキストテキストテキスト</li> 115 <li>テキストテキストテキスト</li> 116 <li>テキストテキストテキスト</li> 117 </ul> 118 </div> 119 120 <div class="item"> 121 <h3>タイトルタイトルタイトル</h3> 122 <p> 123 テキストテキストテキストテキストテキストテキストテキストテキストテキスト 124 テキストテキストテキストテキストテキストテキストテキストテキストテキスト 125 テキストテキストテキストテキストテキストテキストテキストテキストテキスト 126 </p> 127 </div> 128 </div> 129 <p class="copyright">&copy Mag88</p> 130 131 </footer> 132 133</body> 134 135</html>

css

1@charset "UTF-8"; 2 3* { 4 margin: 0; 5} 6 7html { 8 font-size: 100%; 9} 10 11body { 12 font-family: "Arial", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; 13 font-size: 0.875rem; 14 color: #2a2a2a; 15} 16 17img { 18 max-width: 100%; 19} 20 21a { 22 text-decoration: none; 23 color: black; 24} 25 26.wrapper { 27 max-width: 1200px; 28 padding: 0 5%; 29 margin: 0 auto 100px auto; 30} 31 32.section-title { 33 margin: 50px 0 20px 0; 34 text-align: center; 35} 36 37.section-text { 38 text-align: center; 39 margin-bottom: 30px; 40} 41 42/*-------------- 43header 44--------------*/ 45ー省略ー 46 47/*--------------- 48Archive、New 49---------------*/ 50 51.container { 52 display: grid; 53 grid-template-columns: 1fr 1fr; 54 gap: 20px; 55} 56 57.container > a { 58 display: grid; 59 place-items: center; 60} 61 62.container > a > * { 63 grid-column: 1; 64 grid-row: 1; 65} 66 67.archive-title, 68.news-title { 69 color: white; 70 font-size: 0.8rem; 71 font-weight: bold; 72 background-color: rgba(0,0,0,0.5); 73 text-align: center; 74 padding: 15px 20px; 75} 76 77 78/*-------------- 79fashion&styles 80--------------*/ 81ー省略ー 82 83/*-------------- 84catalog&antiqe 851段目 86--------------*/ 87.wrapper-gray { 88 max-width: 100%; 89 background-color: rgb(239, 236, 236); 90} 91.flex { 92 display: flex; 93 justify-content: space-between; 94} 95 96.child-catalog-left, 97.child-catalog-right { 98 width: calc(100% / 2 - 10px); 99 100} 101.child-catalog-left { 102 display: flex; 103 justify-content: center; 104 align-items: center; 105} 106 107.child-catalog-left img { 108 max-width: 90%; 109 max-height: 90%; 110 vertical-align: bottom; 111} 112 113.child-catalog-right { 114 display: flex; 115 flex-direction: column; 116 align-items: center; 117 justify-content: center; 118} 119 120.child-catalog-right h2 { 121 padding: 20px; 122} 123 124.child-catalog-right p { 125 padding: 10px; 126} 127 128/*-------------- 129catalog&antiqe 1302段目 131--------------*/ 132.flex-reverse { 133 display: flex; 134 justify-content: space-between; 135 flex-direction: row-reverse; 136} 137.child-catalog-right a { 138 display: block; 139 border: 1px solid; 140 width: 150px; 141 text-align: center; 142 margin: 0 auto; 143 padding: 10px 0; 144 margin: 30px; 145 146} 147 148/*----------------- 149フッター 150------------------*/ 151.wrapper:last-child { 152 margin-bottom: 0; 153} 154 155.footer-wrapper { 156 display: flex; 157 justify-content: space-around; 158 color: white; 159 background-color: rgb(57, 56, 56); 160 max-width: 100%; 161 height: 300px; 162 margin: 0; 163} 164 165.item { 166 display: grid; 167 width: calc(100% / 3); 168 padding: 50px 0; 169} 170 171.item:first-child { 172 align-items: center; 173} 174 175.item ul { 176 padding: 0; 177} 178.item li { 179 list-style-type: '-'; 180} 181.copyright { 182 background-color: white; 183 text-align: center; 184 font-size: 0.8rem; 185 padding: 30px; 186}

試したこと

思いつくことを試してみましたが、理想通りにいきませんでした。
例えば、
・各セクションに
,wrapper {
max-width: 1200px;
padding: 0 5%;
margin: 0 auto;}
を追記してみたり、

・wrapperを削除し、mainに対して同じ宣言をしてみましたが解決することができませんでした。

初歩的なことかと思いますが、長い時間解決することができていないので、お力添えいただけますと幸いです。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

ベストアンサー

フッターのセクションには同じように効いていません。

イメージ説明

いちおう、効いてますね。

多分、ご質問の意図は

CSS

1.wrapper { 2 max-width: 1200px!important; 3 padding: 0 5%; 4 margin: 0 auto 100px auto!important; 5}

これで解決するのでは???

投稿2023/02/03 04:33

penguin520

総合スコア345

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

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

wkou4627

2023/02/03 15:26

ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問