CSSを使って簡易にアイコンやアニメーションを作成できると、データ容量を極限まで抑えることが可能になります。
今回は、比較的画像アイコンを使いがちな矢印アイコンを作成してみました。
画像を使わない場合「→」のようにフォントを使いがちですが、これは２バイトフォントであり、グローバルなサイトでは、文字化けを引き起こしてしまいます。
スマートなサイト構築を考えると、CSSまたは、SVGでの表示が望ましいでしょうね。
サンプル表示
ソースコード
<DOCTYPE html>
<html>
<head>
<style>
.arrow{
position:relative;
width:15px;
height:15px;
background-color:black;
margin:30px;
}
.arrow-up:after{
content:"";
display: block;
position:absolute;
background-color:transparent;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid black;
top:-100%;
left:-50%;
}
.arrow-right:after{
content:"";
display: block;
position:absolute;
background-color:transparent;
width: 0;
height: 0;
border-left: 15px solid black;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
top:-50%;
left:100%;
}
.arrow-down:after{
content:"";
display: block;
position:absolute;
background-color:transparent;
width: 0;
height: 0;
border-top: 15px solid black;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
top:100%;
left:-50%;
}
.arrow-left:after{
content:"";
display: block;
position:absolute;
background-color:transparent;
width: 0;
height: 0;
border-right: 15px solid black;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
top:-50%;
left:-100%;
}
</style>
</head>
<body>
<h1>CSS - Arrow</h1>
<div class="arrow arrow-up"></div>
<div class="arrow arrow-right"></div>
<div class="arrow arrow-down"></div>
<div class="arrow arrow-left"></div>
</body>
</html>
解説
「arrow」classは、では、矢印の付け根部分を正方形で表示しています。
付随するclassで「up,down,left,right」として、after擬似要素として、三角形を作り出しています。
色を単色にする事で１つのアイコン表示にしているので、色変更をする場合は、同時に行なってください。
また、矢印の配置は、基本要素のrelative、after要素のabsoluteで指定してあり、それぞれ、100%,-50%などで、いい具合に調整しています。
三角形の表示ポイントは、向きの反対側のborderに色を設置し、その両側をtransparentにする事で、表現できます。
なれると、自分で三角を作って、矢印アイコンになるように設置できるようになると思います。
少し工夫すれば、斜めアイコンなども可能になるでしょうね。簡易に行う場合は、一つだけ矢印を作って、"transform:rotate(**deg);"で、回転させるという手もありますね。
お好きなやり方でどうぞ。
