CSSの基本から その2 (長田研アドベントカレンダー8日目)

こんにちは。
大城佳明@M1です。

CSSの基本から その2ってことで、今日はツールの使い方を書こうかと思います。
CSSをイジる上でいろいろなツールがあるかと思います。
CSSのコードをイジる場合、他の言語と違ってエラーを吐かないのが辛いです。
「あれ?CSS適応されてないんだけど!?」というようになることが多々あります(汗)
原因は色々とあります。
タイプミスだったり、セミコロン忘れてたり、ファイルの読みこむ順番だったり、組み合わせることで使えなくなるやつだったり。。。
(なにが原因がわからないのが一番辛い)

そんな時、ツールがあると比較的楽(精神的に)にCSSを書くことができます!
今回紹介するのは「Google Chrome Developer Tools」です。
FirefoxユーザとしてはFirebugを使うべきなのでしょうが、自分は開発するときだけChromeを使ってますw

まず、Google Chrome Developer Tools を開きましょう。
「表示」→「開発/管理」→「デベロッパーツール」
「option + command + i」でも開けます。
blog20131223

そうすると以下のようなウィンドウが現れることでしょう。
スクリーンショット 2013-12-23 6.10.11

(自分は横のほうが好きなので、横に持ってきます)

Developer Tools のソースコードにカーソルを合わせるとhtmlのどの部分かをみることができます。
2013122301

CSSをいじるのに大事なのは下の部分。
ここでCSSを変更することが可能なのです。
スクリーンショット 2013-12-23 6.39.58

例えば・・・
#main に background-color: red; を追加してみましょう。
スクリーンショット 2013-12-23 6.43.15
そうすると、以下のように一部背景が赤に変わりました。
2013122302

このようにCSSを追加するとにより、実際にどのように変化するかを見ることができます。
ちなみに、CSSのファイルが複数があったり、ファイル内の複数の場所で指定されている場合優先順位が付きます。
Developer Tools では上が一番優先度が高く、すぐに反映させたいならば一番上が良いです。
2013122303
ただし、element.styleはhtmlに直接書くことになります。
この部分だけ反映させたい!!って時に書くのが良いかと思います。
詳細はCSSの基本から(長田研アドベントカレンダー1日目)

もっと書く予定ですが、疲れてきたので残りは後で書くことにします。
以上。
あ、次は宜保さんに書いてもらいたいです(^^)

Leave a Reply

Your email address will not be published. Required fields are marked *