今回はサイトのデザインをカスタマイズするときに便利な小技を紹介したいと思います。
web制作に携わる人なら当たり前に使っているツールなので、これから独学でHTMLやcssを始めようとしている人もぜひ使ってみてください。
無料で使えるWebページ解析ツール「デベロッパーツール」
今回紹介するツールは、ブラウザにもともと備わっている機能なので誰でも無料で使うことができます。
その名も「デベロッパーツール」。
web制作には欠かすことのできない一番重要なツールといっても過言ではありません。
主にできることは、
- Webページのソース（HTML）が覗ける
- レイアウトに使われているcssが覗ける
といった内容です。
現在閲覧中のWebページのソースが覗けるという非常に便利なツール。
自分が管理しているサイトだけでなく、web上にあるすべてのページのソースが覗けるというのがポイントです。
デベロッパーツールの主な使い道
デベロッパーツールを利用するのは例えばこんなシーンがあります。
- 自分のサイトをカスタマイズするとき、ブラウザ上でcssプロパティの値を追加・変更しながら試す
- おしゃれな他サイトのデザインが、どんなHTMLとcssで作られているのかを勉強する
ブラウザ上でcssプロパティの値を追加・変更できる
デベロッパーツールを使うと、ブラウザ上で閲覧中のサイトのcssプロパティを追加・変更することができます。
これはいわばデザインのテストができるってこと。実際のcssファイルを更新しなくても、その場で変更後のレイアウトを簡単に確認できます。
１からサイトを作るときは「Dreamweaver」などのコーディングソフトを使うのが普通ですが、WordPressのカスタマイズなど、すでに完成したサイトのデザインをちょっと弄りたいときなんかにはとても重宝します。
他サイトのデザインを見て勉強できる
そしてなによりすごいのが、他サイトのデザインを覗いて勉強ができるというところ。
HTMLとcssの基礎がある程度あれば、あとは他のサイトのデザインを見ながら直に学ぶことができるってわけです。
最初の頃はデベロッパーツールを使っていろんなサイトを見ているだけでも良い勉強になります。
独学で勉強する人は実践的にサイトを作ることが難しいので、まずはデベロッパーツールで値をいじりながらレイアウトする仕組みに慣れていきましょう。
デベロッパーツールの使い方
簡単にデベロッパーツールの使い方も紹介しておきます。
ブラウザによって多少違いますが、chromeの場合は右クリックより「検証」を選択すると表示されます（Firefoxは「要素を調査」、IEは「要素の検査」）
こんな感じ。
自分が気になる箇所にマウスポインターを当て右クリックすることで、ちょうどその箇所のHTMLに焦点が当たります。
また、表示されたHTMLのコードにマウスポインターを当てると、ブラウザ上で分かりやすくその要素に色付きのスポットが当たるようにもなっています。
色の意味は下記の通り。
- 青・・・要素
- 緑・・・要素内の余白（padding）
- オレンジ・・・要素間の余白（margin）
レイアウトで余白を作るときに使った「paddingプロパティ」と「marginプロパティ」がパッと見で分かるようになっています。これもなかなか便利です。
cssプロパティの値を変更する方法
プロパティの値を変更したいときは、該当する値をクリックして書き換えます。
すぐにブラウザ上のデザインに反映されるのでいろいろ試してみてください。まずは余白や文字のサイズ、色を変更するところからやってみましょう。
cssプロパティを削除・追加する方法
プロパティを削除してみたいときは、左にあるチェックマークを外すだけでOKです。
cssが何層にもわたって記述されている時は、この１か所のチェックマークを外しても別のcssが機能してブラウザ上で変化が確認できない場合もあるので注意しましょう。
その場合は下の方に同じcssプロパティが記述されていないか確認してチェックマークを外せばOK。
逆にプロパティを追加したいときは、該当するセレクタ内部をクリックすることで追加することができます。
指定するセレクタの記述によってcssが適用される優先順位が変わることも理解しておきましょう。一番上の「element.style」に追加すると確実に追加できます。
デベロッパーツールの表示をカスタマイズする方法
右上のボタンよりデベロッパーツールの表示方法をカスタマイズすることもできます。
４種類あるので自分が見やすい形に設定してみてください。
以上が基本操作です。
他にもHTMLコードのエラーを確認したりする機能もあったりしますが、あとは使いながら慣れていくのが良いと思います。
デベロッパーツールはweb制作初心者にこそ使ってもらいたい
そんなわけで今回はデベロッパーツールの紹介でした。
webページの中身が覗ける上にサクッとcssに触れることができるので、web制作初心者にこそ使ってみてもらいたいですね。
僕も最初はこれでひたすらいろんなサイトを見て吸収してきましたし、もちろん今でもよく使ってます。
ぜひサイトのカスタマイズにお役立てください。
