メディアブルデザインの制作書庫

MediableDesign - 制作書庫

CSSを使ったの背景画像


SEO対策として改めて<h>タグの使用も見直されていますが、<h>タグに背景画像を使うことはあるでしょうか??
そのまま使うと[32pt]と大きな<h1>も、背景を画像にする事によりそのままのサイズでも良く見せる事が出来るので、SEO的にもデザイン的にも有効かと思います。

【例】
h1 {
background-image : url(画像ファイルまでのパス);
width : 画像の横幅;
height : 画像の縦幅;
text-align : 画像の位置(center left right);
}

paddingを使って文字の位置を調整すると、ずらした分だけ画像もずれてしまいます。paddinngを使う場合は

paddinng + width = 画像の幅

となるようにして下さい。
縦の場合はwidthがheightになるだけで他は同じです。


同じカテゴリの記事

borderプロパティ一括指定

CSSを使った全体設定

ロールオーバーボタンを作る~画像無し

スクロールバーの色を変える

ボックスのセンタリング

50,000円からのホームページ制作
月額10,000円からのホームページ更新・運営代行

powered by MediableDesign(メディアブルデザイン)
このウェブサイト上の文章、映像、写真などの著作物の全部、または一部を了承なく複製、使用することを禁じます。
COPYRIGHT © MediableDesign All Right Reserved.