CSS辞典 column-ruleプロパティ、column-rule-widthプロパティ、column-rule-styleプロパティ、column-rule-colorプロパティの解説

段組みの罫線の幅とスタイルと色を一括で指定できる「column-rule」プロパティ、段組みの罫線の幅を指定する「column-rule-width」プロパティ、段組みの罫線のスタイルを指定する「column-rule-style」プロパティ、段組みの罫線の色を指定する「column-rule-color」プロパティの使用方法を記載

CSS3/2.1

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera

column-ruleプロパティ

初期値-widthプロパティ、-styleプロパティ、-colorプロパティに従う
適用される要素段組みされた要素
モジュールCSS Multi-column Layout Module
継承なし

概要・使用方法

{ <span class="fz-20px"><span class="fz-20px">column-rule</span></span>: -width -style -color;}Code language: HTML, XML (xml)

column-ruleプロパティは、段組みの各段の間に表示する罫線のプロパティをまとめて指定できる。

指定できる値

指定できる値は各プロパティと同様です。半角スペースで区切って指定できます。順序は順不同です。

column-rule-widthプロパティ

初期値medium
適用される要素段組みされた要素
モジュールCSS Multi-column Layout Module
継承なし

概要・使用方法

{ <span class="fz-20px"><span class="fz-20px">column-rule-width</span></span>: 幅;}Code language: HTML, XML (xml)

「column-rule-widthプロパティ」は、段組みの各段の間に表示する罫線の幅を指定します。

指定できる値(列数)

thin細い罫線が表示されます。
medium通常の罫線が表示されます。
thick太い罫線が表示されます。
数値+単位罫線の幅を単位付きの数値で指定します。

詳しい数値+単位付きについて以下を参照

column-rule-styleプロパティ

初期値none
適用される要素段組みされた要素
モジュールCSS Multi-column Layout Module
継承なし

概要・使用方法

{ column-rule-style: スタイル;}Code language: CSS (css)

column-rule-styleプロパティ」は、段組みの各段の間に表示する罫線のスタイルを指定します。

指定できる値(スタイル)

noneボーダーは表示されません。
※他のボーダーと重なる場合は他の値が優先されます。
hiddennoneと同様に表示されません。
※他のボーダーと重なる場合、hiddenが優先されます。
dotted点線で表示されます。
dashed破線で表示されます。
solid1本の実線で表示されます。
double2本の実線で表示されます。最低、ボーダーの幅が3px以上必要になります。
groove立体的にくぼんだ線のような表示になります。
ridge立体的に浮き出るような線の表示になります。
inset四辺すべてに指定すると、ボーダーの内部が立体的にくぼんだような表示になります。
outset四辺すべてに指定すると、ボーダーの内部が立体的に浮き出るような表示になります。

column-rule-colorプロパティ

初期値colorプロパティ値
適用される要素段組みされた要素
モジュールCSS Multi-column Layout Module
継承なし

概要・使用方法

{ column-rule-color: 色;}Code language: CSS (css)

column-rule-colorプロパティ」は、段組みの各段の間に表示する罫線の色を指定します。

指定できる値(色)

罫線の色をキーワード、rgb()、rgba()によるRGBカラー、hsl()、hsla()によるHSLカラー、またはカラーコードで指定できます。

色の詳しい指定方法は以下を参照

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>columns-ruleプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>

    .sample-columns-rule {
       column-count: 2 ;
       column-rule:1em dotted red;
    }
    .sample-columns-type1 {
       column-count: 2 ;
       column-rule-width:thick;
       column-rule-style:dotted;
       column-rule-color:red;
    }
    .sample-columns-type2 {
       column-count: 2 ;
       column-rule-width:thick;
       column-rule-style:dashed;
       column-rule-color:red;
    }
    .sample-columns-type3 {
       column-count: 2 ;
       column-rule-width:thick;
       column-rule-style:solid;
       column-rule-color:red;
    }
    .sample-columns-type4 {
       column-count: 2 ;
       column-rule-width:thick;
       column-rule-style:double;
       column-rule-color:red;
    }
    .sample-columns-type5 {
       column-count: 2 ;
       column-rule-width:thick;
       column-rule-style:groove;
       column-rule-color:red;
    }
    .sample-columns-type6 {
       column-count: 2 ;
       column-rule-width:thick;
       column-rule-style:ridge;
       column-rule-color:red;
    }
     .sample-columns-type7 {
       column-count: 2 ;
       column-rule-width:thick;
       column-rule-style:inset;
       column-rule-color:red;
    }
    .sample-columns-type8 {
       column-count: 2 ;
       column-rule-width:thick;
       column-rule-style:outset;
       column-rule-color:red;
    }
    
    </style>
  </head>
  <body>
      <p>columns-rule</p>
      <p class="sample-columns-rule">レオナルドの伝記に記されている以外に知られていない。彼女はおそらく裕福なフィレンツェの承認、フランスチェスコ・デル・ジョコンドの妻、リサ・ゲラルディーニであった。それ故にラ・ジョコンダという別の作品タイトルとなっているのだろう。</p>
      <p>dotted</p>
      <p class="sample-columns-type1">レオナルドの伝記に記されている以外に知られていない。彼女はおそらく裕福なフィレンツェの承認、フランスチェスコ・デル・ジョコンドの妻、リサ・ゲラルディーニであった。それ故にラ・ジョコンダという別の作品タイトルとなっているのだろう。</p>
      <p>dashed</p>
      <p class="sample-columns-type2">「Monna」はミセスという意味である。この肖像画に書かれた頃にジョコンドは新しい屋敷を購入しており、また、1502年に夫婦の第三子が誕生している。どちらも肖像画を依頼する妥当な理由である。</p>
      <p>solid</p>
      <p class="sample-columns-type3">モナ・リザは腰かけた姿勢、そして半身像で描かれているが、このようなポーズはイタリアの肖像画では、ほんとんど前例がない。前例がないことがまた神秘的でもあり、前例がないことをした理由を考察したくなる。</p>
      <p>double</p>
      <p class="sample-columns-type4">レオナルドの伝記に記されている以外に知られていない。彼女はおそらく裕福なフィレンツェの承認、フランスチェスコ・デル・ジョコンドの妻、リサ・ゲラルディーニであった。それ故にラ・ジョコンダという別の作品タイトルとなっているのだろう。</p>
      <p>groove</p>
      <p class="sample-columns-type5">「Monna」はミセスという意味である。この肖像画に書かれた頃にジョコンドは新しい屋敷を購入しており、また、1502年に夫婦の第三子が誕生している。どちらも肖像画を依頼する妥当な理由である。</p>
      <p>ridge</p>
      <p class="sample-columns-type6">モナ・リザは腰かけた姿勢、そして半身像で描かれているが、このようなポーズはイタリアの肖像画では、ほんとんど前例がない。前例がないことがまた神秘的でもあり、前例がないことをした理由を考察したくなる。</p>
      <p>inset</p>
      <p class="sample-columns-type7">レオナルドの伝記に記されている以外に知られていない。彼女はおそらく裕福なフィレンツェの承認、フランスチェスコ・デル・ジョコンドの妻、リサ・ゲラルディーニであった。それ故にラ・ジョコンダという別の作品タイトルとなっているのだろう。</p>
      <p>outset</p>
      <p class="sample-columns-type8">「Monna」はミセスという意味である。この肖像画に書かれた頃にジョコンドは新しい屋敷を購入しており、また、1502年に夫婦の第三子が誕生している。どちらも肖像画を依頼する妥当な理由である。</p>
  </body>
</html>
実行結果

columns-rule

レオナルドの伝記に記されている以外に知られていない。彼女はおそらく裕福なフィレンツェの承認、フランスチェスコ・デル・ジョコンドの妻、リサ・ゲラルディーニであった。それ故にラ・ジョコンダという別の作品タイトルとなっているのだろう。

dotted

レオナルドの伝記に記されている以外に知られていない。彼女はおそらく裕福なフィレンツェの承認、フランスチェスコ・デル・ジョコンドの妻、リサ・ゲラルディーニであった。それ故にラ・ジョコンダという別の作品タイトルとなっているのだろう。

dashed

「Monna」はミセスという意味である。この肖像画に書かれた頃にジョコンドは新しい屋敷を購入しており、また、1502年に夫婦の第三子が誕生している。どちらも肖像画を依頼する妥当な理由である。

solid

モナ・リザは腰かけた姿勢、そして半身像で描かれているが、このようなポーズはイタリアの肖像画では、ほんとんど前例がない。前例がないことがまた神秘的でもあり、前例がないことをした理由を考察したくなる。

double

レオナルドの伝記に記されている以外に知られていない。彼女はおそらく裕福なフィレンツェの承認、フランスチェスコ・デル・ジョコンドの妻、リサ・ゲラルディーニであった。それ故にラ・ジョコンダという別の作品タイトルとなっているのだろう。

groove

「Monna」はミセスという意味である。この肖像画に書かれた頃にジョコンドは新しい屋敷を購入しており、また、1502年に夫婦の第三子が誕生している。どちらも肖像画を依頼する妥当な理由である。

ridge

モナ・リザは腰かけた姿勢、そして半身像で描かれているが、このようなポーズはイタリアの肖像画では、ほんとんど前例がない。前例がないことがまた神秘的でもあり、前例がないことをした理由を考察したくなる。

inset

レオナルドの伝記に記されている以外に知られていない。彼女はおそらく裕福なフィレンツェの承認、フランスチェスコ・デル・ジョコンドの妻、リサ・ゲラルディーニであった。それ故にラ・ジョコンダという別の作品タイトルとなっているのだろう。

outset

「Monna」はミセスという意味である。この肖像画に書かれた頃にジョコンドは新しい屋敷を購入しており、また、1502年に夫婦の第三子が誕生している。どちらも肖像画を依頼する妥当な理由である。

chrome 実行サンプル

column-ruleプロパティ、column-rule-widthプロパティ、column-rule-styleプロパティ、column-rule-colorプロパティのchromeブラウザの実行結果

Firefox 実行サンプル

column-ruleプロパティ、column-rule-widthプロパティ、column-rule-styleプロパティ、column-rule-colorプロパティのfirefoxブラウザの実行結果

edge 実行サンプル

column-ruleプロパティ、column-rule-widthプロパティ、column-rule-styleプロパティ、column-rule-colorプロパティのedgeブラウザの実行結果

opera 実行サンプル

column-ruleプロパティ、column-rule-widthプロパティ、column-rule-styleプロパティ、column-rule-colorプロパティのoperaブラウザの実行結果

すなりん

サイトの管理者「すなりん」です。現役のシステムエンジニアをしてます。要件定義からテスト、プロジェクトマネージャー、顧客調整、社内インフラなんでもこなします。いわゆるフルスタック・エンジニアです。 仕事柄色んな技術や製品を扱うことが多く、なかなか覚えているもの大変ですし、しばらくすると忘れてしまうことが多いので、自分なりの形で技術情報やIT関係の情報を掲載しています。 個人で仕事の合間をみながら記事の投稿やサイトを更新していますので、誤字や間違った内容があったりもしますので、閲覧者はご理解の上ご利用ください。

コメントを残す