今回は、セクションごとのインナー幅を共通クラスで管理する方法についてまとめました。
よく使う手法なので、是非参考にしてみてください。
セクションごとのインナー幅を共通クラスで管理する方法
完成形はこちらです。
See the Pen
Untitled by ゆーじろー (@yuji64)
on CodePen.
インナー幅が共通であることが分かるでしょう。
HTML
<section class="l-section price">
<div class="container">
<h2 class="heading">料金</h2>
<div class="wrap">インナー幅は1000pxです。</div>
</div>
</section>
<section class="l-section news">
<div class="container">
<h2 class="heading">ニュース</h2>
<div class="wrap">インナー幅は1000pxです。</div>
</div>
</section>
CSS
.l-section {
padding: 50px 0;
text-align: center;
}
.price {
background-color: pink;
}
.container {
max-width: 1000px;
width: calc(100% - 40px);
margin: 0 auto;
background-color: #fff;
}
.wrap {
padding: 30px 0;
}
親要素であるl-sectionで背景色や上下の余白をつけて、containerでインナー幅を指定します。
親要素とcontainerでスタイルを分けることで、背景色があるなし関わらずインナー幅を共通に管理できます。
containerはmax-widthを1000pxにしてwidth: calc(100% – 40px);を指定することで、インナー幅1000pxでありながら40pxの半分である20pxが左右に余白としてつきます。
今回紹介した手法を使えば、セクションごとにいちいちインナー幅を指定する必要がないので、コーディングの効率化になりますよ。
まとめ
以上が、セクションごとのインナー幅を共通クラスで管理する方法でした。
