CSS column-ruleジェネレーター
マルチカラムレイアウトの列間に表示される区切り線をカスタマイズ。幅、スタイル、色を設定。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
罫線スタイル一覧
solid
dotted
dashed
double
groove
ridge
inset
outset
CSS column-ruleとは？
column-ruleは、CSSのマルチカラムレイアウトにおいて、列と列の間に表示される区切り線を定義するプロパティです。 新聞や雑誌のようなレイアウトを作成する際に便利です。
プロパティ
column-rule-width: 罫線の太さを指定column-rule-style: 罫線のスタイル（solid, dotted, dashedなど）column-rule-color: 罫線の色を指定column-rule: 上記3つを一括で指定する短縮プロパティ
ブラウザサポート
すべてのモダンブラウザでサポートされています。IE10以降でも使用可能です。