デザイン通りに組む！ ～画像置換～
- トモ・リーン
- CSSでのデザイン表現の花形の画像置換やりま〜っす！
- ケンジ
- おう〜〜〜！
アレだよね、ソース上は文字なのにブラウザで見ると画像が表示されているヤツだよね。
- トモ・リーン
- そうよ。
文字を表示させないようにして、背景画像として画像を表示するんだけど、CSSでは背景画像の表示を色々制御できるから、結構楽しいところね！
- ケンジ
- どこを画像置換してみる？
- トモ・リーン
- う〜ん、じゃあヘッダのサイトタイトルの辺りをしようかしらね・・・。
- ケンジ
- おう！
- トモ・リーン
- 基本はこんな感じね〜！
画像を表示したい要素{
background-image: url(背景画像へのパス);/*表示したい画像を指定*/
background-repeat: no-repeat;/*繰り返し表示しない（表示する画像によって自由に決めてOK）*/
height: 91px;/*要素の高さ（表示したい画像の高さ以上にすること）*/
text-indent: -9999px;/*文字のインデントを大きくマイナス指定する事によって画面外に出す*/
}
- ケンジ
- さっそくヘッダの部分に付けてみるぜ！
- トモ・リーン
- 出来てるわね〜！
同じ調子でフッタのコピーライトの部分も出来るわよ。
- ケンジ
- ところでさぁ・・・。
メインの巨大ネコイメージはどうするの？
ヘッダに食い込んでるし。
- トモ・リーン
- う〜〜〜ん、そこはちょっと放置の方向で進めるわ！
- ケンジ
- ・・・・・・。
（大丈夫かな？？）
- トモ・リーン
- 次回は左メニューのボタンをやるわよ。
お楽しみに〜！！
- 今回のポイント！
- 基本は「background-image: url(背景画像へのパス)」で背景を付けて、「text-indent: -9999px」で文字をブラウザ画面外へ飛ばす方法で画像置換できますよ！