カギカッコをCSSで表現するには?

2020年2月4日

カギカッコは、文字列ではなくCSSで作られることがあります。

今回はカギカッコをCSSで作る方法のメモです。

例えばこのサイトのなかに、こんな部分があります。

このカギカッコはCSSで作られています。ドラッグ&ドロップでコピーしようとしてみれば、できないことがわかるかと思います。

このCSSを分かりやすくしてみましょう。

中心の文字はh2タグに囲まれています。このh2のbeforeとafterに透明な四角形が作られています。

四角形の特定の辺だけをborder属性で可視化しているわけです。

つまり、CSSコードは下記のようになっています。

※ beforeとafterとは?

CSSにはbeforeとafterがあります。

これはCSSの擬似要素で、ある属性の前後にデザインを追加したいときに使います。

HTMLコードを使わずにデザインができるというメリットがあります。

よくデザインのためだけに空のタグを追加するときとかありますよね?

これを上手く使えば、そんな邪魔なHTMLを減らすことができます。