emuramemo

製品レビュー、HTML/CSS、webデザイン、音楽、その他いろいろ

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

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

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

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

 

 

1.backgroundで表示する方法

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

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


html

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

 

テキストが1行の場合

CSS

title {

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

 

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

 

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

CSSでアイコンを表示 テキストが1行の場合

 

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

CSS

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

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

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


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

CSSでアイコンを表示 テキストが複数行の場合

 


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

CSS

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

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

CSSでアイコンを表示 テキストが複数行の場合 表示位置を指定

 

 

 

2.backgroundで表示する方法2

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;
}

 

 

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

CSSでアイコンを表示 iタグを使う場合

 

 

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

CSSでアイコンをセンター表示できない場合

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


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

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

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

 

 

スポンサードリンク

3.擬似要素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の教科書 シンプルで、デザインの良いサイトが必ず作れる

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

 

 

emuramemo(c) All Rights Reserved.