今回はCSSで点線を表現する方法を紹介します。
CSSの点線にはいくつかの実装方法があり、用途に応じて使い分けることができます。
シンプルな点線なら1行で実装できます。また、点の幅や間隔を細かく調整する方法も紹介します。
点線の間隔や幅を自由にカスタマイズする方法も紹介するので、ぜひ参考にしてみてください。
この記事を読むメリット
- CSSで点線を作る基本方法がわかる
- 点線の「間隔」や「幅」を自由に調整できるようになる
CSSで点線を作成する方法①「dotted」
まずは、最も基本的な方法である「dotted」を紹介します。
そもそも点線を表示させるにはCSSプロパティの「border」を使います。
「border」は、以下3つのプロパティをまとめて指定できるショートハンドプロパティです。
| プロパティ名 | 役割 |
|---|---|
| border-color | ボーダーの色を指定 |
| border-style | ボーダーのスタイルを指定 |
| border-width | ボーダーの太さを指定 |
点線を表示するには、「border-style」に「dotted」を指定します。
実際のCSSコードはこちらになります。
border-bottom: 4px dotted #000000;もちろん、一括指定ではなく個別に指定しても同じ結果になります。
border-bottom-color: #000000;
border-bottom-style: dotted;
border-bottom-width: 4px;こちらのコードでできた点線が以下になります。
「border-style」を「dotted」に指定すると、丸いドットが連なったような点線になります。
シンプルな点線を手軽に実装したい場合は、この方法がおすすめです。
CSSで点線を作成する方法②「dashed」
続いては、先ほど紹介した「border-style」のもう1つの指定で「dashed」を紹介します。
border-bottom: 4px dashed #000000;
こちらは先ほどのドットの点線とは異なり、よくイメージする点線ではないでしょうか。
用途にもよりますが、こちらのほうが一般的な点線として使われることが多い印象です。
「dotted」と「dashed」の2種類の違いを理解していただけたかと思います。
CSSで点線の間隔をカスタマイズする方法
ここからは点線の余白や点線の横幅をカスタマイズする方法を紹介します。
ここまで紹介した「dotted」と「dashed」は手軽に使えますが、間隔や横幅を細かく調整することはできません。
点線の幅や間隔を細かく調整したい場合は、「border」ではなく「background」を利用します。
「background」プロパティにはいくつか使えるプロパティがありますが、今回使うのはこちらです。
- backgroud-size
- background-image: linear-gradient
- background-repeat
全体の流れは以下のとおりです。
- 「background-size」で「点線＋空白の1セット」の横幅、縦幅を決める
- 「background-image: linear-gradient」で「点線＋空白の1セット」を作成する
- 2で作った「点線＋空白の1セット」をx軸に繰り返す
少し複雑に見えるかもしれませんが、仕組みはシンプルなので順番に解説していきます。
イメージしづらいかもしれませんが、一つずつ見ていくと意外とシンプルなので安心してください。
「background-size」で「点線＋空白」の1セットの横幅、縦幅を決める
まずは、「点線＋空白」1セットのサイズを決めます。
今回は以下の指定にしました。
background-size: 12px 4px;背景のサイズを横幅：12px、縦幅：4pxに指定しています。
この設定で、「点線＋空白」1セットのサイズが決まります。
background-image: linear-gradientで「点線＋空白の1セット」を作成する
続いて実際に「点線＋空白の1セット」を作成します。
使うCSSプロパティは「background-image」の「linear-gradient」関数です。
「linear-gradient」は、背景にグラデーションを設定するための関数です。
こちらの記事でボーダーにグラデーションを付ける方法を紹介しているので詳しいlinear-gradientの使用法を知りたい方は参考にしてみてください！
この関数を使って、「色付き部分」と「空白」を含む1セットを作成します。
実際のコードはこちらになります。
background-image: linear-gradient(to right,#000000 6px, transparent 6px);これで「左から6pxまでは黒、それ以降は透明」という指定になります。
これを要素の左下に配置したいので以下のコードも付け加えておきます。
background-position: left bottom;これで画像赤枠部分の「点線＋空白の1セット」が出来上がりました。
2で作った「点線＋空白の1セット」をx軸に繰り返す
最後に、「点線＋空白」の1セットをX軸方向へ繰り返します。
こちらのコードを追加します。
background-repeat: repeat-x;これで余白や横幅を自由にカスタマイズできる点線の完成です。
全体のCSS指定はこちら。
.border-style h2.border-custom span {
background-size: 12px 4px;
background-image: linear-gradient(to right, #000000 6px, transparent 6px);
background-repeat: repeat-x;
background-position: left bottom;
padding-bottom: 5px;
}background-sizeやbackground-imageの値を変えることで点線の余白や横幅を自由に変更できるのでぜひ試してみてください！
デフォルトで用意されている以外の点線を作れる
いかがでしたでしょうか。
1行で実装できる「dotted」「dashed」に加え、点の幅や間隔を自由に調整する方法も覚えておくと、デザインに合わせて柔軟に使い分けられます。
特に「background-image: linear-gradient」は最初は少し難しく感じるかもしれませんが、慣れると非常に便利です。ぜひ活用してみてください。
「background-image: linear-gradient」を使ったグラデーションの記事はこちらから。
コメント