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

CSSのcolumn-gapプロパティで段組みの列間隔を指定する方法

CSSで段組みレイアウトを作成する際、column-gapプロパティを使用すると、各列と列の間の余白（ギャップ）を自由に指定できます。新聞や雑誌のような段組みデザインでは、適切な列間隔を設定することで、テキストが読みやすくなり、見た目もすっきりと整います。

column-gapプロパティの基本

column-gapプロパティには、px（ピクセル）、em、%などの単位で値を指定します。値が大きいほど列同士の間隔が広くなります。以下の例では、4段組みのテキストに対して、列間のギャップを50pxに設定しています。

サンプルコード

次のコードを実行して、column-gapプロパティの動作を確認してみましょう。ここでは値として50pxを指定しています。

<!DOCTYPE html>
<html>
    <head>
        <style>
            .demo {
                column-count: 4;
                column-gap: 50px;
            }
        </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-count: 4; — 要素内のテキストを4つの列に分割します。
  • column-gap: 50px; — 各列の間に50pxの余白を設けます。この値を変更すると、列間隔を調整できます。

column-gapを指定しない場合、ブラウザのデフォルト値（通常1em程度）が適用されます。また、column-ruleプロパティと組み合わせれば、列の間に罫線を表示することも可能です。レスポンシブデザインでは、メディアクエリと併用して画面幅に応じた列数や間隔を切り替えるのも効果的です。

  1. CSSの@mediaルールとは？メディアクエリの基本と使い方を実例付きで解説

    CSSの@mediaルールは、1つのスタイルシート内で、印刷・画面・すべてなど、異なるメディアタイプに応じて異なるスタイルを指定するために使用されます。通常はカンマ区切りのメディアタイプのリストと、対象メディア用のスタイルルールを含むCSS宣言ブロックが続きます。構文（Syntax）@mediaルールの基本的な構文は以下の通りです。@media not | only mediatype and (expressions) { CSS-Code; }「not」や「only」は省略可能なキーワードで、「expressions」には画面幅などの条件（メディア特性）を指定します。これにより、デ

  2. CSSのtext-indentプロパティでテキストのインデントを設定する方法

    CSSのtext-indentプロパティを使用すると、ブロック要素内のテキストの1行目にインデント（字下げ）を設定できます。段落の冒頭を字下げして文章を読みやすくしたい場合などに活用できる、便利なプロパティです。 構文 CSS text-indentプロパティの基本構文は以下のとおりです。 Selector { text-indent: /*value*/ } 指定できる主な値は次のとおりです。 <length>：px、em、cmなどの絶対値または相対値でインデント幅を指定します。 <percentage>：包含ブロックの幅に対する割合（%）で指定します。 負