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

【CSS】column-widthプロパティで段組みの列幅を指定する方法

CSSのcolumn-widthプロパティで列の幅を指定する

段組み（マルチカラム）レイアウトにおいて各列の幅を指定したい場合は、CSSの column-width プロパティを使用します。このプロパティに希望する幅の値を設定すると、テキストが読みやすい形で段組み表示されます。

以下のサンプルコードでは、column-count で列数を4に指定しつつ、column-width で各列の幅を100pxに設定しています。さらに column-rule-color と column-rule-style を併用することで、列と列の間にグレーの破線を表示しています。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   column-count: 4;
   column-rule-color: gray;
   column-rule-style: dashed;
   column-width: 100px;
}
</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-width： 各列の理想的な幅を指定します。コンテナの幅が狭い場合は、指定した幅を維持できるようブラウザが列数を自動的に調整します。
  • column-count： 列数を直接指定します。column-width と同時に指定した場合、こちらは最大列数として扱われます。
  • column-rule-color / column-rule-style： 列間に表示される区切り線の色とスタイルをそれぞれ指定します。上の例ではグレーの破線が適用されます。
  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>：包含ブロックの幅に対する割合（%）で指定します。 負