column-ruleプロパティは、文章を区切るときに使える設定です。使い方次第で、文章を見やすくする効果が期待できますが、
という方がいるでしょう。
そこで今回は、column-ruleプロパティの
・設定する上で注意するポイント
・応用的な使い方
について説明していきます。
文章は、サイトを制作する上で重要な一つです。
column-ruleプロパティの使い方が分かると、情報をユーザー側に伝えやすくする手段が増えるので、ぜひ目を通してみてください。
目次
column-ruleプロパティとは
column-ruleプロパティの読み方
column-ruleの読み方は、「カラム-ルール」です。
column-ruleプロパティは、ruleという言葉通り、columnのスタイルや色などのルールを決めます。
column-ruleプロパティの説明
column-ruleプロパティは、
に使います。
カラムは、段組みを意味しています。
例えば、3000文字の文章をそれぞれ、「紹介文」「コンテンツ」「まとめ」のように3つに分けるとします。
この分けた状態を段組みと言い、3つに分けたならば、3段組みとなります。
column-ruleプロパティは、段組みで区切られている線に対して設定をします。
column-ruleプロパティで利用できる値
column-ruleプロパティでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| none | noneを指定すると区切り線自体が消えます。 |
| hidden | hiddenを指定した場合、区切り線が非表示となります。しかし、noneと違い非表示で見えなくなっているだけで、要素自体は存在しています。 |
| solid | 区切り線を1本線にするときsolidを指定します。 |
| groove | grooveは、区切り線を窪ませて立体的に見せます。 |
| ridge | ridgeは、区切り線を隆起させて立体的に見せます。 |
| inset | ridgeと同様の区切り線を表示します。 |
| outset | grooveと同様の区切り線を表示します。 |
| dashed | dashedを指定すると破線になります。 |
| dotted | 点線にしたときdottedを指定します。 |
| length | 区切り線の太さを指定するとき、数値にpxやemなど、長さを決める際に使う単位を付けます。 |
| keywords | 区切り線の太さをkeywordsで指定します |
| カラーネーム | 色を意味するカラーネームを指定することで、色が付けられます。 |
| 16進数 | 色を数字やアルファベットなどの16進数で指定します。 |
| RGB | 赤、緑、青に数値を入れて表すRGBを指定して色を付けます。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
column-ruleプロパティの基本的な使い方
column-ruleプロパティの使い方
column-ruleプロパティを使ったコードを以下に記述していきます。
See the Pen
column-ruleプロパティの使い方 by 吉井大輝 (@DaiW)
on CodePen.
カラムのルールを指定しているコードは、
|
1 |
column-rule: solid 2px #b0c4de; |
になります。
ですが、カラムの区切り線を設定するcolumn-countプロパティの設定が必要になります。
上記のコードでは、3つの段組みに区切るため、column-countプロパティの値を3にしています。
column-ruleプロパティで設定するときの注意点
「column-ruleプロパティの使い方」のように設定すれば、区切り線にスタイルや幅、色を指定できます。
しかし、column-ruleプロパティを設定する際、HTMLのタグの書き方も気を付けなければいけません。
どのように気を付けるのか以下のコードを交えて説明していきます。
See the Pen
column-ruleプロパティで設定するときの注意点 by 吉井大輝 (@DaiW)
on CodePen.
「column-ruleプロパティの使い方」のコードのcolumn-countを3から4にして、pタグも4つに増やしています。
pタグごとに段組みをしたい場合、pタグの数に合わせてcolumn-countプロパティの数も揃える必要があります。
数が違っていると、変なところで文章が区切られてしまい見づらくなります。
設定する際、注意してください。
column-ruleプロパティの応用的な使い方
column-ruleプロパティをpタグに指定した場合
「column-ruleプロパティの基本的な使い方」でご紹介しましたコードは、class名を「.column-rule」にしたdivタグに対して指定をする方法でした。
ですが、pタグに指定する方法もあります。
pタグに指定した場合、どのようになるのかコードを見て確認していきましょう。
See the Pen
column-ruleプロパティをpタグに指定した場合 by 吉井大輝 (@DaiW)
on CodePen.
pタグに指定すると、区切り線に応じて自動的に改行されます。
文章で区切りを付けたい特定の部分がないときに使える指定の仕方です。
区切り線を付けるのか考慮してから、column-ruleプロパティの設定をしてみてください。
まとめ
いかがでしたでしょうか？
今回、column-ruleプロパティの基本的な使い方や応用的な使い方、注意するポイントについてご紹介しました。
区切り線を使えるようになるためには、スタイルや幅、色を設定する方法を覚える必要があります。
しかし、どのように区切り線を付けるのか考えられるようになると、column-ruleプロパティをより有効的に使えるようになるでしょう。
column-ruleプロパティのコードを記述しているので、ぜひ参考にしてください。
参考文献：MDN web docs｜column-ruleプロパティ:段組みレイアウトで段間に引かれる線の太さ、スタイル、色を設定します。
