CSSで見出しのアイコンや表記をデザインしよう

CSSで見出しタグをデザインできれば、それだけ洗練されたWEBページへと近づきます。

そのためにはbefore・afterの疑似属性を使いこなせるようになる必要があります。

要素をclip-pathでアイコンに切り取ったり、Font Awesomeアイコンを使ったり、data-textをattr関数で呼び出したり、自由な長さの枠線を2本つける事もできます。

WEBデザインで重要な見出しタグの装飾

WEBサイトを制作する中で一番デザインが必要なのが、いわゆる「見出し」部分ですよね。

極端なお話、見出しがきちんとデザインされていればページ全体の見栄えも良くなります。

本当は見出しの下に入ってくる各文章テキストも、段落や文字間隔などの調整で洗練されるのですが、まずは見出しタグからです。

本記事では、見出しタグをCSSでデザインする基本を紹介していきます。

装飾前と装飾後の比較

まずは見出しタグを入れましょう。今回はh3タグにしていますがどのタグでも構いません。

HTMLソース

<div class="midashi"> <h3>見出しテキスト</h3> </div>

CSS装飾前

上記は普通のh3タグですね。フォントの色やサイズ調整がされているくらいです。

CSS装飾後（完成イメージ）

上の様な三角の矢印アイコンをテキストの前に付けます。

土台のデザイン

ある程度携わってきた人であれば、色や余白・枠線をつけるのは難しくは無いと思います。

ポイントは見出しの前につけるアイコン部分の、表示の仕方ですよね。

padding・background・font-size・colorの設定

まずは、アイコン部分以外のデザインを整えておきましょう。

padding・background・font-size・colorなどを入れて、見出しの土台を作ります。

CSS（ベース部分）

.midashi h3{ padding: 15px; font-size: 16px; color: #fff; background: #087bca; }

サンプル

まあ普通の何気ないデザインでしょうか。

あくまで一例ですので、自分の環境や好みにあわせて作って頂いてOKです。

このh3タグに対するデザインをベースに、アイコンなどをつけていきます。

疑似属性の準備

では次にh3の疑似要素を設定します。

疑似要素とは基本セレクタに「before」「after」などをつけて追加される要素です。

before疑似要素の追加

まずはベースとなるh3タグに対し、position: relative;を入れておきましょう。

h3タグに追加された「before属性」で、矢印アイコンを自在に表現するためです。

CSS（positionの設定）

.midashi h3{ padding: 15px; font-size: 16px; color: #fff; background: #087bca; position: relative; } .midashi h3::before{ position: absolute; }

上記の様に、h3::before疑似要素を追加します。

position: absolute;とする事で、h3要素上の好きな位置に表示させることができる訳です。

もちろんその位置を表現するのは、top: 0; left: 0;などの絶対配置です。

四角アイコンの設置

ではbefore属性で、見出しの前に「四角形」をつけてみます。

これが矢印アイコンの土台となります。

四角形のアイコンを作る

四角形は「テキスト■」ではなく、beforeの幅と高さと背景色で構成します。

コンテンツとしては何も入らないので、content: '';で空白の状態にしましょう。

CSS（before部分のみ）

.midashi h3::before{ position: absolute; content: ''; background: #fff; width: 15px; height: 15px; top: 20px; left: 5px; }

サンプル

これにより幅が15px、高さが15px、背景が#999のグレーの四角形が出来上がります。

場所はh3要素の左上端から20px下、5px右へ移動した位置です。

実際に見出しテキストと同じ高さ付近に来るように、調節しましょう。

アイコンと重ならない様にする

この四角形は今のままだと、見出しテキストと被っているのではないでしょうか。

ですので見出しテキストをtext-indent:で少しずらずか、padding-left:でずらす必要があります。

CSS（h3部分のみ）

.midashi h3{ padding: 15px 15px 15px 30px; font-size: 16px; color: #fff; background: #087bca; border-top: solid 3px #ccc; position: relative; }

上記では左のpaddingを30pxにしているので、30pxテキストが右に移動します。

サンプル

実際にはちょうど良い位置までテキストがずれる様に、適宜調整して下さいね。

四角形を三角の矢印にするには

ではいよいよ四角形アイコンを、三角形の矢印アイコンにしていきます。

これでぐっとデザイン性が上がりますよね。

clip-pathの利用

四角形を三角形にするために、ここではclip-pathを利用します。

clip-pathで各値を指定すると、対象となる要素がその造形に切り取られます。

つまり右を向いた三角形の矢印になる様に数値を入れれば、ベースとなる四角形が数値通りに切り取られる訳です。

CSS（before部分のみ）

.midashi h3::before{ position: absolute; content: ''; background: #999; width: 12px; height: 12px; top: 10px; left: 5px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%); }

サンプル

矢印アイコンがついて完成です。

設定した数値について

ベースとなる四角形を右を向いた三角形に切り取るため、上記の様に3か所の縦横位置（x％ y％）を指定しています。

座標の考え方

xとyは、横軸・縦軸を表現しています。いわゆる「座標」ですね

三角形ですから3つの角があるので、「,」で区切って3つ指定する訳です。

この座標の始点は右にも下にも全く移動していない「0％ 0％」であり、四角形の「左上の隅」の位置になります。

3点の座標を指定する

1点目の位置（50% 0%）

丁度上の辺の真ん中当たりですね。

2点目の位置（100% 50%）

2点目はテキスト側を向く角部分になります。

最後の3点目（50% 100%）

これで3つの点が結ばれ、右向きの三角形（矢印アイコン）になりますよね。

この形状にclip-pathの効果で切り取られる訳です。

clip-pathで様々な形状に切り取る事ができるので、使いこなせるようになっておきましょう。

アイコンにFont Awesomeを使う

ここまで三角形のアイコンを表現する方法を紹介してきましたが、背景色部分に画像URLを指定すればアイコン画像を出すこともできます。

デザイン性が高まりますが、アイコン用画像を別途用意する必要がありますよね。

そこを省略するなら、Font Awesomeアイコンを使う手もあります。

Font Awesomeのアイコンフォントを活用

Font Awesomeのアイコンフォントはcontent:の中にunicodeを入れる事で表現できます。

CSS（Font Awesome）

.midashi h3::before{ position: absolute; content: ''; //unicodeが入る top: 10px; left: 5px; font-family: "Font Awesome 5 Free"; font-weight: 900; }

サンプル

content:'';部分にunicodeが入る事で表示がされていますね。

Font Awesomeを使うには、各種ファイルをダウンロードして読み込んでおくか、Font Awesome6のKIT登録をしておく必要があります。

Font Awesome 6の詳細は、以下記事をご覧ください。

data-textで別のテキストを表示

よく見出しタグのテキストの下や右部分に、英語表記が表示される事がありますね。

日本語と同時に英語表記も出れば、それなりのデザインになる事でしょう。

これも疑似属性で簡単に実現できます。

data-textを利用する

content:の中にテキストを入れても良いのですが、極力HTMLソース上に記載しておいた方が何かと便利です。

ですので今回は、data-text要素を直接HTMLソースに入れます。

HTMLソース

data-text内に英語表記を入れておきましょう。

<div class="midashi"> <h3 data-text="concept">見出しテキスト</h3> </div>

見出しタグにdata-text属性をつけ、今回は「concept」という英語表記を入れました。

この表記の位置やデザインを、CSSでコントロールしていきます。

attr関数の利用

contentの対象としてHTMLソース上のテキストを指定するため、attr関数を利用します。

CSS（attr関数）

h3.mh3{ padding: 15px 15px 15px 100px; font-size: 16px; color: #fff; background: #087bca; position: relative; } .midashi h3::before{ position: absolute; top: 0; left: 0; padding: 15px; display: block; color: #ffde00; content: attr(data-text); }

サンプル

CSSの解説

今回はh3タグのテキストの前に英語表記「concept」が入る様にします。

そのスペースを空けるため、左paddingを100pxにしています。

高さはテキストと同じ高さで始まる様に、top: left:、padding:などで調整しましょう。

その上でcontent: attr(data-text);として、data-textのテキストを表示させています。

color:で色を付けるなど、data-text内テキストのデザインも変更できます。

英語表記を右に移動させた状態

下の様に英語表記を右に並べてもおしゃれですよね。

サンプル

上記はbefore要素の絶対配置をright: 0;にしただけです。

CSS

.midashi h3::before{ … top: 0; right: 0; … }

枠線のデザイン

通常見出しによく使われる枠線（border）は、横幅一杯の線となる事がほとんどでしょう。

この枠線を途中から2色に分けたりすると、ぐっとカッコ良くなります。

これも疑似要素によって簡単に実現できます。

CSS（before・after併用）

.midashi h3{ padding: 15px 15px 15px 30px; font-size: 16px; color: #fff; background: #087bca; position: relative; border-top: solid 3px #ccc; } .midashi h3::before{ position: absolute; content: ''; background: #fff; width: 15px; height: 15px; top: 20px; left: 5px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%); } .midashi h3::after{ position: absolute; top: -3px; left: 0; width: 100px; height: 3px; background: #ff6600; content: ""; }

上記は先程紹介した三角形矢印も表現するため、beforeで矢印、afterで枠線を構成しています。

サンプル

after属性で横幅100px、縦3pxのオレンジ枠線を作ります。

これを絶対配置でtop: -3pxにする事で、本来ある#cccの枠線（太さ3px）の上に丁度重なります。

実際には2つの線が重なっている訳ですね。

今回は2つの枠線を重ねていますが、本来の枠線を消せば「一定幅の枠線」としても使えますね。

一押し人気コーナー紹介