サイトのCSSを手直ししながら勉強する方法

あんまり人のことは言えないですけど、未だにマークアップがひどかったり、CSSがうまく使えてないサイトとか多いですよね。
WordPressやMTを使っていて、テーマファイルをそのまま使っている場合とか、特にそういったキレイさに関して無頓着だったりする場合も多い（あ、うちかそれはｗ）ので、いかんともしがたいところなんですけど。
どうやら、マークアップやCSSを勉強する方法がいまいちわかっていない人が多い、という話を小耳に挟んだので、素人さん向けにコピー（別の言い方がよければインスパイア、もしくはリニューアル、リデザインでもいいですけど）の簡単なやり方を書いてみようと思います。
例えば、社内で別の人が作ったサイトについて、自分ならこうするね、みたいなのを作ってみるとか、そんな感じの場合に使えます。

手順

ターゲットのページをブラウザで表示する
ページを名前をつけて保存する（ページだけ）
保存したページをちょっと見てみる
保存したページをちょっと加工する
CSSファイルをつくる
表示して確認する

ひとつずつ見てみる

1.ターゲットのページをブラウザで表示する

どこでもいいので自分が参考にしたいサイトをブラウザで表示するだけ。大きいサイトはたくさんのファイルを使っていることが多いので、適度なサイトを選ぶといいでしょう。
もちろん、対象とするページならどこでもＯＫです。

2.ページを名前をつけて保存する（ページだけ）

例えば Firefox なら、ファイルメニューに”名前を付けてページを保存”というサブメニューがあるので、見ているページをローカルのハードディスクに保存しましょう。この時、ページだけ（htmlだけ）保存すれば大抵の場合は問題ありません。以降、c:/test/test.htm として保存したものとして書きます。
IEの場合だと、単一のファイルで保存しようとしたり、画像も含めてどうこうしようとしますが、htmlだけあればとりあえずいいです。

3.保存したページをちょっと見てみる

保存したhtmlをダブルクリックするなどして、ブラウザで見てみましょう。マークアップの状態によりますが、表示される画像と、表示されない画像があるはずです。表示されない画像が数個だけの場合は、無視するか、次項のようにちょっといじりましょう。
また、CSSが適用されていないかもしれません。その場合も次項のようにいじりましょう。

4.保存したページをちょっと加工する

前項で表示されない画像や、適用されないCSSがあるのは、リンクが正しくないからですね。（サーバに置いてあったファイルをローカルに持ってきたのだから相対位置が変わったわけです。）
なので、これをさくっと修正しましょう。１行です。

<base href="元のページのURLからファイルパスを抜いたもの">

例えば、http://example.jp/test.htm をローカルに保存した場合（c:/test/test.htm）は、http://example.jp/ を hrefに書けばＯＫです。
http://example.jp/test/test1/test2/test3.htm などの場合は http://example.jp/test/test1/test2/ になるでしょう。適切な記述場所が判断できない場合は、要素の最初の子要素にするといいです。の直後に書く、ということです。
要はローカルファイルから見て、基準となるURIを元のページのURLに見せかけるわけです。これで大抵の場合は元のページと同じように表示されるようになったはずです。
もしうまくいかなかったらお近くの知ってる人に聞くか、コメント欄で聞いてくれてもＯＫです。

5.CSSファイルをつくる

次はCSSファイルを追加します。もちろん、既にあるCSSファイルを同様の方法でダウンロードしてきて、後ろに追記するのもいいのですが、面倒ですよね。
せっかくだから外部ファイルを１つ、新しく作ってしまったほうが楽です。どうせ１行です。
c:/test/mytest.css としてファイルを作り、

body {
    color:#fff !important;
    background-color:#000 !important;
}

とでもしましょう。
その後で、保存していた test.htm の中に、

<link rel="stylesheet"  type="text/css" href="ローカルに置いたCSSのパス">

と記述しましょう。パスはブラウザで表示しているURLをコピーするといいでしょう。file:///C:/test/test.htm となっていたら、file:///C:/test/mytest.css みたいになりますね。
適切な記述場所が判断できない場合は、要素の最後の子要素にするといいでしょう。の直前に書く、ということです。
ちなみに、前項で要素を書いた場合は、相対パスは使えないので、href="./mytest.css" としても動かないので注意が必要です。

6.表示して確認する

保存したページをF5などでリロードしてみたら、背景は黒、文字は白、になりますね。
ならなかった場合は、もう一度記述を見直してみましょう。スペルミスにも注意です。
あとは mytest.css に好きなように追記すればいいわけです。

追記するCSSの書き方ポイント

1.CSSが反映されない

わかってる人には当たり前ですが、外部CSSは優先度が低いため、このやり方で記述した場合、プロパティが反映されないことがあります。
その解決方法がいくつかあります。

!Important キーワードをつける: mytext.css に記述したように !important キーワードを使用すると、適用優先度が上がるので、強制的に適用できます。
優先度があがるようにセレクタを詳細化する: important したくない場合などは、セレクタ部を詳細化することができます。.main{} などを、div.main{} とすると詳細度が上がるので元のCSSの記述によっては上書きできます。
その他: もうちょっと慣れたらにしましょうｗ

ちなみに、インラインで指定されたスタイルも外部CSSファイルから上書きすることができます。調べてみましょう。

2.できるだけピンポイントで修正する

セレクタの詳細化を考えることは、マークアップを理解する早道です。逆にマークアップが理解できていないのにセレクタを詳細化することはできません。
CSSの修正は、マークアップありきですから、保存したHTML（や既存のCSS）には手を加えないで出来ること、を十分考えましょう。最初の子要素や最後の子要素、特定のアトリビュートを持つ要素などを選択するセレクタを、自分で調べて理解することが、全体的な理解を助ける早道です。
その過程において、マークアップに対する改善点が見えてきたら、それを資料化することで、より一層理解が深まるでしょう。

3.ツールを活用する

どこの世界にも完璧なものはありませんが、Firefox の Firebug プラグインは、CSSとマークアップの理解のために十分パワフルです。調べたい部分を選択し、右クリックから”要素を調査”するだけで大抵のことがわかります。

4.遊び心

これを仕事でやる場合には（もちろん本職の人はこんなこと言われなくてもわかっているはずですが）、対応UAをきちんと考えながら対処する必要があります。
が、CSSの勉強をするだけなら、Firefox、SafariやOperaといった、CSS3が使えるブラウザをテストしてみるのも楽しいです。
独自拡張を使いすぎるのは考え物ですが、CSS3を先行して取り込むのは、遊び心や、サイトへのおしゃれとして有効です。勉強は楽しくできないと意味ないですしね。
お勧めは、box-shadow、border-radius（今は独自拡張のプレフィックスが必要）、opacity、text-shadow あたりでしょうか。あってもなくても古いブラウザに影響を与えにくく、最新のブラウザではちょっとおしゃれに見える、程度の遊び心を理解しておくことは、適用箇所を考えたり、使用可否を検討したりする過程で役に立つでしょう。

5.iPhone 対応

別の記事にゆずりますが、現在のサイトを iPhone 向けにデザインしなおす、というのをこのやり方で作業すると、既存のサイトをごちゃごちゃいじらずに対応することができます。勉強してみるといいでしょう。