目次
ウェブデザインでは、テキストやコンテンツを視覚的に区切るために点線や破線がよく使用されます。デフォルトのスタイルではカスタマイズが難しい場合もありますが、HTMLとCSSを組み合わせることで、間隔を自由に調整できる点線や破線を作成できます。ここでは、具体的なコード例とともに実装方法を紹介します。
基本的な点線・破線の作成方法
HTMLとCSSを使って基本的な点線や破線を作成する方法です。borderプロパティを利用することで、簡単に線を表示できます。
<!-- 点線 -->
<hr class="dotted-line">
<!-- 破線 -->
<hr class="dashed-line">.dotted-line {
border-bottom: 2px dotted #ea56d4;
}
.dashed-line {
border-bottom: 2px dashed #ea56d4;
}
間隔を調整できる破線の作り方
デフォルトのborderプロパティでは、点や破線の間隔を細かく調整するのが難しいです。そこで、疑似要素や背景画像を利用して、より自由度の高い線を作成します。
CodePenサンプルコード
水平破線の実装例
以下は、間隔を調整できる水平点線の作り方です。
<p class="x-dashline">テキスト本文です</p>.x-dashline {
text-align: center;
width: fit-content;
margin: 30px auto;
position: relative;
}
.x-dashline::after {
content: "";
--COLOR_1: #ea56d4;
--COLOR_2: transparent;
--WIDTH: 5px;
--HEIGHT: 2px;
--SIZE: 2px;
background-image: linear-gradient(to right, var(--COLOR_1), var(--COLOR_1) var(--SIZE), var(--COLOR_2) var(--SIZE), var(--COLOR_2) var(--WIDTH));
background-size: var(--WIDTH) var(--HEIGHT);
background-repeat: repeat-x;
width: 100%;
height: var(--HEIGHT);
position: absolute;
left: 0;
bottom: 0;
}
解説:
.x-dashlineクラスの::after疑似要素で線を描画。- CSS変数を使用して色やサイズをカスタマイズ。
linear-gradientとbackground-sizeを組み合わせて点線の間隔を調整。
垂直破線の実装例
垂直方向に点線を表示する場合のコード例です。
<p class="y-dashline">テキスト本文です</p>.y-dashline {
writing-mode: vertical-rl;
text-align: center;
width: fit-content;
margin: 30px auto;
position: relative;
}
.y-dashline::after {
content: "";
--COLOR_1: #ea56d4;
--COLOR_2: transparent;
--WIDTH: 2px;
--HEIGHT: 5px;
--SIZE: 2px;
background-image: linear-gradient(to bottom, var(--COLOR_1), var(--COLOR_1) var(--SIZE), var(--COLOR_2) var(--SIZE), var(--COLOR_2) var(--HEIGHT));
background-size: var(--WIDTH) var(--HEIGHT);
background-repeat: repeat-y;
width: var(--WIDTH);
height: 100%;
position: absolute;
left: 0;
bottom: 0;
}
解説:
.x-dashlineとは基本は同じで向きを変えるのみ
間隔を調整できる点線の作り方
CodePenサンプルコード
点線の実装例
丸みを帯びた点線を作成する方法です。
<p class="dotline">テキスト本文です</p>.dotline {
text-align: center;
width: fit-content;
margin: 30px auto;
padding-bottom: 10px;
position: relative;
}
.dotline::after {
--DOTSIZE: 6px;
content: "";
background-color: transparent;
background-image: radial-gradient(#ea56d4 30%, transparent 30%);
background-size: var(--DOTSIZE) var(--DOTSIZE);
background-repeat: repeat-x;
width: 100%;
height: var(--DOTSIZE);
position: absolute;
bottom: 0;
left: 0;
}
解説:
radial-gradientを使用して、より丸みを帯びたドットを作成。--DOTSIZEでドットのサイズと間隔を調整。
まとめ
HTMLとCSSを組み合わせることで、間隔を自由に調整できる点線や破線を作成する方法を紹介しました。::after疑似要素やCSS変数、グラデーションを活用することで、デザインに合わせた柔軟な線のスタイルを実現できます。以下のポイントを参考に、ウェブデザインの幅を広げてみてください。
- 疑似要素の活用: HTML構造をシンプルに保ちながら、デザイン要素を追加。
- CSS変数の利用: スタイルの一貫性と再利用性を向上。
- グラデーションの活用: 線のパターンや間隔を自在に調整。
- レスポンシブ対応: 異なるデバイスでも美しく表示されるスタイルを設定。
これらのテクニックを取り入れることで、より洗練されたウェブデザインを実現できます。
はじめまして。
dashlineコードのどの部分をさわれば、間隔は変わるのでしょうか？
はじめまして、コメントありがとうございます！
dashlineですと以下の部分を変更すれば間隔や大きさをかえることができます＾＾
–WIDTH: 5px;
–HEIGHT: 2px;
–SIZE: 2px;
一度お試しいただけると幸いです。
よろしくお願いします！
遅くなりました返信ありがとうございます汗
ありがとうございます^^