螺旋デザイン｜はじめてのCSS　デザイン通りに組む！　～画像置換～

はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。

デザイン通りに組む！　～画像置換～

2008/08/18

トモ・リーン: CSSでのデザイン表現の花形の画像置換やりま〜っす！

ケンジ: おう〜〜〜！
アレだよね、ソース上は文字なのにブラウザで見ると画像が表示されているヤツだよね。

トモ・リーン: そうよ。
文字を表示させないようにして、背景画像として画像を表示するんだけど、CSSでは背景画像の表示を色々制御できるから、結構楽しいところね！

ケンジ: どこを画像置換してみる？

図：今回の作業箇所

トモ・リーン: う〜ん、じゃあヘッダのサイトタイトルの辺りをしようかしらね・・・。

ケンジ: おう！

トモ・リーン: 基本はこんな感じね〜！
画像を表示したい要素{
background-image: url(背景画像へのパス);/*表示したい画像を指定*/
background-repeat: no-repeat;/*繰り返し表示しない（表示する画像によって自由に決めてOK）*/
height: 91px;/*要素の高さ（表示したい画像の高さ以上にすること）*/
text-indent: -9999px;/*文字のインデントを大きくマイナス指定する事によって画面外に出す*/
}

ケンジ: さっそくヘッダの部分に付けてみるぜ！

付けてみた実際のファイル【HTML】付けてみた実際のファイル【CSS】

トモ・リーン: 出来てるわね〜！
同じ調子でフッタのコピーライトの部分も出来るわよ。

コピーライトにも適用済みのファイル【HTML】コピーライトにも適用済みのファイル【CSS】

ケンジ: ところでさぁ・・・。
メインの巨大ネコイメージはどうするの？
ヘッダに食い込んでるし。

トモ・リーン: う〜〜〜ん、そこはちょっと放置の方向で進めるわ！

ケンジ: ・・・・・・。
（大丈夫かな？？）

トモ・リーン: 次回は左メニューのボタンをやるわよ。
お楽しみに〜！！

今回のポイント！: 基本は「background-image: url(背景画像へのパス)」で背景を付けて、「text-indent: -9999px」で文字をブラウザ画面外へ飛ばす方法で画像置換できますよ！

次の記事を見る

前の記事を見る

トラックバック(0): このブログ記事を参照しているブログ一覧：デザイン通りに組む！　～画像置換～

このブログ記事に対するトラックバックURL: http://www.rasen-d.net/z/mt/mt-tb.cgi/96

コメントする

オススメ本: HTMLタグ+スタイルシート辞典ちび
基礎はもちろんCSSの記述に必要なことも載っているのでオススメ！; 現場のプロから学ぶXHTML+CSS
実際のXHTML+CSSの作業について学びたい方にオススメ！

オススメCSSのサイト: TAG index
ものすごく使いやすいHTML & CSSのリファレンスサイト; CSSフリーライブラリー
色々なテーマごとにCSSの情報が集まっています！

オススメ勉強会: CSS Nite
お気軽な無料の会（主にアップルストアで）から、本格的な有料セミナーまで楽しい勉強会を開催してくれます。; Re:Creator’s Kansai（リクリ）
関西のクリエイターの交流、勉強会・セミナーの開催を目的としたコミュニティです。

螺旋デザインメンバーも執筆に参加！: XHTML+CSS プロが教える“本当の使い方”
現場で培われたXHTML+CSSのテクニックを徹底解説!!

話題のiPhoneアプリ: 大藤幹のHYML/XHTML辞典
HTML5に対してもアップデート対応するらしいですよ！これで重い辞書とはおさらば♪; myPANTONE
色辞典です。サイトの色のイメージをクライアントと打ち合わせするときに、これを使ったらカッコ良すぎて話しがまとまりやすくなるかも！

Amazon.co.jp ウィジェット