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

2017-07-23
 Yasu

『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;

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

　

　

　
　
　

Yasu
  • Yasu

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

bookhtml5noncategory