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

デザイン通りに組む! ~ボタン~

トモ・リーン
画像置換の応用、ボタンやりま〜っす!
図:今回の作業箇所
ケンジ
おう〜〜〜!
画像置換をfile15で覚えたから、やってやるぜ☆
メニューの各aタグに違う画像を設定するから、idを付けるね。
やってみたファイル【HTML】 やってみたファイル【CSS】
トモ・リーン
うくくくく!
出来てないわね。
図:画像置換失敗!
ケンジ
えーーーー?
なんで??
トモ・リーン
じつは画像置換はブロック要素じゃないと、ちゃんと出ないのよ。
ケンジ
えええーーーー!
トモ・リーン
だから、ボタンにしたい「a」をブロック要素にすると大丈夫よ。
ブロックにしてみたファイル【HTML】 ブロックにしてみたファイル【CSS】
ケンジ
でたー!!
図:画像置換成功!
トモ・リーン
次は「ul」「li」にデフォルトで付いているmargin・padingとリスト項目の頭に付いている「・」を取ります。
ul・liのデフォルトスタイル削除済みのファイル【HTML】 ul・liのデフォルトスタイル削除済みのファイル【CSS】
ケンジ
それっぽく、なってきたぜ!
あとはデザイン通りにマージンをつけるんだね。
そこは俺にまかせて!!
デザイン通りにマージンを付けたファイル【HTML】 デザイン通りにマージンを付けたファイル【CSS】
トモ・リーン
うん、ばっちりね!
ケンジ
ところでさぁ、このボタンFirefoxで見ると押したときに変な枠線が出るけど、これって消すの無理かなぁ・・・。
いろんなサイトでもこの線見るから、消えないんだよね・・・。
図:Firefoxで見られる不自然な枠
トモ・リーン
ケタケタケタケタケタケタ!
消えるわよ!!
ケンジ
まじで?
早く言っちまいなYO☆
トモ・リーン
text-indent: -9999px;を指定したところに「overflow:hidden;」とやってみて!
変な枠線が出ないファイル【HTML】 変な枠線が出ないファイル【CSS】
ケンジ
消えたよ〜〜!!
ホンマにスッキリや〜〜!
今回のポイント!
基本は画像置換の方法と同じですが、aタグをブロック要素にする事と、クリック時の左側へ伸びてしまっている枠線を取りたい場合は「overflow:hidden;」を入れましょう!