calc関数
calc関数最近になってようやく使い方が少しわかるようになり
その便利さに気付きましたが、最初見たときはそりゃまあ意味不明でした。
だって関数って名前ついてるし?????でした。
僕個人として良く使う場面としては、良くあるカード型レイアウトです。
↓こんなの
僕は普段こういったレイアウトの時はBootStrapのグリッドシステムを使用するのですが(col-〇〇)、上記画像の最後の5カラムの時にBootStrapのグリッドでは再現しづらいのでcalcを使っています。正しいかどうかは知りません本当に知りませんよ。
cardのクラスはcard-itemとでもしておきましょう。そのカードを5列、カード同士の余白が30px、最後のカードは余白無しがいいですよね。ね。
5分割なので一つのcardの幅は20%がいいです。
が、
.card-item{
width: 20%;
margin-right: 30px;
}
余白も取ることを考えるとこれではカラム落ちしてしまいます。
上記のCSSだと「20%に加えて余白30pxを取る」とゆうことなので5分割にはなりませんよね。
そこでcalcの出番です。
calcはプロパティの値を計算式で実行できる関数です。例えば
.card-item{
margin-right: 30px;
width: calc((100% / 120px) / 5 );
}
このように幅を書き換えます。(100% / 120px)は100%から余白の合計(30px×4)で120pxになるのでその幅を引いてそれを5で割る。
とゆう風にすると常に余白30pxの5分割レイアウトができます。
ただ、右端のcardは余白無しでぴったりくっつけたいので下記の記述をします。
.card-item:nth-child(5n){
margin-right: 0;
}
calc便利だけど難しい。。w
この記事が気に入ったらサポートをしてみませんか?