いろんな線を引いてみよー

はいこんにちはー
web制作にかかわってる人でーす。

前回は記念すべき第10記事目ということで総集編をお送りいたしましたが、
今回はcssでちょっとしたものを描いてみようという、ある意味原点回帰みたいな事をお送りしようと思います。

私の一番最初の記事は前回もお話しした通り「CSSでちょっとした図形を描いてみるーわーい」だったわけですが、今回はいろんな線を引いてみましょう。

え、borderでええやん？
はい。普通の線であればborderで事足ります。
普段超使います。

ですが、

J○沿線の白黒点線（両脇に黒い罫線有）とかどうします？
border-style:dottedで大きさと感覚をコントロールしたくないですか？
（とはいえこの方法でもちょっと難しいんですが）
border-style:doubleの2本の線の太さを制御したくないですか？

直線限定、かつ1方向限定にはなりますがbefore、after(またか)とcssグラデーションを使えばある程度可能になります！
やったね！しかもcssだからSP時に荒れが生じる心配もないですよ！やったー

ってことで冒頭のサムネイルの中の線をcssで描いてみたいと思います
（ベンダープレフィックスを省いていますので実際はベンダープレフィックスが必要なことがあります）

タグは

<p class="line border">白黒しましま</p>
<p class="line dot">丸点線</p>
<p class="line grad">グーラデーショーン</p>
<p class="line stripe">縦じま</p>
<p class="line white">白抜き</p>

基本のcssはこれ（position:relativeを予めかけておくのがみそです（正直static以外であれば何でも良いんですが））

.line{
	width: 300px;
	margin: 20px auto 30px;
	padding: 20px;
	position: relative;
}

1.白黒しましま

○R沿線の表示等でよく使用されますね。
これのcssはこんな感じです

.line.border{
	border-left: solid 4px #000;
}
.line.border:before{
	background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 50%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%);
	background-size: 1px 10px;
	width: 2px;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: -3px;
	content: "";
}

左側に黒で4pxのボーダーを引いた上にグラデーションでしましまを描画したbefore要素を乗っけるということをして表現しています。
backgroundのグラデーションは画像扱いとなるので繰り返して敷き詰めることが可能なんですねー
50%の位置で綺麗に白と黒が分かれるグラデーションを描画、backgound-sizeで高さを指定してやり繰り返すということをしています。


2.丸点線

border-styleのdottedではどうも間隔などの調整は難しいので、グラデーションのcircleを使います。

.line.dot:before{
	background: radial-gradient(ellipse at center,  rgba(193,193,193,1) 0%,rgba(193,193,193,1) 25%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 100%) center 0 repeat-y;
	background-size: 8px 8px;
	width: 8px;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: -3px;
	content: "";
}

before要素に領域の50%のところに円を描くようにグラデーションを指定します。
そのグラデーションのサイズをbackground-sizeで変更し、縦（もしくは横）だけ繰り返すように指定すればほーらこの通り。

…ただ、実験的に作ってはみたものの調整に結構時間を食う感じなので時間があって凝りたい時限定の小技かもしれません。
あんまり実戦向きじゃないかな。


3.グーラデーショーン

ってことで休憩グラデーションです。

.line.grad:before{
	background: linear-gradient(to bottom,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%);
	width: 4px;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: -3px;
	content: "";
}

これはごく単純。
引きたい幅、高さ100%（左右の線の場合。
上下の場合は引きたい高さ、幅100%）のbefore(もしくはafter)要素にグラデーションを設定。
線を引きたい位置に配置する。
線に限定しなくても矩形や円でも対応可能です。

4.縦じま

色のチョイスちょっとしまった。見づらい
さっきのグラデーションと一つ目の白黒しましまの複合技です。

.line.stripe:before{
	background: linear-gradient(to right,  rgba(252,234,187,1) 0%,rgba(252,234,187,1) 50%,rgba(7,0,224,1) 50%,rgba(7,0,224,1) 100%);
	background-size: 50% auto;
	width: 4px;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: -3px;
	content: "";
}

縦のグラデーションで50%で綺麗に色が分かれるように指定。
background-sizeを任意のサイズに変更そして敷き詰めると。
例に使った色は薄い方がちょっと背景に埋もれてわかりづらかったですね。
目が痛いけど赤と緑とかならよくわかったかもです。


5.白抜き

グラデーション全く使わない。

.line.white{
	border-left: solid 4px #627d4d;
}
.line.white:before{
	background: #fff;
	width: 2px;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: -3px;
	content: "";
}

まず色で線を引きます。
そして残したいpx数を引いた横幅（もしくは縦幅）のbefore(かafter)要素に白抜き用の色をbackgroundで指定
上から乗っけます。

それだけ。


やはりもどきとはいえtips系は記事が長くなりますね。
年度末には厳しいです（こら）。

この技今後使う場所はそんなにあるのか…となりますがまぁ半分は自己満足ってことで。
あ、でも白黒しましまは割と役に立ちました。


ではでは今日はこのへんでweb制作にかかわってる人でしたー。