CSS
CSSで点線の間隔を調整
2025年01月28日 23:00
こんにちは、社員Kです。 さて今年１回目は、点線の間隔を調整について書いていこうと思います。 CSSで点線の間隔を調整するには、border-style: dashed;やborder-style: dotted;と一緒に、**border-imageやSVG**を使用する方法があります。CSSだけで直接点線や破線の「間隔」を詳細に制御することはできませんが、以下の方法で実現可能です。
方法1: border-imageを使う
border-imageを使用すると、画像やグラデーションを点線風に適用し、間隔をカスタマイズできます。 border-imageは、グラデーションやパターンを枠線として適用することで、自由なデザインが可能です。 基本構造
border: 5px solid transparent; /* ボーダーの太さを指定 */
border-image: repeating-linear-gradient(
<角度>, /* 線の方向 */
<色1> <位置1>, /* 線の色と開始位置 */
<色2> <位置2>, /* 線の色と終了位置 */
<透明部分の開始位置>, /* 空白部分の開始位置 */
<透明部分の終了位置> /* 空白部分の終了位置 */
);
border-image-slice: 1; /* ボーダーの全体的なスライス値 */
}
サンプルコード
ポイント: •black 10px は点の長さ。 •transparent 10px は間隔の長さを指定します。
border: 5px solid transparent; /* ボーダーの太さ */
border-image: repeating-linear-gradient(
90deg, /* 水平方向に指定 */
black 0, /* 黒い線の開始位置 */
black 10px, /* 黒い線の長さ */
transparent 10px, /* 空白部分の開始 */
transparent 20px /* 空白部分の終了（合計で線+空白が20px） */
);
border-image-slice: 1; /* 全体をそのまま適用 */
}
サンプル 
垂直方向の点線の間隔を調整 線を垂直方向に適用する場合は、角度を90degから0degや180degに変更します。
border: 5px solid transparent;
border-image: repeating-linear-gradient(
180deg, /* 垂直方向に指定 */
black 0,
black 10px,
transparent 10px,
transparent 20px
);
border-image-slice: 1;
}
サンプル
点線の太さと間隔を動的に変える例 線を垂直方向に適用する場合は、角度を90degから0degや180degに変更します。
点線の太さと間隔を動的に変える例 border-widthを変更することで、ボーダー全体の太さを調整できます。
border: 8px solid transparent; /* 太めの線 */
border-image: repeating-linear-gradient(
90deg,
black 0,
black 5px, /* 点の太さ */
transparent 5px,
transparent 15px /* 線と空白を足して15px */
);
border-image-slice: 1;
}
サンプル
方法2: backgroundプロパティを使う
下線を付けたい要素の擬似要素に丸の下線を入れるコード例です。
background: radial-gradient(circle farthest-side, rgba(255, 105, 0, 1), rgba(255, 105, 0, 1) 50%, transparent 50%, transparent);
background-size: 11px;
content: ”;
display: inline-block;
height: 11px;
width: 100%;
}
サンプル
backgroundプロパティとradial-gradient関数を使うことで、丸いドット下線を作成できます。
radial-gradient関数にcircleを指定すると、一定の半径を持つ円を描画可能です。
さらに、farthest-sideを設定することで、グラデーションの終了位置を要素の最も遠い辺に合わせることができます。
円の色はカラーコードで指定し、大きさはパーセントで調整します。
また、background-sizeプロパティを活用すると、円の間隔やサイズを自由にカスタマイズでき、理想的な丸ドット下線を完成させることができます。
方法3: 点線・破線CSSジェネレーターを使う
以下のサイトのジェネレーターはbackgroundプロパティを活用して破線・点線をつくることで、各点のサイズや間隔を自由に調整することが可能です。
出力されるCSSコードをコピペで簡単に使えます。https://webspe.net/tools/border/
まとめ
点線の間隔を調整するために、CSSでは主にborder、background、linear-gradient、そして擬似要素を活用した方法があります。borderを使う基本的な方法では間隔調整が難しいため、linear-gradientやradial-gradientを使った方法が効果的です。どちらの方法も、点線の間隔やサイズを細かく調整することができるため、デザインに応じて柔軟に利用できます。
これらのテクニックを組み合わせることで、さまざまなデザインに対応した点線を作成できます。
関連記事
この記事を書いた人
staff
