CSS点線作成

CSS Dot Line Generator

点線や丸ドットの装飾を簡単に作成できるジェネレーターです。上下左右のどの辺に線をつけるかをチェックボックスで選び、線の種類（点線／ドット）、太さやサイズ、色、間隔などを入力することで、リアルタイムにCSSコードを自動生成します。デザインの装飾枠をCSSだけで手軽に実現したいとき、このコードを使えばコーディングの手間を省き、見た目の調整もスムーズに行えます。

コラム・豆知識
ツールの仕組み解説

ラインをつける辺上右下左

線の種類点線丸ドット

太さ px 線の長さ px 間隔 px

線の色

コピー

コラム・豆知識

CSS点線背景の基本構造とメリット

点線をCSSで表現する場合、画像ファイルを使わずにbackground-imageとrepeating-linear-gradient()を組み合わせて作成する方法が一般的です。
この手法は軽量でレスポンシブ対応も容易なため、実務での利用に適しています。
繰り返しパターンを指定することで、任意の幅・間隔の点線を自由にデザイン可能です。

コードの詳細解説：背景画像と繰り返しの指定

例として、background-image: repeating-linear-gradient(to right,#000000 0 6px,transparent 6px 12px), repeating-linear-gradient(to bottom,#000000 0 6px,transparent 6px 12px)は、横方向と縦方向に6pxの黒い線が6pxの透明部分を挟んで繰り返される点線を作成します。
さらに、background-positionやbackground-sizeを駆使して、四辺に均等に点線を配置することが可能です。

応用例：四辺を囲む点線ボーダーの実装

指定した複数のrepeating-linear-gradient()を重ねることで、上下左右に点線のボーダーを作れます。
例えば、上辺と下辺に横方向の点線、左右に縦方向の点線を配置し、background-repeatやbackground-positionでそれぞれの位置を制御します。
これにより、画像を使わずに軽量で柔軟なデザインが実現します。

パフォーマンスと保守性のポイント

画像を使わない点線背景は、リサイズやカラー変更が容易でCSSだけで完結するため、メンテナンスが楽です。
また、ファイルサイズが増えないためページの読み込み速度にも寄与します。
ただし複雑なパターンを多用するとブラウザ描画負荷が増すことがあるため、適切に使い分けましょう。

アクセシビリティとデザインの注意点

点線の視認性を高めるためには、背景色とのコントラストを意識することが重要です。
細すぎる点線やコントラストが弱い色は視認性を落とし、ユーザー体験を損なう場合があります。
また、スクリーンリーダーには影響しませんが、視覚障害者向けの配慮として他の要素で十分な区切りや強調を行うことも推奨されます。

ツールの仕組み解説

const preview = document.getElementById('preview');
const output = document.getElementById('output');
...

プレビューエリアとCSS表示欄、そしてUI要素（ラベルなど）を取得して、ユーザー操作に対応する準備をします。

function toggleParamUI(style){
	if(style === 'dot'){
		lblSize.firstChild.textContent = '大きさ';
		lblSegment.classList.add('hidden');
	}else{
		lblSize.firstChild.textContent = '太さ';
		lblSegment.classList.remove('hidden');
	}
}

点線のときは「大きさ」を、破線のときは「太さ」「長さ」を調整可能にします。スタイルに応じてユーザーに必要な設定だけを見せる工夫です。

function update(){
	const style = ...
	// dash か dot const sides = ...
	// top/right/bottom/left ...
}

ユーザーが選んだスタイルやサイズ・間隔などを読み取って、どこに線を描くかを判断します。

const dashGrad = dir => `repeating-linear-gradient(...)`; const dotGrad = () => `radial-gradient(...)`;

dashGradは線状、dotGradは点状のCSSグラデーションを作る関数です。 CSSのbackground-imageで擬似的にボーダーを表現します。

function edge(x, y, horiz) {
	const grad = style === 'dash' ? dashGrad(...) : dotGrad();
	... img.push(grad);
	pos.push(`${x} ${y}`);
	rep.push(repeat);
	sz.push(...);
}

線を描く位置ごとに背景を1枚ずつ追加していきます。線の向き（横 or 縦）や始点を指定して、background-imageの多重指定を構築します。

if(sides.includes('top')) edge('left', 'top', true);
if(sides.includes('right')) edge('right', 'top', false);
...

チェックされた辺に対してだけ線を描きます。 4方向に応じて edge 関数を呼び、CSS背景を構築します。

const css = `background-image: ...`;
preview.style.backgroundImage = ...;
output.textContent = css;

構築したCSSを画面に出力し、プレビューにも即反映。「自分の設定でどんなCSSになるか」を見て学べる構成です。