cssで見出しにアイコン画像を表示させる方法いろいろ

見出しのアクセントとしてよく使われるアイコン画像。

imgタグで表示させるよりもcssで書いたほうがメンテナンス性にも優れます。

センター寄せをする方法も含め、まとめておきます。

１．backgroundで表示する方法

cssでアイコン画像を表示させる一番スタンダードな方法です。

backgroundのプロパティ内容は場合によって変更して使いわけます。

html

<h1 class="title">タイトルです</h1>

テキストが１行の場合

CSS

title {

    padding-left: 30px;
    line-height: 30px;
    background: url(../images/icon.png) no-repeat;
}

line-heightでアイコン画像とテキストの上下位置を中央にするテクニックです。
line-heightはアイコンの高さ分を指定し、
paddingはアイコン画像の幅ぐらいの大きさを指定します。
テキストが１行だけ、と決まっている場合はこの方法をよく使います。

こんな感じに表示されます（※イメージです）

テキストが複数行入る場合

CSS

title {
    padding-left: 30px;
    background: url(../images/icon.png) no-repeat left center;
}

backgroundのポジションを「left center」左寄せ、上下位置中央と指定します。

アイコンの上下位置が思ったところに来ない場合がありますが、それほど気にしない場面で使います。
テキストが２行、３行と複数行になってもアイコン画像の上下位置が中央にきてくれます。

以下のようなリスト型のサイドナビゲーションに使うことが多いです。

アイコンの位置が左上に来てほしい時は、「left top」と記述します。

CSS

title {
    padding-left: 30px;
    background: url(../images/icon.png) no-repeat left top;
}

するとアイコン画像が左上に寄ります。

２．backgroundで表示する方法２

iタグを使ってアイコン画像を表示する方法。
htmlの記述が増えるし、空タグを使うのであんまり好きではありませんが、最近はFont Awesomeの普及もあり空タグでの表示方法も良く使用します。

・楽して便利！Webアイコンフォント『Font Awesome』の使い方と活用 Tips - HAM MEDIA MEMO

htmlはなるべく文章構造だけ記述するのが理想ですが便利さにはかないません…。

html

<h1 class="title"><i class="icon"></i>タイトルです</h1>

 CSS

.icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(../images/icon.png) no-repeat;
}

iタグはinline要素なので、そのままではbackground-imageが表示されません。
なのでdisplay: inline-block;を指定します。これで横並びしつつ、画像が表示出来ます。

このアイコン画像の表示方法の利点はアイコンとテキストを一緒にセンター寄せ出来るところです。

 CSS

.title {
    text-align: center;
}

としておくと、以下のようなセンター表示が可能。 

これは１のbackgroundで表示する方法ではできないのです。１の方法でtext-align: center;を書くとこんな風になってしまいます。

これでは少し残念ですね。 

ちなみにiタグはHTML5では「声や心の中で思ったことなど、他と区別したいテキストを表す」とされており、アイコンを表示するためのタグでは無いですがあしからず。

・<i>－HTML5タグリファレンス

あと、斜体にするためのタグでもありません。斜体にする場合はcssのfont-style: italic;で指定しましょう。

スポンサードリンク

３．擬似要素before afterで表示する方法

画像を表示させる方法の中ではcssの上級テクニックになります。

擬似要素のbefore、afterってややこしそうな気がしますが、
指定したタグの前（before）か後ろ（after）にhtml上で書いてないものを生成できる便利なcssです。
content:;内に書かれたものが表示されます。
この利点はiタグを使わずともアイコンを表示できるのでhtmlの記述をシンプルにできます。

html

<h1 class="title">タイトルです</h1>

.title:before {
    content: url(../images/icon.png);
}

こちらもiタグを使う時と同様、テキスト、アイコンをセンター寄せできます。
1カラムのサイトが増えてから見出しのセンタリングをよく見かけるようになりました。ですが、なんでもかんでもセンタリングすると文章やコンテンツが読みにくくなってしまう事があるので使い所には要注意です。

本当によくわかるHTML&CSSの教科書 シンプルで、デザインの良いサイトが必ず作れる