ロゴ画像の設定
今回はheaderにロゴ画像の設定を行いました。
ロゴ画像の設定
以下、今回の記述です。
header h1 {
font-family: 'Chango', cursive;
font-size: 24px;
width: 900px;
margin-left: auto;
margin-right: auto;
}
header h1 img {
vertical-align: -10px;
margin-right: 5px;
}
HTML
<header>
<h1><img src="logo.png" alt="">FOREST STUDIO</h1>
</header>
赤字の部分が今回追加した記述になります。
vertical-align
vertical-alignとは、画像をテキストに対して、縦方向の位置を指定するプロパティです。今回の場合で言えば、ロゴマークをどこ基準に表示させます！っていう宣言ですね。今回の指定は、テキストのベースライン（中心）から5px下がったところにロゴマークを指定し、ロゴとテキストのセンターが合うように指定しました。
alt=""
今回altに値を指定しなかったのは、ロゴ画像の横にサイトタイトルがあるからです。前後の画像と同等の内容がある場合は、alt属性の値を省略して記述できます。しかし、これは省略してもいいだけであって、SEO目線から言うなら、確実にサイトタイトルを入れておいたほうがいいでしょう。今回は参考テキストに沿っていく形で進めていくので、このまま進行します。
まとめ
今回新たに登場した記述は、vertical-alignです。テキストに対して、縦方向の位置を決める記述で、pxだけではなく、以下の値も使用可能です。
top 行の上辺と画像の上辺を揃える
text-top 文字の上辺と画像の上辺を揃える
middle 文字のミドルベースラインと画像中央を揃える
baseline 文字のベースラインと画像の下辺を揃える
text-bottom 文字の下辺と画像の下辺を揃える
bottom 行の下辺と画像の下辺を揃える
px ＋値で上方向、-値で下方向に指定できる
おそらくほとんどのケースでmiddleで対応できると思いますが、以上のことを覚えておいて損はないと思いました。
今回のBefore Afterです。
Before
After
headerにロゴが付いたのがわかると思います。実際の指定はとても簡単でしたが、微調整する意味でvertical-alignを使用しました。vertical-alignを使用しなかったら、もっと簡単な記述で、これに似た表示をさせることができます。
引き続き勉強をしていきます。
