CSS 小ネタ集 Vol.1

ホームページのコーディングを行っていると、CSSで表現すべきか画像にすべきかどうか迷うことがあります。その時は迷わずCSSで表現する様にしています。

今回は、小さいパーツでCSSできる表現でよく使うものを紹介します。リンクや見出しでよく使う２つのパーツと背景パターンになります。

CSSなので、HTMLを触ることもなく追加できますので、ぜひご利用ください。（HTML構造によっては、HTMLも修正する必要があります。

１.矢印

四角を描くボーターを利用したものになります。

/*上矢印 */
.brackets-top:before {
	width: 0.5em;
	height: 0.5em;
	border-top: 1px solid #D3381C;
	border-right: 1px solid #D3381C;
	transform: rotate(-45deg);
}

/*右矢印 */
.brackets-right:before {
	width: 0.5em;
	height: 0.5em;
	border-top: 1px solid #165E83;
	border-right: 1px solid #165E83;
	transform: rotate(45deg);
}

/*下矢印 */
.brackets-bottom:before {
	width: 0.5em;
	height: 0.5em;
	border-bottom: 1px solid #B8D200;
	border-left: 1px solid #B8D200;
	transform: rotate(-45deg);
}

/*左矢印 */
.brackets-left:before {
	width: 0.5em;
	height: 0.5em;
	border-bottom: 1px solid #F8B500;
	border-left: 1px solid #F8B500;
	transform: rotate(45deg);
}

サンプル

上下矢印はそのままでは位置がずれるので調整が必要です。

2.三角

こちらもボーダーを利用したものになります。ボーダーの太さで三角形を表現しています。

/*上三角 */
.triangle-top:before {
	width: 0;
	height: 0;
	border-left: 0.5em solid transparent;
	border-right: 0.5em solid transparent;
	border-bottom: 0.5em solid #D3381C;
}

/*右三角印 */
.triangle-right:before {
	width: 0;
	height: 0;
	border-left: 0.5em solid #165E83;
	border-top: 0.5em solid transparent;
	border-bottom: 0.5em solid transparent;
}

/*下三角 */
.triangle-bottom:before {
	width: 0;
	height: 0;
	border-left: 0.5em solid transparent;
	border-right: 0.5em solid transparent;
	border-top: 0.5em solid #B8D200;
}

/*左三角 */
.triangle-left:before {
	width: 0;
	height: 0;
	border-top: 0.5em solid transparent;
	border-right: 0.5em solid #F8B500;
	border-bottom: 0.5em solid transparent;
}

サンプル

こちらも上下の三角は位置がずれるので調整が必要です。

応用編

上記の矢印や三角を応用すると以下の様な矢印も可能です。

矢印や三角と横棒の位置調整は必要ですが

背景パターン

ボーダーやストライプ の単純な物はCSSで表現できます。

/*横線 */
.bg-border {
	background-color: #ffcfc5;
	background-image:
		linear-gradient(#ffbeb3 50%, transparent 50%, transparent);
	background-size: 12px 12px;
}

/*縦線 */
.bg-stipe {
	background-color: #b9e8ff;
	background-image:
		linear-gradient(-90deg, #8fd8fd 50%, transparent 50%, transparent);
	background-size: 14px 14px;
}

/*斜め線 */
.bg-oblique {
	background-color: #e1ff00;
	background-image:
		repeating-linear-gradient(-45deg,
			#f8ffc3, #f8ffc3 5.5px,
			transparent 0, transparent 11px);
}

サンプル

この様に画像を使うことなく表現が可能です。

最後に

CSSも使い方次第で、今まで画像で行っていた表現もCSS単体で表現できる様になっています。
ブラウザの互換もIEのサポートが切れて行っている現状を踏まえ現場で使えるものが増えてきました。また、autoprefixerの機能向上によりベンダープレフィックスを意識することもなく、CSSを吐き出すこともできるので一昔前のコーディングよりも効率が上がってきたと思います。

また、機会を見て２回、３回と小ネタを出していただいと思います。