モバベン

ぼくはモバイルシステムをべんきょーちゅー。

サイトのタイトルにロゴ画像を使う

サイト名を画像を使って表示する場合、画像をh1でマークアップする。画像は表示サイズの4倍で作成して高解像度端末に対応させる。

サイトのタイトルにロゴ画像を使う場合、以下の手順を踏む。

h1でマークアップする

imgをh1で括ってその画像を大見出しとする。このとき、画像が表示されない場合や検索エンジンへの対策としてalt属性にサイト名を記述する。また、aタグで括ってトップページへのリンクを貼る。

<h1><a href="#"><img src="images/logo.png" alt="サイト名" /></a></h1>

高解像度端末に対応させる

スマートフォンなどの高解像度ディスプレイを搭載している端末では画像がぼやけて表示されてしまうので、高解像度のロゴ画像を用意して対処する。

高解像度のロゴ画像は、実際に表示させたいサイズの4倍の大きさにする。たとえば幅250px、高さ40pxで表示する場合、幅1,000px、高さ160pxの画像を作る。

マークアップする際にはimgのwidthとheightで表示させたいサイズを指定する。

<h1><a href="#"><img src="images/logo.png" alt="サイト名" width="40" /></a></h1>

IEで画像周りの罫線を表示されないようにする

IE10以前ではリンクを設定した画像の周りに罫線が表示されるので、cssでimgのborderをnoneに指定してこれを回避する。

.sitetitle img {
    border:none
}

覚えたい用語

参考にしたサイト/書籍

カテゴリー一覧