calcの使い道・カラム分け

こんにちは、なないろフロントエンドプログラマーのTです。

HTML・CSSでレイアウトを組んでいると、
カラムを三分割にしたい時にwidthの設定を「33.333333%」などにすることがあると思います。
しかし、calcを使うともっと簡単にカラム分けをすることができます。

calcとは

calcとはCSSの値を指定するときに四則演算をすることができる関数で、

「width:calc(100% / 3);」などと書くことができます。

この例では横幅が100％の1/3になります、簡単にカラムを分けることができました。

これをもう少し応用の効く形に変えたいと思います。

width:calc((100% / 3) * 1 - 0.01px)

見たままですが、100%を1/3にしたあとに1掛けて0.01px引いています

こうすることで色々なカラム分けに対応できます。

※-0.01pxとしているのはこれを外すと場合によってはIEでカラム落ちが発生するためです。

左：width:calc((100% / 10) * 7 - 0.01px);
中：width:calc((100% / 10) * 1 - 0.01px);
右：width:calc((100% / 10) * 2 - 0.01px);

左：width:calc((100% / 7) * 4 - 0.01px);

右：width:calc((100% / 7) * 3 - 0.01px);

また、メディアクエリを使い、ブラウザが狭くなったタイミングで

width:calc((100% / 2) * 1 - 0.01px);

や

width:calc((100% / 1) * 1 - 0.01px);

とすると簡単にカラム数を変更できるのでレスポンシブ対応もラクになります。

こちらの例はカラム数が変わるように設定しているため、ブラウザ幅を縮めて確認してみてください。

前の記事へ

次の記事へ