CSSで作る画像のロールオーバー

CSS Happylife様の
Javascriptを使わずにやるimg要素のロールオーバーサンプル
のエントリーを拝見しまして、
ロールオーバーの新しいやり方を発見したので、
今まで使っていたやり方もあわせてご紹介します。

1. 画像をCSSの背景として指定する場合(文字ナビゲーションなし)
2. 画像をCSSの背景として指定する場合(文字ナビゲーションあり)
3. 画像をimgタグでHTMLにはりつける場合

セレクタの指定方法-5年目の真実その２-

前回、clearfixのお話をしましたが･･･
まだ、私の知らない真実があったようです。
しかも超初歩的なこと。

今まで、
<div id="main">
  <ul>
    <li id="here">いち</li>
    <li>に</li>
    <li>さん</li>
    <li>よん</li>
    <li>ご</li>
  </ul>
</div>
こういう場面において
id="here"に対してCSSで指定をしたいときは

#main ul #here { プロパティ; }
と書いてごまかしてきたが

実は
#main ul li#here {プロパティ;}
って書けばいいんですよね！？

今までずっと、このくっつける記述方法を知らなくて
なんか違和感あるなーって思ってたんですが、

#main ul li #here （#mainの中のulの中のliの中の#here）じゃなくて
#main ul li#here （#mainの中のulの中の、#hereが指定されてるli）ってことなんですね！？

もうなんだか泣きたいです。

CSSのガイドライン

参照元 ： taichi kaminogoya様

最近、自分以外の人のCSSをじっくり見る機会があって、
その時に思ったのは
「HTMLの書き方は、多少の差異はあれどあまり個人差はないが、
CSSは、書き方やファイルの作り方に個人差があるのではないか？」
ということです。

今まで、他の人の書いたCSSを研究してこなかったわけではありませんが、
顔が見える人（つまり知人）のCSSを見て比較する機会がほとんどなかったので、
CSSの書き方もその人の性格を表すんだろうか？なんていうことも思っています。

さて、本題ですが、
他人のことが気になると、自分のことも気になるわけで、
私はCSSを書く際にどうやってファイルを分けているのか？
セレクタはどういう書式で書いているのか？プロパティはどうなんだろう？
が気になり、

以下で現在の自分の作り方をまとめてみました。

clearfix-5年目の真実-

Web制作を始めて６年以上、
CSSをさわり始めて５年は経つでしょうか。

floatを使うたびに、最後に以下のおまじないを入れなければならず、
空のdivを使わなければならない自己嫌悪と共に生きてきました。
これ↓
 <div style="clear: both"></div>

先日、研究室で2005年には発売されたであろうWeb雑誌を見ていると、
clearfixなるコードが記述されていました。

そのときは、「なんかおもしろそうだ」程度で全く気に留めていなかったんですが。
友人に話を振ってみると、現在ではもう定番になっているものだそうで…。
はい、ごめんなさい、私は今の今までずっと <div style="clear: both"></div>で過ごしてきました。

というわけで、clearfixについてのメモ。

情報元：norisfactory様

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
 * html .clearfix {height: 1%;}
 .clearfix {display: block;}
/* End hide from IE-mac */


これがclearfixなんですね！
今までずっと<div style="clear: both"></div>を使ってきた私って何なんでしょう！
仕様だと思って諦めずに、調べてみないと解らないこともあるんですね。

メモおわり。