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

    CSS

    こんにちは。

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

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

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


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

    前回紹介したCSS Gridはとても自由性が高く、素晴らしいプロパティですが、初めて使用する方からすると、少し難しいと思います。

    今回紹介するCSS、columnはCSS Gridよりも簡単です。

    「HTMLとCSS使えます! 」といえる力が身につく、クリエイターとしてプロをめざしたい人が最初に読む本。言語やツールの使い方の初歩の初歩からはじめて、読み終わるころにはしっかりと基礎力がついているように、本当に必要な知識を選んで15のレッスンを構成しました。どこに行っても胸を張って「使えます! 」といえる…そんなクリエイターへの道をこの本から踏み出しましょう。

    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-〇〇プロパティについて説明していきます。

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

    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-width1つの行の幅を指定します。

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

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

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

    columns

    columnsは先ほど上で説明した、column-countcolumn-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 andcolumn-countの指定を変えてください。

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

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

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

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