webデザイン見出しのアクセントとしてよく使われるアイコン画像。imgタグで表示させるよりもcssで書いたほうがメンテナンス性にも優れます。センター寄せをする方法も含め、まとめておきます。1.backgroundで表示する方法cssでアイコン画像を表示させる一番スタンダードな方法です。backgroundのプロパティ内容は場合によって変更して使いわけます。no-repeat;}line-heightでアイコン画像とテキストの上下位置を中央にするテクニックです。line-heightはアイコンの高さ分を指定し、paddingはアイコン画像の幅ぐらいの大きさを指定します。テキストが1行だけ、と決まっている場合はこの方法をよく使います。center」左寄せ、上下位置中央と指定します。アイコンの上下位置が思ったところに来ない場合がありますが、それほど気にしない場面で使います。テキストが2行、3行と複数行になってもアイコン画像の上下位置が中央にきてくれます。以下のようなリスト型のサイドナビゲーションに使うことが多いです。top」と記述します。top;}するとアイコン画像が左上に寄ります。2.backgroundで表示する方法2iタグを使ってアイコン画像を表示する方法。Awesomeの普及もあり空タグでの表示方法も良く使用します。MEMOhtmlはなるべく文章構造だけ記述するのが理想ですが便利さにはかないません...。no-repeat;}iタグはinline要素なので、そのままではbackground-imageが表示されません。inline-block;を指定します。これで横並びしつつ、画像が表示出来ます。このアイコン画像の表示方法の利点はアイコンとテキストを一緒にセンター寄せ出来るところです。center;}としておくと、以下のようなセンター表示が可能。これは1のbackgroundで表示する方法ではできないのです。center;を書くとこんな風になってしまいます。これでは少し残念ですね。ちなみにiタグはHTML5では「声や心の中で思ったことなど、他と区別したいテキストを表す」とされており、アイコンを表示するためのタグでは無いですがあしからず。・<i>-HTML5タグリファレンスあと、斜体にするためのタグでもありません。italic;で指定しましょう。画像を表示させる方法の中ではcssの上級テクニックになります。指定したタグの前(before)か後ろ(after)にhtml上で書いてないものを生成できる便利なcssです。content:;内に書かれたものが表示されます。この利点はiタグを使わずともアイコンを表示できるのでhtmlの記述をシンプルにできます。url(../images/icon.png);}こちらもiタグを使う時と同様、テキスト、アイコンをセンター寄せできます。1カラムのサイトが増えてから見出しのセンタリングをよく見かけるようになりました。なんでもかんでもセンタリングすると文章やコンテンツが読みにくくなってしまう事があるので使い所には要注意です。14:54cssで見出しにアイコン画像を表示させる方法いろいろTweetあなたにおすすめの記事プロフィールid:emj1025Webデザイナー。デザイン・ギター・宅録を少々。このブログでは気になった製品、HTML/CSS、Webデザイン、音楽などを記事にしています。Reserved.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。