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

CSS3のcolumn-rule-styleプロパティでマルチカラムの罫線スタイルを指定する方法

CSS3のマルチカラムレイアウトでは、column-rule-style プロパティを使用することで、カラムとカラムの間に引かれる罫線（ルール）のスタイルを指定できます。このプロパティは border-style と同様の値を受け入れ、solid（実線）、dotted（点線）、dashed（破線）、double（二重線）などを設定可能です。

column-rule-styleの主なポイント

  • 罫線のスタイルは column-rule-style で指定する
  • 罫線の色は column-rule-color で指定する
  • 罫線の太さは column-rule-width で指定する
  • これらをまとめて指定する shorthand プロパティとして column-rule も用意されている

なお、古いブラウザとの互換性を考慮する場合は、-webkit- や -moz- といったベンダープレフィックスを併記しておくと安心です。

サンプルコード

以下のコードでは、テキストを4カラムに分割し、カラム間にマゼンタ色の実線罫線を表示しています。実際にブラウザで実行して動作を確認してみましょう。

<html>
   <head>
      <style>
         .multi {
            /* カラム数を指定 */
            -webkit-column-count: 4;
            -moz-column-count: 4;
            column-count: 4;
           
            /* カラム間の余白を指定 */
            -webkit-column-gap: 40px;
            -moz-column-gap: 40px;
            column-gap: 40px;
           
            /* 罫線のスタイルと色を指定 */
            column-rule-style: solid;
            column-rule-color: #ff00ff;
         }
      </style>
   </head>
   <body>
      <div class = "multi">
         Tutorials Point originated from the idea that there exists a class of readers who respond
         better to online content and prefer to learn new skills at their own pace from the comforts
         of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and
         elated by the response it generated, we worked our way to adding fresh tutorials to our
         repository which now proudly flaunts a wealth of tutorials and allied articles on topics
         ranging from programming languages to web designing to academics and much more.
      </div>
   </body>
</html>

実行結果のポイント

このコードを実行すると、テキストが4つのカラムに分割され、各カラムの間に40pxの余白とともに、マゼンタ色（#ff00ff）の実線が縦方向に描画されます。新聞や雑誌のような段組みデザインを、画像を使わずCSSだけで簡単に実現できるのがマルチカラムレイアウトの魅力です。

  1. CSS3のtransitionショートハンド（短縮）プロパティの使い方

    CSSのtransitionショートハンド（短縮）プロパティを使うと、transition-property（遷移対象のプロパティ）、transition-duration（遷移にかかる時間）、transition-timing-function（変化の速度カーブ）、transition-delay（遅延時間）という4つの個別プロパティを、たった1行にまとめて指定することができます。値は「プロパティ名 → 時間 → タイミング関数 → 遅延」の順にスペース区切りで記述します。複数のプロパティを同時にアニメーションさせたい場合は、それぞれの指定をカンマ（,）で区切って並べます。記述例以下は、tr

  2. HTML DOMのcolSpanプロパティとは？使い方をサンプルコード付きで解説

    colSpanプロパティとは HTML DOMのcolSpanプロパティは、<td>要素（テーブルのセル）に設定されるcolspan属性に対応したプロパティです。JavaScriptからこのプロパティを操作することで、セルのcolspan属性値を取得したり、動的に変更したりすることが可能になります。 colspan属性は、1つのセルが横方向にまたがる列の数を指定するために使用されます。例えば「colspan=2」と設定すれば、そのセルは2列分の幅を持つことになり、テーブルのレイアウトを柔軟に制御できます。 構文 colSpanプロパティの基本構文は以下のとおりです。 tableda