CSS

新聞のようなカラムデザインができるcolumn系プロパティ

ここでは、文章をタテに分割表示させることができるcolumn系プロパティについて見ていきたいと思います。column系プロパティは意外と知られていないものなので初めて知った方もいるかもしれません。実例を見ながらどんなものかを理解していきましょう。

カラム数を指定するcolumn-countプロパティ

column-countプロパティは、値に数字を入力して何カラムにするかを指定するプロパティです。column系プロパティの使い方は、すべてpタグやdivタグなどで文章全体をくくり、これをセレクタとして指定します。

column-count: 2;で2カラムを指定

ボタンで表示を切り替えてご覧ください。

See the Pen column01 by kenichi (@ken81) on CodePen.

CSS

.column-container {
  column-count: 2;
}

2カラムを作ってみました。カラム数を指定すると、横幅に応じてキレイに分割されます。

column-count: 3;で3カラムを指定

See the Pen column02 by kenichi (@ken81) on CodePen.

今度は、3カラムです。column-countプロパティについてはこれで大丈夫でしょう。次に行きます。

カラムの幅を指定するcolumn-widthプロパティ

column-widthは、カラムの幅を指定するプロパティです。指定された幅のカラムが要素の横幅の分だけ作成されます。この設定のみだと何カラムになるのかは、要素の横幅に依存します。

See the Pen column03 by kenichi (@ken81) on CodePen.

CSS

.column-container {
  column-width: 10em;
}

ここでは、カラムの幅を10emにしてみました。pxでも良いですが文章の幅を指定するので単位はemの方が自然かもしれませんね。ちなみにこのプロパティでは値にパーセント(%)は指定できませんでした。パーセントを使うならcolumn-countプロパティでカラム数を指定すべきでしょう。

カラム数とカラムの幅のショートハンドcolumnsプロパティ

columnsプロパティは、上記の2つのプロパティ(column-count, column-width)を同時に指定できるショートハンドプロパティです。半角スペースで2つの値を指定します。順番はどちらが先でも問題ありません。

See the Pen column04 by kenichi (@ken81) on CodePen.

CSS

.column-container {
  columns:3 100px;
}

カラム数を3、幅を100pxに指定しました。パソコンで見る限り、ちゃんと表示されているように見えますがブラウザの幅によっては、指定通りになっていないかもしれません。というのも、このプロパティは2つの値のバランスを取ってレイアウトされるそうなので、ちょっと挙動が把握しずらいです・・・。でも、変にデザインが崩れるわけでもないのでよしとしましょう。

カラムとカラムの間の線を設定するcolumn-ruleプロパティ

column-ruleプロパティは、column-rule-widthプロパティ、column-rule-styleプロパティ、column-rule-colorプロパティの3つをまとめたショートハンドです。borderプロパティと同じといえば分かりやすいでしょうか。線の色(color)、幅(width)、スタイル(style)の3つの値を半角スペースを空けて入力します。3つの値の順番は関係ありません。

それではいくつかサンプルを見てみましょう。

See the Pen column05 by kenichi (@ken81) on CodePen.

CSS

.column-container {
  column-count: 3;
  column-rule:1px solid #666;
}

実線を引きました。

See the Pen column06 by kenichi (@ken81) on CodePen.

CSS

.column-container {
  column-count: 3;
  column-rule:1px dotted #666;
}

点線にしてみました。

See the Pen column07 by kenichi (@ken81) on CodePen.

CSS

html{
  background:#ececec;
  font-family:Times New Roman;
}
h1{
  text-align:center;
}
.column-container {
  column-count: 3;
  column-rule:1px solid #333;
}

英新聞風のデザインにしてみました。

ふーん、って感じですかね。
column関連プロパティは、今すぐあのデザインに使おうみたいなものではありませんが、知っておくと何かに使えそうですね。

WordPressテーマ「MAG(TCD036)」

最近の記事

  1. CSS

    CSS|中央寄せが効かないときは・・・
  2. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  3. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  4. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  5. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
PAGE TOP