CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのcolumnsプロパティで段組み（マルチカラム）を簡単に設定する方法

CSSで段組みレイアウトを作成する際に便利なのが、columnsプロパティです。このプロパティは、column-width（列の幅）とcolumn-count（列数）をまとめて指定できる省略形（ショートハンド）プロパティで、1行のコードだけでマルチカラムレイアウトを実現できます。

columnsプロパティの基本的な使い方

columnsプロパティは、次のように幅と列数をスペース区切りで指定します。

columns: 100px 4;

この例では、各列の最小幅を100px、列数を4として設定しています。さらに、column-rule-colorやcolumn-rule-styleを組み合わせることで、列と列の間に罫線（区切り線）を表示することも可能です。

実装例

以下のコードは、columnsプロパティを使って4列の段組みを作成し、灰色の破線で列を区切るサンプルです。実際にブラウザで表示して動作を確認してみてください。

サンプルコード

<!DOCTYPE html>
<html>
  <head>
    <style>
      .demo {
        column-rule-color: gray;
        columns: 100px 4;
        column-rule-style: dashed;
      }
    </style>
  </head>
  <body>
    <div class = "demo">
      This is demo text. This is demo text. This is demo text. This is demo text.
      This is demo text. This is demo text. This is demo text. This is demo text.
      This is demo text. This is demo text. This is demo text. This is demo text.
      This is demo text. This is demo text. This is demo text. This is demo text.
      This is demo text. This is demo text. This is demo text. This is demo text.
      This is demo text. This is demo text. This is demo text. This is demo text.
      This is demo text. This is demo text. This is demo text. This is demo text.
    </div>
  </body>
</html>

ポイント解説

  • column-rule-color: gray; … 列間の罫線の色をグレーに指定しています。
  • columns: 100px 4; … 列の幅を100px、列数を4列に設定する省略記法です。
  • column-rule-style: dashed; … 罫線のスタイルを破線に指定しています。

このようにcolumnsプロパティを活用すれば、新聞のような段組みレイアウトを短いコードで手軽に実装できます。レスポンシブデザインにも対応しやすいため、記事一覧やテキストコンテンツの表示にぜひ活用してみてください。

  1. CSSのtext-justifyプロパティとは？使い方と各値の解説

    text-justifyプロパティとは CSSのtext-justifyプロパティは、text-alignプロパティにjustify(両端揃え)が指定されている場合に、テキストをどのような方法で均等割り付けするかを制御するためのプロパティです。単語間のスペースで調整するか、文字間のスペースで調整するかなどを細かく指定できます。 構文 text-justify: auto | inter-word | inter-character | none | initial | inherit; プロパティの値一覧 auto — ブラウザが最適な揃え方を自動的に判断します(既定値)。 inter-

  2. CSSのrightプロパティとは？構文と使い方を実例付きで解説

    CSSのrightプロパティは、positionが指定された要素の水平方向の位置を設定するために使用します。基準となる包含ブロックの右端から、要素の右端までの距離を指定できます。 なお、rightプロパティはpositionプロパティがstatic以外（relative・absolute・fixed・sticky）のときにのみ有効になる点に注意してください。 構文 right: auto|length|initial|inherit; 指定できる値 auto … 初期値。位置の計算をブラウザに任せます。 length … pxやemなどの単位で距離を指定します。負の値も指定可能です。 ini