Topスタイルシートの基本イメージ > タイトルの横にマーク画像をつける

タイトルの横にマーク画像をつける

見出し部分の横にマークをつけて、他の部分との差別化を測りたい…。
そんな時に「border」で、■を横につけるのもいいんですが…できれば画像が使いたい…というときもありますよね。
少なくとも円は「border」では表示不可能ですし。


<h2 class="mark"><img src="画像のアドレス.jpg" alt="画像の内容" width="横サイズ" height="縦サイズ"></h2>


h2 img{
vertical-align:middle;
}
.mark{
margin-left:0.3em;
}

vertical-alignでマークとテキスト画像を縦に中央揃えしています。
margin-leftでマークとテキストの間隔を指定しています。

「タイトルの横にマーク画像をつける」関連本

Akasa Rira
みつけたきせき