CSSだけで両矢印と上に重ねるテキストを描いてみる
幅とか期間の指定に両矢印「↔」ってよく使うじゃないですか。
画像で用意しても良いんですけど、CSSでやってみようかなーと思って作ってみました。
まずは簡単に両矢印のみ
表示例
幅は200pxで、左向きの矢印と右向きの矢印が付いています。
HTMLとCSS
<div class="arrow"></div>
<style>
div.arrow {
position:relative;
width:200px;
height:1px;
background-color:red;
margin-top:9px;
}
div.arrow:before {
content:'';
position:absolute;
display:inline-block;
top:-7px;
left:-8px;
border:8px solid transparent;
border-right:8px solid red;
}
div.arrow:after {
content:'';
position:absolute;
display:inline-block;
top:-7px;
right:-8px;
border:8px solid transparent;
border-left:8px solid red;
}
</style>解説
三角形を描画する部分は以前「CSSでLINE風のふきだしを出来るだけシンプルに作ってみる」などで説明したborderとtransparentを組み合わせたいつものヤツです。
そして疑似要素:beforeで左向き三角形、:afterで右向き三角形を描画しているだけですね。
真ん中の線をどうしようかと思ったのですが、div要素の高さを1pxにして、上に9pxのマージンを付けるというちょっと強引な手法にしました。あんまり数値固定にしないほうが良いかなーとも思ったんですが、そもそも三角形のサイズ指定にpx指定してるから、まぁいいかなと。
両矢印＋テキストを重ねる
両矢印だけでもいろいろ使いみちはありますが、どうせなら矢印線の上に重なるように説明文などを載せると、よりそれっぽくなりそうなので試してみました。
表示例
HTMLとCSS
<div class="arrow"><div>幅は200px</div></div>
<style>
div.arrow {
width:200px;
height:1px;
background-color:red;
position:relative;
margin-top:9px;
}
div.arrow:before {
content:'';
display:inline-block;
position:absolute;
top:-7px;
left:-8px;
border:8px solid transparent;
border-right:8px solid red;
}
div.arrow:after {
content:'';
display:inline-block;
position:absolute;
top:-7px;
right:-8px;
border:8px solid transparent;
border-left:8px solid red;
}
div.arrow div {
position:absolute;
left:0;
right:0;
top:-8px;
margin:auto;
width:6em;
text-align:center;
background-color:white;
}
</style>解説
HTML部分は先述の例にDIVタグを加えただけですね。
CSSの部分は両矢印やその線の部分には一切変更を加えていません。変更点はあらたに追加した div.arrow div { ～ } の部分だけです。
これも色々解決方法はあると思いますが、線の上にかぶさるように文字を書いて見たかったので、position:absolute;とtop:-8px;を指定して位置を調整しています。
また、中央寄せにしたかったため、leftとrightに0を指定して、marginはauto。これだけで中央寄せになります。
…あぁ、要素の横幅(width:6emの部分)は指定してあげる必要があります。
このへんもちょっとイケてない部分ですねー。説明文の文字数変えるたびにwidthの指定をするとか、数が増えると面倒くさそう。
まとめ
Web上で両矢印を描く要件が出てきたので、矢印画像を作っていたのですが、レスポンシブデザインで作っているページだとスマホとPCで矢印の長さを変える必要があり、画像を引き伸ばして使うと見た目が荒くなって微妙だったんですね。
SVG画像にすれば良い話ですが、両矢印だけならCSSでも出来そうだなーと思って作ってみた次第です。
ただ、作ったは良いものの、解説欄にあるとおり、数値固定の部分が多いので、うーん、どうなんだろう。SVGでも良かったかも知れないなぁー。
グラフィカルなアイコンや矢印をWeb上に配置する際、CSSにするのか、画像にするのか、SVGにするのか、そのSVGはCSSに埋め込むのか等々、HTML5でやれることが増えた分、頭を悩ますことも増えましたね。
もちろん出来ないよりは出来るほうがずっと良いので嬉しい悲鳴ではあるのですけどもｗ
