ヘッダーに画像を使ったロゴを表示する

サイトの特徴を表すロゴ

ヘッダー部分（ページ上部）に配置しすることの多いロゴについて、次のようなロゴ画像だけを表示する場合のマークアップ＆CSSの書き方について解説していきます。

まずはHTMLから確認していきます。
ロゴはheader要素内の、h1要素でマークアップします。

HTMLのマークアップ例

<h1><a href="/">GRAY COFFEE STAND</a></h1>

続いて、h1要素と子孫要素であるa要素のCSSを記述します。

CSSのコード例

h1 {
	float: left;
	padding: 6px 0;
}
	h1 a {
		display: block;
		width: 64px;
		height: 69px;
		font-size: 0;
		background: url(./images/logo_coffee.svg) left top/64px auto no-repeat;
	}

h1要素には位置と余白の指定のみを行なっています。
肝心なのは子孫要素のa要素に記述したCSSの方です。

まずロゴの表示するサイズをwidthプロパティとheightプロパティで指定します。
ここでサイズを指定しているので、displayプロパティの値は「block」を指定します。

続いて、「GRAY COFFEE STAND」のテキストを非表示にするためにfont-sizeプロパティを「0」で指定します。

最後はロゴ画像を表示するためのbackgroundプロパティです。
値が少し多いですが、前からロゴ画像のパス、表示位置（左上）、表示サイズ（横64px、縦は自動）、繰り返し表示（no-repeat）と指定しています。
表示位置と表示サイズの間は「/ (半角スラッシュ)」で区切る必要があります。

以上のCSSで、ロゴが画像だけで綺麗に表示されます。

見出し要素以外でロゴをマークアップする

記事詳細ページなどでロゴにh1要素を使いたくない場合は、今回のコードの「h1」の部分を他の任意の要素に置き換えて記述します。

例えば、p要素に置き換える場合は次のようになります。

HTMLのマークアップ例

<p><a href="/">GRAY COFFEE STAND</a></p>

CSSのコード例

p {
	float: left;
	padding: 6px 0;
}
	p a {
		display: block;
		width: 64px;
		height: 69px;
		font-size: 0;
		background: url(./images/logo_coffee.svg) left top/64px auto no-repeat;
	}

このように要素を置き換えてもブラウザの表示に変化はありません。
見出し要素はページによって使いどころが異なるため、必要に応じて切り替えてください。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。