LONST TECH - Design STUDIO -

【column】すぐに使えるレイアウト。”column”で簡単マルチカラムレイアウト。

2021.01.26

CSS

こんにちは。

WEBデザイナー兼プロ格闘家のショウイチです。

今日は、高さの異なるボックスを隙間なく詰めるレイアウトを簡単に実装できCSSを紹介します。

前回の記事でCSS Gridの紹介をしました。

【CSS Grid】CSSグリッドでのレイアウト作成。これであなたもグリッドマスター。

column

それでは、早速columnについて説明していきます。

columnはマルチカラムレイアウトを作るときに非常に便利なCSSです。

マルチカラムレイアウトというのはこんな感じのレイアウトのことです。

texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext

通常このレイアウトを作るときdivなどにgridやflex、floatなどを使いますが、その場合、ボックスを2つ用意しないといけません。

しかしcolumnの場合は1つののボックスを用意すれば複数の行を作ることができます。

サンプルコードはこちら↓

See the Pen
Jjbjgjb by syo (@mma111syo)
on CodePen.

column以外のCSSはボックスが2つあるのがわかりますね。

floatに関しては高さの指定もしないといけません。

その点columnはシンプルですね。

プロパティ

次にcolumn-〇〇プロパティについて説明していきます。

レイアウト・デザインの教科書

デザインの基本原則から、今すぐ役立つ新しい考え方まで、一生使えるプロの技術がきちんと身につく!

Amazon

Yahoo!ショッピング

楽天

column-count

column-countは行の数を指定します。

例えば、column-count: 2;だと2分割、column-count: 3;だと3分割してくれます。

See the Pen
JjboRjR by syo (@mma111syo)
on CodePen.

このように任意の数の行が簡単に作れます。

テキストが長文で見にくくなってしまったときは、column-countで文章を見やすく分割してみましょう。

column-width

column-widthは1つの行の幅を指定します。

column-countとcolumn-widthを組み合わせ行の幅の合計が親要素より大きくなってしまう場合は、指定した数のcolumn-countは適用されません。

See the Pen
wvoBzGY by syo (@mma111syo)
on CodePen.

このようにwidth: 400px;に指定したほうは4行になっていません。

columns

columnsは先ほど上で説明した、column-countとcolumn-widthとをまとめて指定することができるショートハンドです。

例えば、columns: 3 200px;はcolumn-count: 3;column-width: 300px;ということになります。

See the Pen
rNWaMjx by syo (@mma111syo)
on CodePen.

このようにCSSをすっき整理できますね。

column-gap

column-gapは行と行の余白の部分の指定をします。

初期値としてnormalの値が付いています。

See the Pen
mdOyWbq by syo (@mma111syo)
on CodePen.

このように任意の余白をしていできます。

column-rule

column-rule-style区切り線のスタイル、

column-rule-width区切り線の太さ、

column-rule-color区切り線の色をそれぞれ指定します。

column-ruleは上の3つをまとめて指定することができるショートハンドです。

See the Pen
qBqErOq by syo (@mma111syo)
on CodePen.

borderのショートハンドと同じ書き方ですね。

サンプルコードの青の区切りのほうは少し右に寄っていますがこれはtext-align: justify;を追加すると中央になります。

column-span

column-spanは行と行の中で複数の行をまたぐ指定をします。

See the Pen
rNWamwY by syo (@mma111syo)
on CodePen.

タイトルなどを行をまたいで表示したい場合はcolumn-span: all;で指定ができます。

レイアウト

それでは実際に使用レイアウトを作ってみます。

See the Pen
VwmYbgo by syo (@mma111syo)
on CodePen.

上のサンプルコードで使用している.avoidにかけている、page-break-inside: avoid;とbreak-inside: avoid;は途中で段落移動しないようにする指定です。

文章がおかしなところで段落移動してしまうときなどに使います。

レスポンシブ対応させるには@media screen andでcolumn-countの指定を変えてください。

このようにcolumnはマルチカラムレイアウト作成時非常に便利です。ぜひ使用してみてください。

今日からあなたもレイアウトマスター！

それでは本日はここまで、また次回！

Webデザイン必携。プロにまなぶ現場の制作ルール84