CSSのcalc()で計算式を使って全画面リストパネル

サイトをデザインする際にサイズは%に指定したいけど、ボーダーの幅はpxでしたいことがあると思いますが通常のCSSのデザインではピッタリ合わせることが出来ません。このような時に、calc()と言うファンクションを利用することによって簡単にデザインできます。計算式には、加算+、減算-、乗算*、除算/が使用できます。

幅100%でボーダー幅が10pxの場合。

div {
  width: calc(100% - 20px); /*100%からボーダー幅10px左右にあるので20pxを引く*/
  border: 10px solid #ffffff;
}

このcalc()を応用して全画面リストパネルを作ってみました。幅、高さ共に50%でボーダー幅を差し引いてデザインしています。高さの50%は指定出来ませんのでvw、vhの単位を使用しています。これらの単位はビューポイントに対する割合で表示されます。50vwであればビューポートの幅に対し50%を表し、50vhであればビューポートの高さに対し50%を表します。

See the Pen CSS calc()を使った全画面リストパネル by デザインとまとめ社 (@design-matome) on CodePen.

Posted in CSS