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

 

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

 

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

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

 

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

CSS

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

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

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


こういったサイドナビに使うことが多いです。

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

 


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

CSS

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

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

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

 

 

 

2.backgroundで表示する方法2

iタグを使ってアイコン画像を表示する方法。たまに見かけます。
html側の記述が増えるし、空タグを使うのであんまり好きではありませんが。
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-reprat;
}

 

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カラムのサイトが増えてから見出しのセンタリングって結構見かけるようになりました。ですが、なんでもかんでもセンタリングするとダサくなってしまうので要注意。

 

 

[ビルトニューヨーク] BUILT カーゴスリーブ M BK 6590

[ビルトニューヨーク] BUILT カーゴスリーブ M BK 6590

 

 

emuramemo(c) All Rights Reserved.