『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;
でも同じように作用する（効く）のになんだかなぁ、と思うのは、たんに私があまりわかってないからなのだろうか。
