Q&A
タイトルの通りです
mainの左右にpadding指定をして中身を中央寄せをしているのですがwidth:1030px;を指定すると画像が大きくなったり要素が左寄りになってレイアウトが崩れます なぜこのような挙動が起こるのかpadding等について調べてみたのですが、わかりません
HTML
1<!DOCTYPE html> 2<html lang="ja" > 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&display=swap" rel="stylesheet"> 7 <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet"> 8 <link rel="stylesheet" href="css/reset.css"> 9 <link rel="stylesheet" href="css/style.css"> 10 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> 11 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 12 </head> 13 <body> 14 <main class="main"> 15 <section class="about"> 16 <h3 class="section-title">About</h3> 17 <h4>ミニマルで<br>洗練されたデザインを</h4> 18 <p>近年、ミニマルなデザインが流行しています。そこで弊社では、クライアント企業様新規サービス等の課題に対してミニマルで洗練されたデザインを実現させることで解決のサポートを致します。 19 もちろん全てのサービスにおいてミニマルなデザインが課題解決になるわけ 20 ではないので、課題や今後のサービスの展開等しっかり 21 とヒアリングを行なった上でご提案させて頂きます。</p> 22 </section> 23 24 <section class="service"> 25 <h3 class="section-title">Service</h3> 26 <div class="service-wrapper"> 27 <div class="service-1"> 28 <img src="img/service-image@2x.jpg"> 29 <div class="service-p1"> 30 <h4>リリース時の<br>サポートでサービスのブランディングを</h4> 31 <p>弊社では、リリース時もサポートさせて頂きます。 32 プレスリリース用のサイトや動画制作を通して、 33 サービスのブランディングを行わせて頂きます。</p> 34 </div> 35 </div> 36 37 <div class="service-2"> 38 <div class="service-p2"> 39 <h4>リリース後の<br>サポートで効果を最大化させる</h4> 40 <p>弊社では、リリース後もサポートさせて頂きます。サービスはリリース後に 41 様々な課題にぶつかります。そこでクライアント様と 42 一緒に改善を行うことで、デザインの効果を最大化させます。</p> 43 </div> 44 <img src="img/service-image02@2x.jpg"> 45 </div> 46 </div> 47 </section> 48 49 <section class="news"> 50 <h4 class="section-title">News</h4> 51 <div class="news-wrapper"> 52 <div class="news-box"> 53 <a href="#"> 54 <img src="img/card-image1@2x.jpg" > 55 <p>新規サイトを公開しました。今回のサイトは白と黒を基調にした 56 ミニマルなデザインになっています。</p> 57 </a> 58 </div> 59 <div class="news-box"> 60 <a href="#"> 61 <img src="img/card-image2@2x.jpg" > 62 <p>新規サイトを公開しました。今回のサイトは白と黒を基調 63 にしたミニマルなデザインになっています。</p> 64 </a> 65 </div> 66 <div class="news-box"> 67 <a href="#"> 68 <img src="img/card-image3@2x.jpg"> 69 <p>新規サイトを公開しました。今回のサイトは白と黒を基調 70 にしたミニマルなデザインになっています。</p> 71 </a> 72 </div> 73 74 </div> 75 </section> 76 77 </main> 78
CSS
1@charset "UTF-8"; 2html{font-size:62.5%;} 3*,*::before,*::after{box-sizing: border-box;} 4body{font-family: "Roboto","Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo sans-serif;} 5a{text-decoration: none;} 6.main{width:1030px; padding-left:10%; padding-right:10%; margin-bottom:150px;} 7.about{margin-top:100px; margin-bottom:150px;} 8.about h4{font-size:24px; font-weight:normal; margin-bottom:42px; line-height:2;} 9.about p{font-size:14px; color:#141414; line-height:2.9;} 10 11.service{margin-bottom:150px;} 12.service-wrapper{margin-top:70px;} 13.service h4{font-size:24px; font-weight:normal; margin-bottom:42px; line-height:2;} 14.service p{font-size:14px; color:#141414; line-height:2.9;} 15.service-1{display:flex; justify-content: space-between; margin-bottom:50px;} 16.service-1 img{margin-right:70px;} 17.service-2{display:flex; justify-content: space-between;} 18.service-2 img{margin-left:70px;} 19 20.section-title{font-size:36px; text-align:center; font-weight: normal;} 21.news-wrapper{display:flex; justify-content: space-between; margin-top:70px;} 22.news-box{width:320px; height:323px; box-shadow:2px 2px 4px rgba(0,0,0,0.2);} 23.news-box p{color:#141414; margin:25px 32px; font-size:13px; line-height:1.9;} 24
回答1件
0
ベストアンサー
.mainのwidthを明示しつつ、左右中央に配置したいなら、左右のmarginをautoにすれば良いと思いますよ。
css
1.main{ 2 width: 1030px; 3 padding-left: 10%; 4 padding-right: 10%; 5 margin: 0 auto 150px; 6}
投稿2021/02/11 13:18
総合スコア1323
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/12 12:32
2021/02/12 14:35
2021/02/13 04:10