dashedで点線（破線）が潰れてしまうときはCSSのlinear-gradient関数を使うときっと幸せ

CSSで点線を描きたいとき、普通なら以下のように書きます。

border: 1px dashed #000;

しかしこれだと、border-collapse: collapse;を指定したテーブルなどで、点線が重なって実線のように見えてしまうことがあります。

Google Chromeでは必ずといっていいほど点線が潰れてしまうので地味に困っていたのですが、linear-gradient関数を使って点線を描く方法を知ってから安心してデザインでも点線を使えるようになりました。

しかも点線の間隔も好きなように調整できるので、border-style:dashedの雑な感じが嫌だという人にもおすすめです。

CSSのlinear-gradient関数を使って点線を描く方法

要素の上端に点線を描きたい場合には、以下のように書きます。

div {
	background-image: linear-gradient(to right, #000, #000 2px, transparent 2px, transparent 6px);
	background-size: 6px 1px;
	background-repeat: repeat-x;
	background-position: left top;
}

要素の下端に点線を描きたい場合には、以下のように書きます。

div {
	background-image: linear-gradient(to right, #000, #000 2px, transparent 2px, transparent 6px);
	background-size: 6px 1px;
	background-repeat: repeat-x;
	background-position: left bottom;
}

linear-gradient関数はその名の通り直線的なグラデーションを作るための関数です。

そのためグラデーションの方向（角度）や色数などによって指定方法がいろいろあるのですが、ここでは点線の描画に必要な指定ということで以下のように補足しておきます。

linear-gradient(線の方向, 線の始点の色, 線の終点の色 線の終点の位置, transparent 間隔の始点の位置, transparent 間隔の終点の位置);

ポイントは、以下の2点です。

「線の終点の位置」と「間隔の始点の位置」を同じにしておく（ここがズレると点がボヤける）
「間隔の終点の位置」とbackground-sizeの幅を同じにしておく（ここがズレると点線が潰れる）

上記の例では、2pxの線と4px（6px-2px）の間隔で点線を描画しています。

それをbackground-sizeでピッタリのサイズにして、X方向にリピートしているというようなイメージです。

線幅を大きくしたければ、background-sizeで指定します。

この例ではX方向に伸びる1pxの線を描きたいので、background-sizeの高さを「1px」としています。

linear-gradient関数を使って枠線を描く方法

次に、linear-gradient関数を使って要素の4辺を囲む枠線を描く方法をご紹介します。

div {
	background-image: linear-gradient(to right, #000, #000 2px, transparent 2px, transparent 6px),/* 上辺 */
	                  linear-gradient(to bottom, #000, #000 2px, transparent 2px, transparent 6px),/* 右辺 */
	                  linear-gradient(to left, #000, #000 2px, transparent 2px, transparent 6px),/* 下辺 */
	                  linear-gradient(to top, #000, #000 2px, transparent 2px, transparent 6px);/* 左辺 */
	background-size: 6px 1px,/* 上辺 */
	                 1px 6px,/* 右辺 */
	                 6px 1px,/* 下辺 */
	                 1px 6px;/* 左辺 */
	background-repeat: repeat-x,/* 上辺 */
	                   repeat-y,/* 右辺 */
	                   repeat-x,/* 下辺 */
	                   repeat-y;/* 左辺 */
	background-position: left top,/* 上辺 */
	                     right top,/* 右辺 */
	                     right bottom,/* 下辺 */
	                     left bottom;/* 左辺 */
}

一見ややこしく見えますが、それぞれのプロパティで上辺・右辺・下辺・左辺の4つの値を指定しているだけです。

各辺をどの順番で指定しても大丈夫ですが、どのプロパティでもその順番で記述するように注意してください。

ちなみに右辺と下辺だけ点線を描くという場合は、こんな感じになります。

div {
	background-image: linear-gradient(to bottom, #000, #000 2px, transparent 2px, transparent 6px),/* 右辺 */
	                  linear-gradient(to left, #000, #000 2px, transparent 2px, transparent 6px);/* 下辺 */
	background-size: 1px 6px,/* 右辺 */
	                 6px 1px;/* 下辺 */
	background-repeat: repeat-y,/* 右辺 */
	                   repeat-x;/* 下辺 */
	background-position: right top,/* 右辺 */
	                     right bottom;/* 下辺 */
}

まとめ

以上、CSSのlinear-gradient関数を使って点線を描く方法でした。

linear-gradient関数は使い方を把握するまではややこしいかもしれませんが、使えると細かな調整ができるのでとても便利です。

サイトの仕上がりにも影響してくるので、是非使ってみていただければと思います。