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

CSS3のcolumn-ruleプロパティで段組みの罫線を設定する方法

CSS3で段組み（マルチカラム）レイアウトに罫線を設定するには、ショートハンドプロパティである column-rule を使用します。このプロパティを使うことで、以下の個別プロパティをまとめて指定できます。

column-rule-width：段と段の間の罫線の幅を設定
column-rule-style：段と段の間の罫線のスタイルを設定
column-rule-color：段と段の間の罫線の色を設定

column-ruleの構文

column-rule プロパティの値は、次のように指定します。

column-rule: column-rule-width column-rule-style column-rule-color | initial | inherit;

幅・スタイル・色の3つの値を半角スペースで区切って一度に記述できるため、コードがすっきりし、メンテナンス性も向上します。

記述例1：ショートハンドで一括指定

まずは、column-rule を使って罫線を一括指定する基本的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
    column-count: 5;
    -webkit-column-count: 5; /* Chrome、Safari、Opera用 */
    -moz-column-count: 5; /* Firefox用 */
    -webkit-column-gap: normal; /* Chrome、Safari、Opera用 */
    -moz-column-gap: normal; /* Firefox用 */
    column-gap: normal;
    -webkit-column-rule: 5px dotted orange; /* Chrome、Safari、Opera用 */
    -moz-column-rule: 5px dotted orange; /* Firefox用 */
    column-rule: 5px dotted orange;
}
</style>
</head>
<body>
<h1>PyTorch</h1>
<div class="demo">
PyTorch is defined as an open source machine learning library for Python. It is used for applications such as natural language processing. It is initially developed by Facebook artificial-intelligence research group, and Uber's Pyro software for probabilistic programming which is built on it.
Originally, PyTorch was developed by Hugh Perkins as a Python wrapper for the LusJIT based on Torch framework. There are two PyTorch variants.
PyTorch redesigns and implements Torch in Python while sharing the same core C libraries for the backend code. PyTorch developers tuned this back-end code to run Python efficiently. They also kept the GPU based hardware acceleration as well as the extensibility features that made Lua-based Torch.
</div>
</body>
</html>

この例では、5つの段組みに対して「幅5px・点線（dotted）・オレンジ色」の罫線を一度に適用しています。ベンダープレフィックス（-webkit- や -moz-）を併記することで、主要なブラウザでも正しく表示されます。

表示結果

CSS3のcolumn-ruleプロパティで段組みの罫線を設定する方法

記述例2：個別プロパティをすべて指定

次に、先ほど紹介した column-rule-width、column-rule-style、column-rule-color の各プロパティを個別に指定する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
    column-count: 4;
    -webkit-column-count: 4; /* Chrome、Safari、Opera用 */
    -moz-column-count: 4; /* Firefox用 */
    -webkit-column-gap: normal; /* Chrome、Safari、Opera用 */
    -moz-column-gap: normal; /* Firefox用 */
    column-gap: normal;
    -webkit-column-rule-width: 5px; /* Chrome、Safari、Opera用 */
    -moz-column-rule-width: 5px; /* Firefox用 */
    column-rule-width: 5px;
    -webkit-column-rule-color: blue; /* Chrome、Safari、Opera用 */
    -moz-column-rule-color: blue; /* Firefox用 */
    column-rule-color: blue;
    -webkit-column-rule-style: double; /* Chrome、Safari、Opera用 */
    -moz-column-rule-style: double; /* Firefox用 */
    column-rule-style: double;
}
</style>
</head>
<body>
<h1>PyTorch</h1>
<div class="demo">
PyTorch is defined as an open source machine learning library for Python. It is used for applications such as natural language processing. It is initially developed by Facebook artificial-intelligence research group, and Uber's Pyro software for probabilistic programming which is built on it.
Originally, PyTorch was developed by Hugh Perkins as a Python wrapper for the LusJIT based on Torch framework. There are two PyTorch variants.
PyTorch redesigns and implements Torch in Python while sharing the same core C libraries for the backend code. PyTorch developers tuned this back-end code to run Python efficiently. They also kept the GPU based hardware acceleration as well as the extensibility features that made Lua-based Torch.
</div>
</body>
</html>

この例では、4つの段組みに対して「幅5px・二重線（double）・青色」の罫線を、それぞれの個別プロパティで指定しています。スタイルだけを後から変更したい場合などは、個別プロパティでの指定が便利です。

表示結果

CSS3のcolumn-ruleプロパティで段組みの罫線を設定する方法

まとめ

column-rule プロパティを使えば、段組みレイアウトの罫線を「幅・スタイル・色」の順で簡単に一括指定できます。古いブラウザへの対応が必要な場合は、-webkit- や -moz- のベンダープレフィックス付きの宣言も併せて記述しておくと安心です。

  1. CSS3のword-breakプロパティで改行ルールを指定する方法

    CSS3で改行（ワードブレイク）のルールを指定するには、word-breakプロパティを使用します。このプロパティは、テキストがコンテナの幅を超えた場合に、どのように行を折り返すかを制御するものです。word-breakプロパティに指定できる主な値は以下のとおりです。normal：デフォルトの改行規則に従います。日本語や中国語などのCJK言語では任意の位置で改行されますが、英語などの欧文ではスペースやハイフンがある箇所でのみ改行されます。break-all：言語に関係なく、任意の文字の間で改行を許可します。英語のような単語の途中でも強制的に折り返されるため、幅の狭いコンテナで長い英単語を表示し

  2. CSS3でキーフレームアニメーションを定義する方法

    CSS3でキーフレームアニメーションを作成するには、個々のキーフレームを定義します。キーフレームとは、アニメーションの途中の状態（中間ステップ）を制御するための仕組みです。開始時点と終了時点のスタイルを指定することで、その間の変化をブラウザが自動的に補間してくれます。以下に、CSS3でキーフレームを定義するコード例を示します。コード例<!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;