「: hover」と「 : hover」の小さいようで大きな違い

『HTML5&CSS3 デザインレシピ集』(狩野祐東 著、技術評論社)という本を見ていたら「105 ボックス全体をリンクにしたい」という項目があり、やってみることにした。下記は例文にコピーの前に、コピー1行目を追加してみたもの。

 HTMLファイルの中身に下記のソースコードを入れ(ファイル名は「index.html」などにして)、
 
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>html5&CSS3デザインレシピ集 105 ボックス全体をリンクにしたい</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<a href=”contact.html”>
 <div class=”campaign”>
<h1>夏だから理想のボディへ<br>
入会金無料キャンペーン実施中</h1>
<p>資料請求・お問い合わせはこちら</p>
</div>
</a>
</body>
</html>

 CSSファイルの中身に下記を入れ込んだ(ファイル名は「style.css」にして、「index.html」と同じフォルダに入れるなど、PCの同じ階層に配置する)。

a {
text-decoration: none;
}
.campaign {
width: 50%;
margin: 0 auto;
padding: 20px;
background: #389bc2;
color: #ffffff;
text-align: center;
}
.campaign: hover {
background: #ff0033;
}

ところが、画面に現れたボックスにマウスをのせても(マウスオーバーしても)、ボックスの地色(文字の背景色)が変わらないのでなぜだろうと、いろいろチェックしてみたら、cssの最後の

.campaign: hover {
background: #ff0033;
}

.campaign:hover {
background: #ff0033;
}

としていなかったから、であった。

 違いは、hoverの前に空白があるかないかで、つまり正しくは

a {
text-decoration: none;
}
.campaign {
width: 50%;
margin: 0 auto;
padding: 20px;
background: #389bc2;
color: #ffffff;
text-align: center;
}
.campaign:hover {
background: #ff0033;
}

である、と。

.campaign: hover {

.campaign:hover {

の違いは小さいようで、大違いなのですね。

 このところプログラミングを勉強中で、『リーダブルコード より良いコードを書くためのシンプルで実践的なテクニック』(Dustin Boswell・Trevor Foucher 著、角征典 訳、オライリー・ジャパン)という本もちらちら見たりしていて、書けないながらもコードの読みやすさ、見やすさも少しは気にしているつもり。

 とはいえ、この場合の

.campaign: hover {

とhoverの前に少しアキをつくるのは、(私は読みやすいのでは、と思ったが)それは自分勝手な考え方だったのだろう。
 
 
 色を指定する部分のCSSは、

background: #ff0033;

でも

background:#ff0033;

でも同じように作用する(効く)のになんだかなぁ、と思うのは、たんに私があまりわかってないからなのだろうか。

 

 

 
 
 

投稿者:

Yasuhiro Okura

デザイナーを経て、クリエイティブディレクター、コピーライター、ライターに。「ベースボール」代表。広告&Web企画・制作、インタビュー構成をはじめ『深川福々』で4コマ漫画「鬼平太生半可帳」連載中。書籍企画・編集協力に『年がら年中長嶋茂雄』など。ラフスケッチ、サムネイル作成、撮影も。