螺旋デザイン｜はじめてのCSS　デザイン通りに組む！　～ボタン～

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

デザイン通りに組む！　～ボタン～

2008/08/25

トモ・リーン: 画像置換の応用、ボタンやりま〜っす！

図：今回の作業箇所

ケンジ: おう〜〜〜！
画像置換を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;」を入れましょう！

次の記事を見る

前の記事を見る

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

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

コメントする

オススメ本: 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 ウィジェット