今回は、width: calc();を使って、以下の画像のようなカードの横並びをする方法をご紹介します。
width:calc(…);の使い方
calcの基本的な使い方
まずは、基本的な使い方の解説からです。
.item {
width: calc(100% - 80px);
}
これは、width:100%;から80pxを引いた横幅を指定しています。
このように、calcで計算した値を指定することができます。
※『-』の前後には、半角スペースを入れるようにしましょう！
（半角スペースを入れないと、width:calc;が効かなくなります）
以下は、使用例になります。
HTML
<section>
<div class="wid">見出し</div>
</section>
<section>
<div class="wid2">見出し</div>
</section>
CSS
section {
margin-top: 50px;
padding-top: 50px;
padding-bottom: 50px;
background-color: rgb(154, 154, 154);
}
中央揃えをしていない
.wid {
background-color: rgb(0, 123, 255);
width: calc(100% - 80px);
}
marginを設定している
.wid2 {
background-color: rgb(0, 123, 255);
width: calc(100% - 80px);
margin: 0 auto;
}
width: calc();を使って、カードを横並びにする方法
さて本題のwidth: calc();を使って、カードを横並びにする方法について解説していきます。
まずは、以下の画像とコードをご覧ください。
HTML
<section>
<div class="box">
<div class="box__item">
<h2>見出し</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<div class="box__item">
<h2>見出し</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<div class="box__item">
<h2>見出し</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
</section>
CSS
.box {
display: flex;
flex-wrap: wrap;
padding: 20px;
border: 2px solid #333;
}
.box__item {
width: calc(33.3333% - 30px * 2 / 3);
margin-right: 27px;
border: 1px solid #333;
}
.box__item:last-child {
margin-right: 0;
}
それでは、順番に解説していきます。
display: flex;
display: flex;で子要素を横並びにする
flex:wrap;
flex:wrap;で、子要素が増えるごとに次の段にいくようにする
width: calc(33.3333% – 30px * 2 / 3);
33.3333%・・・横幅に子要素を3つ並べたいので、100%を3で割り33.3333%にします。
30px*2・・・1つ目と2つ目の子要素の右側に余白を空けたいため、『空けたい余白の数値×子要素の個数』を記載
/3・・・ここでは、、横幅に子要素を3つ並べたいため、3を記載している（横幅に並べたい個数を記載）
margin-right: 27px;
ここでは、子要素の右側に対して余白を設定している。
また、30pxではなく、なぜ27pxに設定したのかと言うと、
『border: 1px solid #333;』を設定しているため、そのpx分を考慮して27pxと指定しています。
最後の子要素の余白を、last-childで0にする
3つ目の子要素には、右側に余白を作りたくないので、
:last-childで、margin-right: 0;を設定し、余白を消しています。
まとめ
今回は、width:calc(…);の使い方について解説しました。
特に、calcを使ったカードの横並びは、よく使う方法なので、
公式として覚えておきましょう！
また、widthに関する記事のリンクを貼っていますので、気になる方はぜひ！
それでは、最後まで読んでいただきありがとうございました。
