6.確認から制作まで即使えるCSSの機能(2/2)

目次

デベロッパーツールのCSS制作続きです。

:hoverなどの擬似セレクタもリアルタイムで確認

マウスオーバーした際の挙動もデベロッパーツールで確認しましょう。
例として、テキストリンクにマウスが乗った際のCSSをテストします。
フッターのテキストリンクをデベロッパーツールの虫眼鏡ツールで選択します。

今はCSSが何も適用されていないためマウスが乗ってもテキストは変わりません。これではユーザーがリンクかどうかの判別がしづらいリンクになってしまっています。ここにCSSを適用させます。

CSSエリアをみると「footer ul li a」というCSSが適用されています。

このセレクタのhover擬似セレクタを作成します。前回同様プラスボタンよりセレクタを新規作成。
セレクタ名は「このaタグのマウスが乗っかった場合」なので「footer ul li a:hover」ですね。

現在はマウスが乗っかっていないのでグレーになっていますが、構わずプロパティを作成しましょう。
背景が濃いグレー、テキストが白くなるように設定しました。
他のフッターのリンク部分にマウスを乗っけると同じように変わります。

ここで確認し、色み等を変えたいときはCSSの値を変更しましょう。
濃い青にしてみました。

このようにhoverも難なく確認できることがわかりました。

強制的にhover状態にする

「マウスをのっけない状態でhoverになっているのを視覚的に確認したい」という時は強制的にhover状態にする機能があります。
hover状態にしたいタグを右クリック→「Force Element State」→「hover」で要素がhover状態になります。

消えた？ように見えるが実は…

一つ注意です。デベロッパーツールで別のタグを選択してからまた先ほどのタグを選択すると設定したCSSがなくなっています。

大丈夫です。よく考えてみると、先ほど設定したのはhover擬似セレクタでしたので「マウスが乗っかったら」でした。
なのでその状態を再現してあげます。
マウスを画面上の対象（今回は「HTMLについて」）の上に置きます。先ほど設定したCSSが反映されているのを確認します。

その状態で、キーボードの下や上カーソルでデベロッパーツール上の選択エリアを動かし、さきほどの元のタグに戻します。
すると、先ほど設定したCSSが表示されました。

作ったCSSはまとめてコピペでOK

今回と前回でCSSを幾つかつくりました。その作ったCSSを本来のファイルに保存します。
制作したのは
・p.special
・footer ul li a:hover
の2つです。

a:hoverもしくはp.specialを選択している状態でCSSエリアを見ると「inspector-stylesheet」等書かれています。ここをクリックします。

すると画面がもともと「Elements」でしたが「Sources」に切り替わりました。

ここに一括で保存されています。
まとめてコピーして、本来のCSSファイルに追加して保存すればOKです。

制作時においてデベロッパーツールの使い方

実際の制作時にはHTMLファイルとCSSファイルがあり、人によって作り方はそれぞれですが僕の場合HTMLファイルを作成してからCSSを一気に作りこみます。
HTMLはDreamweaverやSublime text等のエディタを使いますが、CSSはほぼデベロッパーツールだけで制作します。

試しにサンプルサイトのheadタグ内にあるCSSファイルを読み込んでいるlinkタグを消してみましょう。

素の状態に戻りました。
これからCSSを制作していく、と仮定して直接CSSを追加していきます。

ヘッダー部分だけ、試しになんとなくですがささっとCSSを作った感じだとこのような感じになりました。

ちなみにコードは以下です。

#wrap {
    width: 940px;
    margin: auto;
    padding: 0 10px;
    font-size: 0.75em;
    line-height: 1.833em;
}
header h1 {
    padding: 30px 0 40px;
}
header {
    margin-bottom: 40px;
}
header ul {
    border-top: 1px solid #9d9d9d;
    border-bottom: 1px solid #9d9d9d;
    height: 40px;
    padding: 20px 10px;
}
header li {
    float: left;
    width: 200px;
    margin-right: 40px;
}
header li.lastChild {
    margin-right: 0;
}

デベロッパーツールのいいところは、CSS自体のレイアウトをきれいに作ってくれるところです。ソースを見てみたらインデントや改行が整ってなくて見難いファイルという風にはならず、自動的にレイアウトを保ってくれます。ありがたいですね。

このように「ヘッダー」「コンテンツ」「フッター」といった部分ごとにCSSを書いていき、まとまったら一括コピペしてファイルに反映、という感じで行うことにより、リアルタイムにCSSを確認でき、崩れのない状態でファイルに保存することができます。

以上、デベロッパーツールにおいてのCSSの機能のご紹介でした。