【css】columnsで簡単カラム分割

本日のお役立ちメモは、カラムを簡単に作成するcssのご紹介です。
その名も「columns」。そのまんまですね。

これを使うとどのようなことが出来るのか、これを使ってどのようなものを作るのかをご紹介いたします。
WEBデザインでのアイデアとして覚えておくと便利なcssですよ。

そのものずばりカラムを作るCSS

まずはそのまま使ってみましょう。そうすれば一発でどのようなことが出来るのかがわかります。

HTML

<div class="column">
  <h1>見出し１</h1>
  <p>１．この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
  <p>２．この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
  <p>３．この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
  <p>４．この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
  <h2>見出し２</h2>
  <p>５．この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
  <p>６．この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
  <p>７．この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</div>

CSS

.column {
  columns: 3;
}

出力

このように、テキストが均等に３列に分割されます。勝手にカラム分けされて表示されました。
このように、長い文章を画面の横幅に合わせて分割することで、読みやすい文章表示ができるようになります。雑誌っぽいレイアウトでこれを使うといい感じになりそうですね。

.column {
  columns: 3;
  column-rule: 3px solid #dd7777;
  gap: 40px;
}

.column p {
  text-align: justify;
}

左右の余白の指定にはgapを使います。
また、この余白の真ん中に縦にラインを入れることも可能です。

見出しで切り分ける場合はh1～h2のタグにこのようなCSSを追加します。

.column h1 {
  column-span: all;
}

.column h2 {
  column-span: all;
  margin-top: 60px;
}

まだcolumnsには利用できないcssが多い

これ以外にも、break-before、break-after、break-insideなど、段組みを作るためのタグは色々あるのですが、現時点ではfirefoxやsafariで対応されていません。（※2022年6月現在）

今すぐ使うCSSでは無いのですが、これからこのようなCSSも出てきて、同時これらを活かすレイアウトも考えられていく事が予想されますので、今のうちにちょっと頭の隅にでも入れておくと良いかもしれません。

最後に

今回は、利用できるブラウザに制限のあるものを紹介したのですが、たまにはこんな感じで、新しいものを触ってみておくのも良いんじゃないかなと思います。簡単につまむ程度なら使えるとは思います。遊びで作るページなどで、ちょっとだけ試してみたりするのもいいんじゃないかなと思います。

もしも、ホームページ制作でお困りでしたらパタパタワークスがあなたの力になれるかもしれません。ちょっとしたことでもお気軽にお問い合わせください。それではまた！