CSSで気をつけたい事やつまづいたときのちょっとしたコード

Posted under - Web Design

13

Webデザイナーにとって、必須のスキルである CSS ...。スタイルシートを書くときに普段から気をつけてることや、あれ?これってどうやってやるんだっけ?となかなか覚えきれないものをちょっとまとめてみました。またサンプルも作ってあるので合わせて見てくださいね!

HAVE FUN CSS

Webサイトを作っていると、CSS でつまづくことがたくさんあります。初心者の頃は、CSS で思うようなレイアウトやデザインを描けない事が何度もありました。また各ブラウザ間の表示の差異もあって、ますます壁が高いなーと感じてました。

今回は後々メンテナンスが楽になる CSS の書き方や、気をつけたい事、つまずいた時に「そういえばこうだった」的なものを集めてみました。後半はコードのまとめになってます。

CSS の注意書き 目次

  1. (X)HTMLを書く時に気をつけたい事
  2. スタイルシートを読みやすく書く
  3. CSSのブラウザのバグを把握、知っておこう
  4. CSSでつまづいたときのちょっとしたコード

CSS のコード 目次

  1. ページを中央に配置する
  2. フロートでレイアウトする
  3. リンクの点線を削除
  4. テキストを画像に回り込みさせない
  5. 横並びリストでナビゲーションを作る
  6. フロートさせた横並び要素の余分なマージンをなくす
  7. カーソルをポインタにする
  8. 2行目以降ををインデント(字下げ)するスタイルシート
  1. クラスは複数指定できます
  2. リストの最初のボーダーを消す
  3. 単語の途中で改行させない
  4. 長い英字リンクを改行させる
  5. フロートしている小要素を親要素にキチンと内包させる
  6. 縦に並べた画像の下に隙間ができる
  7. マウスオーバーで画像を入れ替える

1. (X)HTMLを書く時に気をつけたい事

まずは CSS、スタイルシートを書くときに気をつけたいこと、後々のメンテナンスを楽になるために習慣としたい事柄から。もちろん CSS は (X)HTML とのセットで考えるもの。CSS でスタイルを適用したいだけで (X)HTML の文書構造を無視したりしないようにしたいです。まずは XHTML あっての CSS だってことを忘れないでおきたいですね!

1.1. id、classを多用しない

初心者の頃は、要素ごとに個別のスタイルを採用するために、どうしても安易に id や class をつけてしまいがちでした。そうすると (X)HTML だけじゃなく、スタイルシートも煩雑になって、メンテナンスもしづらくなってしまいます。id や class は必要最低限、できるふだけ工夫をして、むやみやたらに使わないように心がけたいですね。

全ての要素に id や class をつけてマークアップした場合、ちょっと大げさだけどこんな風になります。ちなみに、マークアップも全てパラグラフですけど w 気にしないでください w 文書構造をまるっきり無視した (X)HTMLになっています。でも、以下のふたつのマークアップは、見た目だけはスタイルシートで同じにできますよね。

(X)HTML その1
<div id="sidenavi">
<p class="sidenavi-heading"><strong class="red">サイドメニュー</strong></p>
<p class="sidenavi-item1"><a href="#">メニュー1</a></p>
<p class="sidenavi-item2"><a href="#">メニュー2</a></p>
<p class="sidenavi-item3"><a href="#">メニュー3</a></p>
<p class="sidenavi-item4"><a href="#">メニュー4</a></p>
<p class="sidenavi-item5"><a href="#">メニュー5</a></p>
</div>

上の例は、見出しから何から全部パラグラフ(段落)という … ちょっとめちゃめちゃな文書構造です。その上、見た目をスタイルシートで装飾するために、たくさんのクラスがつけられています。

下の例は、見出しには <h3> タグ、リストには <ul> タグを使って、きちんとマークアップされてます。親要素のみ id をつけた場合のマークアップは、とってもシンプルだし、適切な要素でマークアップすればスタイルを指定するのも簡単になりますね!

(X)HTML その2
<div id="sidenavi">
<h3>サイドメニュー</h3>
<ul>
	<li><a href="#">メニュー1</a></li>
	<li><a href="#">メニュー2</a></li>
	<li><a href="#">メニュー3</a></li>
	<li><a href="#">メニュー4</a></li>
	<li><a href="#">メニュー5</a></li>
</ul>
</div>
CSS

以下は (X)HTML その2 に対するスタイルシートです。id を先頭にして ツリー上にスタイルを指定していくと、メンテナンスのときにもわかりやすいですね。

#sidenavi h3{
	font-wight: bold;
	font-size: 140%;
}
#sidenavi ul{ 
	margin:10px;
	list-style:none;
}
	#sidenavi li{
		float: left;  
	}
    	#sidenavi a{
			display:block;
			padding:10px;
		}
			#sidenavi a:hover{
				text-decoration:underline;
			}

親要素の id を頼りに、ツリー化の構造でスタイルを指定しています。こうするとメンテナンスの時もすっきりして分かりやすいです。

1.2. (X)HTMLに直接スタイルを書かない

スタイルは以下のように、(X)HTML に直接書くことだってできますよね。でもこれはできる限りしないようにしたいです。

(X)HTML
<h3 style="font-weight: normal; color: #ff6600;">今日のランチは明太子スパゲティでした</h3>

上は (X)HTML に直接スタイルを記述していますが、これをやるとメンテナンスの効率がガクンと落ちます。(X)HTML に直接書かれたスタイルは、外部から読み込まれたスタイルシートや、head 内に書かれたスタイルシートよりも優先されますよね(!important の次に)。

読み込んでいるスタイルシートの CSS をいくら変更しても、スタイルが反映されないで、なんでだろう?と思って調べてみたら、(X)HTMLに直接スタイルを指定してあった … なんて事もよくある話です。

本来 (X)HTML は文書、CSS はデザイン … という役割分担があるのですから、スタイルは一貫してスタイルシートで指定するようにしましょう。

2. スタイルシートを読みやすく書く

スタイルシートを読みやすくする工夫ってしてますか?スタイルシートを読みやすくしておくと、後々のメンテナンスがとっても楽になります。

上から下までずーっと同じ段落で書かれていたり、行間やコメントが一切なかったり … そんなスタイルシートはかなり読みにくくって、自分で書いたはずなのに、どこに何が書いてあるのかわからない … なんてことにもなってしまいます。

2.1. コメントを上手に使おう

スタイルシートもコメントを書くことができますから、コメントでセクション分けしておけば、ヘッダーをいじりたいんだけどなー … という時などにもとっても便利。もちろんみんなやってると思うんですけど、追記したりしたときなどにも、追記した理由とか、どこを追記したとか、コメントを残しておくと後々役立つこともあります。

CSS
/*****************

header

******************/
#header{
  width: 940px;
}

2.2. 子のエレメントをインデントする

コメントを書いたり、行間を空けたりってことはやってると思うんですけど、子のエレメントをインデント(字下げ)しておくと、構造、親子関係が分かってとっても便利です!これで断然スタイルシートが読みやすくなりましたー!

#navi{ width:800px; }
    #navi ul{ margin:20px; }
        #navi li{
            float:left;
            width:180px
            height:24px;
        }
            #navi li a{
                display:block;
                width:100%
                height:100%;
            }

2.3. 同じプロパティをグループ分け

ナビゲーションのリストなど、背景の画像の大きさや、その他のプロパティーは同じだけれど、使う画像だけが違うんだよねーといいうとき、いちいち個別に全部書くことはせずに一回でまとめて書いちゃいましょう。

グループでプロパティをまとめておけば、もし変更があった場合でも一か所だけ変更すればすむのでとても楽です。

CSS
/* リストのスタイル */
#navi li{
    width:200px;
    height:24px;
    background-repeat:no-repeat;
    background-position:0 0;
}
/* 画像だけそれぞれ指定 */
    li.item1{ background-image:url(images/example1.gif); }
    li.item2{ background-image:url(images/example2.gif); }
    li.item3{ background-image:url(images/example3.gif); }

3. CSSのブラウザのバグを把握、知っておこう

誰もがブラウザ、特に IE6 に泣かされた経験はあるかと思いますけど、そんなブラウザの CSS のバグを、事前に知っている、いないとでは、CSS のコーディングの効率に大きな差が生まれます。

まずはモダンブラウザを基準にして、コーディングをすすめると思いますが、最初から IE 系のバグを知っていれば、ある程度予防ができますよね。どこをどーすればいいか、コーディングの時点で考えながら書くこともできます。

3.1. IE6 後方互換モード – ボックスモデルのバグ

レイアウトを作る段階で、初心者さんがつまづくのがこの IE6 のボックスモデルのバグですよね。私も昔はよくいじめられました … X( 今となっては懐かしい感じがします。

今ではこの IE6 の後方互換モードがいやで、XHTML でのコーディングでも XML 宣言をしないというのが主流になっていますね。(XML 宣言をしなければ、IE6でも標準準拠モードでレンダリングされます)。

CSS ボックスモデル

CSSボックスモデル

IE6 の後方互換モードでは、モダンブラウザと比べると、ボックスモデルの幅の解釈が違います。

CSS
#box{
    width:100px;
    margin:10px;
    padding:10px;
    border:5px;
}

CSS でデザインをするときの、基本となるボックスモデルという考え方。要素には幅と高さがあって、それをボックス、箱として考えます。例えば上のスタイルシート、モダンブラウザでは1ボーダーの端から端までは 130pxになりますよね。

width: 100px + padding: 10px ×2(左右)+ border: 5px ×2(左右)で 130px

でも IE6 の後方互換モードでは、左ボーダーの端から右ボーダーの端までの幅が、他のブラウザと違って、widthで指定してある値、2100px になってしまいます。

解決策としては、width を指定した要素に対しては、左右 padding は指定しないとか …。padding を使用したい場合は、内包する要素で指定するとか … の方法がありますが、これは IE6 の後方互換モードでのバグ。なので、標準準拠モードになるようにXML 宣言なし、適切な DOCTYPE(文書型宣言)を書いた方が早いかもですね!

XML宣言ってこんなやつです

XHTMLで書く場合、本当は XML 宣言をしなさいって、W3C では推奨されてます。

  • <?xml version="1.0" encoding="utf-8"?>
DOCTYPEってこういうやつのことです
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3.2. IE6 でフロートした要素のマージンが2倍になる

これはレイアウト崩れの大きな要因ともなるバグですねー。IE6 では、左フロートした要素の左マージン、右フロートした要素の右マージンが、倍になってしまうという困ったバグがありますよね。

CSS
#sidebar{
    float:left;
    margin-left:10px;
}

フトート方向と同じ左に、マージンを 10px 指定しています。IE6 以外はきちんと 10px のマージンになるんですけど、IE6 は 2倍の 20px になってしまいます …。なのでフロートしたボックスが入りきらないで、下にストンと落っこちちゃうこともしばしば。

フロートした側へのマージンを指定しないのが無難です。その場合、空白を親要素の padding で指定するなどの対応策がありますねー。

3.3. IE6 position:absolute で位置がずれる

本来 position: absoluteは、絶対配置なのでずれたらまずいんですけどねー … IE6 ではずれることがあるんですよね。これは親要素に width を指定する事で解決できます。haslayout 系のプロパティーを指定すれば width じゃなくていいのかな …。確認してませんけど …。

CSS
/* 親要素 */
div {
    position : relative;
    height : 100px;
    width : 100%;
}

この他にもナビゲーション周りでありがちな、横にフロートさせたリストが階段状になる Step Down バグなどもありますね。IE6、IE7 では haslayout系のバグ(仕様?)が多いです。自分がよく遭遇するバグは、こまめに記録して同じバグにはまらないようにしたいですね!

4. CSSでつまづいたときのちょっとしたコード

初心者の頃、よくわからなくてつまずいたことなどをまとめてみました。初心者さんがつまづきそうなことや、あれってどうやるんだっけ?的なものです。

4.1. ページを中央に配置する

ブラウザで Webサイトを開いた時に、ページを中央に配置するだけですが、昔は body にtext-align:center を指定して、container とかで text-align:left を指定する … なんてこともしてましたね w IE5.5 くらいの話かな?


#container {
    width: 940px;
    margin: 0 auto;
}

今はとっても簡単で、横方向のマージンに auto を設定すればOK ですよね。たった一行で簡単にセンタリングできました。

CSS
#container {
  width:940px;
  margin:0 auto;
}

4.2. フロートでレイアウトする

2カラムレイアウトや、3カラムレイアウト、横並びのナビゲーションなど、とにかくフロートは頻繁に使いますよね。フロートした後は解除しないと、後続の要素も同じようにフロートされちゃって、レイアウトがぐちゃぐちゃになっちゃいます。下の例は一番簡単な方法 … 後続の要素に clear プロパティを使う方法です。

昔は <br clear="all"> だったかな?こんなタグを書いてたような気がします w

	
  #header
	

	
  #main {
    width:640px;
    float:left;
  }
	

	
  #sidebar{
    width:300px;
    float:right;
  }
	

こんな感じのよくある 2カラムレイアウトを例にとると、いろいろマークアップの仕方はありますが、簡単に書くとこんな感じになりました。

HTML
<div id="container">
    <div id="header">ヘッダー</div>
    <div id="main">メイン</div>
    <div id="sidebar">サイドバー</div>
    <div id="footer">フッター</div>
</div>

コンテナの中にヘッダー、メイン、サイドバー、フッター全部を詰め込んでいます。これをスタイルシートで2カラムレイアウトにしてみます。

CSS
#container{ width:940px; }
    #main{
        width:620px;
        float:left;
    }
    #sidebar{
        width:320px;
        float:right;
    }
#footer{ clear:both; }

#main は左フロート、#sidebar は右フロート(左でもOKです。)で左右に振り分けます。そのままだとフッターがサイドバーの方に回り込んでしまうので、clear:both でフロートを解除します。

それから clear した要素では、margin-top が反映されない場合があるのも要チェックです!ちょっと下の画像を見てください。

margin-top が効かない理由

マージントップが効かない理由

こういう場合は、画像との間に margin-top が効く訳じゃないんです。

margin-top は、フロートした画像に対して効く訳じゃありません。白背景のボックスとの間のマージンになるんです。でも、パッと見で 20px 以上空いてますよね?どうしてこうなるの?っていう理由は、別の記事で書いてみたのでそちらを参考にしていただければと思います。解決策としては、フロートした要素(この場合は画像)に margin-bottom: 20px とすれば OKですね!

4.3. リンクの点線を削除

せっかくキレイにデザインを作ったのに、リンクをクリックした時に、点線が表示されるのがガマンできない人もいると思います。実は私もそのひとり…。ここは思い切って消しちゃいましょう!

アウトライン

リンクのアウトライン …。場合によっては消してしまいたい …。

追加するコードはたったの一行です!もちろん、デザインによっては有効に利用したいですけど、なくていいや … って場合も多いですねー。

CSS
a:active,a:focus{ outline:none; }

4.4. テキストをフロート画像に回り込みさせない

フロートした画像の後にテキストを書くと、テキストが回り込んで画像を囲みますよね。狭いスペースを有効に活用するために、新聞や雑誌でもよく見かけるレイアウトです。でもデザインによっては、回り込みさせないでそのまま下に流したい場合だってあります。

layout

画像にテキストが回り込んでる例と、回り込んでいない例です。

HTML

回り込みさせる場合も、させない場合も、マークアップは基本的に同じです。

<img src="images/example.jpg" alt="" />
<p class="no-wrap">ここに書いたテキストを、画像に回り込ませたくない場合はパラグラフにoverflow:hidden を指定します。IE6 用として zoom:1 を合わせて指定します。</p>
CSS

スタイルシートは至ってシンプル!パラグラフに overflow:hidden を指定するだけです!zoom は IE だけの独自拡張 … IE6 用に記述しています。

また、単純に、パラグラフに画像の分だけ margin-left を指定するのありですね!

p.no-wrap{
    overflow: hidden;
    _zoom:1;
}

/* または */
p {
    margin-left: 200px;
}

実際に CSS でのサンプルを作りました。

Sample

4.5. 横並びリストでナビゲーションを作る

Webサイトのヘッダー付近でよく見かけるのが、横並びにしたリストを使ったナビゲーション。本来縦に配置されるブロックレベル要素の <li> タグを、横に並べてナビゲーションを作ってみましょう。

リストを横にするだけなら display:inline を指定すれば簡単にできますが、ブロックレベル化したリンクを内包することになるので、ここではフロートしちゃいましょう。IE6 で横並びにならずに階段状になってしまうバグ、Step Down バグにも対応しています。

HTML

HTMLは至ってシンプル。普通にリンクを内包したリストをマークアップするだけです。

<div id="navi">
<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
</ul>
</div>
CSS
#navi ul{list-style:none;}
  #navi li{
    display:inline; /* IE6 */
    float:left;
  }
    #navi li a{
      display:block:
      padding:10px 20px;
    }

スタイルシートも至ってシンプルですね。ちょー簡単です!

Sample

4.6. フロートさせた横並び要素の余分なマージンをなくす

フロートした横並びブロック要素の間に、マージンを指定して余白を作ることはよくありますよね。この時各要素の右側にマージンを指定すると思うんですけど、場合によっては一番最後の要素だけは右側のマージンが必要ない場合もありますよね。

親要素にピッタリ納めたいときには、そのマージンのせいで親要素の幅に収まりきれず、下に落ちてしまいますよね。これを解決するには、間にひとつブロックレベル要素を入れて、その幅を少し大きくしてあげることで対応できます。要素がひとつ増えるのがイヤだなーって思うかもしれませんけど、<ul> タグと <li> タグでマークアップするときには使えますね!

入りきらずに落っこちちゃってる状態

カラム落ちの状態

3つ目の画像の margin-right が余計で、カラム落ちしちゃった状態。

HTML

HTML は特に何もありません。普通にリストに画像を入れてマークアップしてあるだけです。サンプルでは画像を使ってますが、画像にしか使えないというわけではなくて、フロートした要素に使います。

<div>
<ul>
	<li><img src="images/example1.jpg" alt="" width="160" height="160" /></li>
	<li><img src="images/example2.jpg" alt="" width="160" height="160" /></li>
	<li><img src="images/example3.jpg" alt="" width="160" height="160" /></li>
</ul>
</div>
CSS

本来入れるべきボックスの大きさと、その子要素である >ul< タグ、余白分のマージンの関係を見てくださいね。ul 要素では、余白分だけ幅を大きくしています。

div {
/* ボックスの横幅 */
    width : 540px;
}
  ul{
    /* ボックスより余白分大きくする */
    width : 555px;
  }
    li{
      /* 余白の大きさ */
      margin-right : 15px; 
    }

Sample

4.7. カーソルをポインタにする

フォームの中で使われる、送信ボタンなど、ブラウザの標準では矢印だけど、カーソルをポインター(指アイコン)にしたい場合があります。そんなときは次のコードで解決です。この段落は、リンクじゃないけどカーソルが指ポインターに変わります。

CSS
.pointer{ cursor : pointer; }

cursor プロパティで pointer を指定するだけです!

4.8. 2行目以降ををインデント(字下げ)するスタイルシート

例えば マークを先頭につけて、注意書きなどを表記した場合、一行ですめば問題ないのですが複数行にまたがった場合に、※マークがちっとも目立たなくなってしまいます。なので、二行目以降は※マークの分だけインデント(字下げ)させたいと思います。

夜10時以降にケーキを食べると太ります。誘惑に負けず、明日までガマン、ガマン…。もし食べてしまったら … 腹筋でもして取り戻そう w

CSS
p{
    margin-left:1em;
    text-indent:-1em;
}

夜10時以降にケーキを食べると太ります。誘惑に負けず、明日までガマン、ガマン…。もし食べてしまったら … 腹筋でもして取り戻そう w

こうすると 2行目以降がインデントされ、※マークが目立つようになりました!もちろん 1em を 2em(2文字分)などにすることも OKです!

4.9. クラスは複数指定できます

クラスはひとつの要素に、複数指定できるんですよね。初心者の頃はそんなことちっとも知りませんでした w クラスを複数指定する場合は、半角スペースで区切ります。

これを利用して以下のような汎用クラスを作って使い回す … という事ができたり、A というクラスと B というクラスが、同時に指定されてるものにだけスタイルを指定する …. ということもできるようになります。

CSS
/* 例えば汎用的なクラス */
.top-spc10{ padding-top:10px; }
.top-spc20{ padding-top:20px; }
.btm-spc10{ padding-bottom:10px; }
.btm-spc20{ padding-bottom:20px; }
HTML

div要素にクラスを複数指定しています。

<div class="section top-spc20 btm-spc20 caution">...
...</div>
<div class="top-spc20 btm-spc20 caution">...
...</div>
<div class="section top-spc20 btm-spc20">...
...</div>

上のマークアップで、クラスが section、かつ、cautionのdivだけ にスタイルを指定したい場合は、以下のように半角スペースを空けずに続けて書けば OK です。

  • 1. .section.caution{ /* Style */ }

4.10. リストの最初のボーダーを消す

リストをボーダーで区切ることってありますよね。リストにボーダーを指定した場合、一番最初のボーダーって要らないかも。そんな時、一番最初の<li> タグだけ別のクラスを指定して … なんてしなくてもマークアップはそのままでボーダーを消すことができます。

一番上のボーダーに注目!

リストのボーダーを消す

一番最初のリストの border-top だけを消しちゃいます!

CSS

親要素である ul 要素には、はみ出した部分を隠してしまう overflow:hidden を指定します。zoom は IE6 対策です。その上で、子要素の li にはボーダーの太さの分だけネガティブマージン(マイナスのマージン)を指定するだけ!縦並びなら margin-top、横並びなら margin-left です。

ul {
    overflow: hidden;
    _zoom: 1;
}
    li {
        margin-top: -1px;
        border-top: 1px dashed #ccc;
    }

Sample

4.11. 単語の途中で改行させない

普段はあまり気にならない単語の途中での改行ですが、ブログのタグクラウドなど、単語として表示している場合、改行されると困る場合もありますよね。日本語だと以下のようになっちゃいますし、英語でも「Web Design」みたいに途中にスペースが入ると、改行されることがあります。

これを防ぐためには、white-space プロパティを使います!

環境によってはフォントが違うので、上記の例で単語内で改行されずに表示されているかもしれません。

CSS

下記は span で囲んである場合での CSS です。こうすれば、途中で改行されなくなって、ひとつの単語として認識されやすくなります!

span { white-space:nowrap; }

4.12. 長い英字リンクを改行させる

上記とは逆のパターンです。長い URL など、アルファベット表記のリンクの場合、改行されず要素からはみ出してしまう場合がありますよね。見た目も悪いし、ヘタをするとブラウザの横スクロールバーがでちゃっうこともあります。これはword-wrap プラパティで、親要素の幅に合わせて改行することができます。

もともとは IE だけの独自拡張だったみたいですけど、CSS3 からは標準仕様になったんじゃなかったかな?

CSS

たった 1行追加するだけです!

ul li{ word-wrap: break-word; }

4.13. フロートしている小要素を親要素にキチンと内包させる

フロートさせている子要素を内包しているはずの親要素が、小要素を包んでくれないというケースがあります。というよりこれが普通で、CSS の仕様ではこうなっています。フロートした子要素の高さを親要素では含めないんですねー。

でもこれだと、親要素に背景を指定している場合など、ちょっと困っちゃいますねー…。これを回避するには clearfix を利用します。

clearfix CSS

親要素にクラス、.clearfix を指定して、以下の clearfix のスタイルを適用させます。

/* clearfix */
.clearfix:after { 
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

/* clearfix for ie7 */
.clearfix { 
	display: inline-block; 
}
.clearfix { 
	display: block; 
}
overflow: hidden CSS

またはもっと簡単に、親要素のスタイルに overflow:hidden を指定します。 zoom は IE6 用です。

div{
    overflow : hidden;
    _zoom:1;
}

Sample

4.14. 縦に並べた画像に隙間ができる

縦に画像を並べると、画像の下に意図しない隙間ができちゃうことがあります。これはリセットCSS などにもよりますが、全部の要素に veatical-align: baseline を指定してあることが原因だったりします。

縦に並べた画像に隙間ができる
画像に vertical-align を指定する

img 要素には、vertical-align: bottom を指定しておきましょう!

CSS
img{ vertical-align : bottom; }

4.15. マウスを乗せたときに画像を入れ替える

マウスを乗せたときに、画像を切り替えたい場所はたくさんありますね。ロゴやナビゲーション、フォームのボタンなど、使いどころはたくさんあります。マウスオーバーで画像を切り替える方法には、代表的なもので CSS スプライトがありますよね。

CSS スプライト

CSSスプライト用の画像

一見 2枚の画像にみえますが、つなげて 1枚の画像として保存します!

CSS スプライトでは、使用する画像は 1枚です。標準時の画像とマウスオーバー時の画像を、1枚にまとめておきます。そうすれば HTTP リクエストも一回で済みますね!マウスオーバー時の画像を別にした場合は、読み込みのタイムラグが発生して一瞬ちらつくこともありますもんね。

CSS
.sprite a{
  display : block;
  width : 450px;
  height : 300px;
  /* 画像を指定 */
  background : url(image01.gif) no-repeat left top;
  text-indent : -9999em;
}
  .sprites a:hover{ 
    /* 画像のポジションだけ変更 */
    background-position:left bottom;
}

<a> タグの背景のポジションを、hover 疑似クラスを利用して切り替えます。簡単ですね!

画像にマウスを乗せてみてくださいね!

HTMLに直置きした画像を隠して入れ替える:visibility:hidden

HTML に直置きした画像を、ホバー時に visibility プロパティを使って隠します。マウスオーバー時には、親要素である <div>タグに指定してある背景が表示されるという 2段構えです。

visibility:hidden を使った場合、display:none と違って、要素が消えても本来あるべき領域だけは確保されるので、後続の要素にレイアウト崩れなどの影響を与えません。

ちょっと面倒なんですけど、画像をHTMLに直書きしているので、alt 属性の値を音声ブラウザが読み上げてくれるとか、アクセシビリティ的にはこっちの方がいいのかなーとか思ったりもしています。

visibility:hidden HTML

画像をリンク、さらに div で囲みます。ちょっとマークアップが面倒ではありますね。

<div class="btn"><a href="#"><img src="image.gif" alt="送信ボタン" /></a></div>
visibility:hidden CSS
.btn{
  width : 150px;
  height : 60px;
  /* divに背景を指定 */
  background : url(image2.gif) no-repeat left top;
}
    .btn a{
        display : block;
        width : 150px;
        height : 60px;
    }
    
    .btn a: hover img{ 
      /* ホバー時に画像を隠します */
      visibility : hidden;
     }

いろいろと CSS に関してみてきましたが、こういうのはどんどん蓄積して、同じところでつまずかないようにしたいですね!またこんなのがたまったら、ブログにしたいと思います。

Comments

Thank you for the comment.