CSSのみで画像置換をしてメニュー作成する

以下のようなメニューがあるとする
menu071130.jpg
HTML

スタイルシートはこうする(数字は画像サイズに応じて変更)
CSS
.menu1{background:#fff url(../images/ファイル名.jpg) no-repeat; line-height:18px; padding:34px 0 0; height:0px; width:80px; overflow:hidden; float:left;}
.menu2{background:#fff url(../images/ファイル名.jpg) no-repeat; line-height:18px; padding:34px 0 0 ; height:0px; width:80px; overflow:hidden; float:left;}
.menu3{background:#fff url(../images/ファイル名.jpg) no-repeat; line-height:18px; padding:34px 0 0 ; height:0px; width:80px; overflow:hidden; float:left;}
.menu4{background:#fff url(../images/ファイル名.jpg) no-repeat; line-height:18px; padding:34px 0 0; height:0px; width:80px; overflow:hidden; float:left;}
ポイント
・表示エリア 高さを0pxにしてパディングで高さの表示エリアを広げる
・文字を隠す ライン高をあげて表示エリアの下側に隠すようにする
・印刷 背景を印刷しない設定にしてあると文字が消えてしまうのでCSSの設定を media=”screen”にする
以上

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中