こんにちは！
最近いろいろなクライアント様のウェブサイトの作成をしていると考える事があります。
それは、日々の作業をどうしたら素早く、しかも簡単に費用をかけずにできるのかという事です。
もちろん、この世の中には非常に便利で価値のある業務効率化のためのサービスやツールもたくさん存在していますが、便利だと有料だったり、無料でも使い勝手が悪かったりとなかなかいいなと思うものに巡り合えないような気がします。
さらには、WEBの制作現場からみると作成する作業のために効率化を図るツールはなかなか少ないように思います。
でも、そんな中でも現状の中でいかに効率よく作業をするかを模索すると、意外に身近に「こんな便利な機能があったのか！」と思うような事があったりします。それの良い例が、どんな人でもパソコンを立ち上げたら必ず使うであろう、インターネットを閲覧するソフトです。いわゆるブラウザです。ブラウザはほとんどの人はインターネットを閲覧する事以外に使う事はないとは思いますが、WEB制作者にとっては業務をこなす上ではなくてはならない存在です。その必須なソフトにはWEBを閲覧する目的以外にもとても大事な機能が備わっています。それは、このホームページがどんな構造で、どんなCSSで書かれているのかなどを知るための機能です。この機能がある事で、わざわざHTMLをダウンロードする必要がなく、いろいろな情報を知る事が出来て、なおかつ検証する事が出来るとても優れたツールです。
今回はGoogle Chromeに無料で、特別な設定を何もすることなく標準で備わっている機能「デベロッパーツール」で出来る様々な、WEB制作者にとって便利な使い方をご説明したいと思います。
もちろん、Google ChromeだけではなくFierfoxや他のブラウザでも似たような機能はありますが、今回はGoogle Chromeでご紹介をしたいと思います。
現在バリバリ現役でWEB制作のお仕事をされている方には当たり前の話ではありますが、初心者の方やこれからWEBの世界に足を踏み入れようと考えている方にはお役に立つと思います。
そんなお仕事ではない方も、どんな風にホームページが出来ているかを知ることができますので興味のある方は是非使ってみてください。意外な事が発見できるかもしれません。（笑）
Google Chromeのデベロッパーツールで調べる
デベロッパーツールの表示方法
「デベロッパーツール」は先ほども述べましたが、標準で備わっている機能で、特別何かを設定する必要もなくてすぐにでも使える機能です。
その表示の仕方は、当たり前ですが、まずchromeを立ち上げて調べたいサイトを表示します。
ブラウザの画面上で右クリックメニューから「要素を調査」を押します。
タグの構成を調べる
すると画面の下にHTMLのソースが出てきます。
少し知っている方なら、ソースくらいなら普通に「ソースを表示」というボタンを押せば、ソースが見れるのはご存知かと思いますが、この「デベロッパーツール」の良いところは、
タグがどの場所を記述しているかが、一目でわかるという点です。
タグの横にある黒い三角マークはタグの中にさらにタグが内包されていることを示しています。これをクリックして展開していく事で、その中にあるタグが表示されていきます。
そのタグをクリック選択すると、サイトのどこの部分を構成しているタグかが色が変わって表示されるのがわかると思います。
下の画像では、<header >の中の< div id=”inner-header” > がどの部分なのかを表してくれています。
タグを疑似的に増やしたり、減らしたりする事ができる
実際の現場では、クライアントからボタンを増やして欲しいなどの要望を聞く事が多々あります。すぐに増やせるデザインをしているのであれば全く問題ないのですが、増やすとデザインが崩れるなどの恐れがある場合、一度この「タグマネージャー」で疑似的に要素（今回はボタン）を増やしてテストしてみる事が可能ですのでこれは非常に便利です。
下の動画では、ナビゲーションボタンは全部で７つとなっています。
今回は試しに一つ増やして８つにして、尚且つボタン名をリクルートとしてみましょう。実際に行った作業が下の動画です。
お問い合わせのボタンの要素をコピーして、増やしたいところにペーストをします。
そのあと、新しくボタンの文字を変更しています。
上の動画でわかるように、お問い合わせの後にリクルートというボタンを疑似的に作成する事ができたのがわかります。
もちろん、あくまで疑似的ですので実際に増えるわけではありませんが、こちらで試してみてから、実際にソースを変更していけばいいので、見た目の変更をリアルタイムに検証できるという意味では非常に効率的です。
CSSも検証できる
タグだけではなく、この「デベロッパーツール」を使えば、CSSの検証も行う事が出来ます。タグにどのようなCSSが適用されているかを調べる事ができて、さらにこちらも疑似的に変更する事ができます。
画面右に、現在選択されている要素に適用されているCSSが表示されていますので、ここを変更する事でリアルタイムに検証する事ができます。
下の動画では、ボタンの文字色を疑似的に変えています。カラーコードを直接入れる事でも変わりますし、カラーピッカーも用意されています。さらに便利なのはサイトで使用されている色を抽出して適用する事もできますので、色を合わせたいという時には非常に便利な機能です。
また、新たなCSSを付け加えることも可能です。
このように即時にCSSも検証できるので、いちいちサーバーにアップロードをしてブラウザを更新して見るという作業が減り、格段に作業効率を上げる事が出来ます。
とくにPHPなどのWEBプログラムで構成されたWEBサイトではサーバーに上げてみないと、どんな要素がPHPによって書き出されていて、どのようなCSSが設定されているのかの検証がローカルでは見れない事が多いですので、そんな時にはとても重宝します。
スマートフォン・タブレットのシミュレートもできる
最近のWEBサイトは、レスポンシブデザインを採用している場合も多くてCSSも複雑なものになっています。
そんなときにもこのツールで簡単にスマートフォンやタブレットの見た目を確認する事が出来て、尚且つ検証する事ができてしまいます。
あくまでも、正確な物ではないのでおおよその見た目の確認程度とはなりますが、簡単に検証できるので効率がとても上がります。
下の画像の赤い丸で囲ったボタンをクリックします。
すると、画面がスマートフォン・タブレットでみた場合の見た目に切り替わります。
下の画像の赤丸の部分で、任意のサイズを設定したり、シミュレートする端末を選択する事ができます。
下の動画は実際に端末設定を変更してみたものです。
簡単にiphoneやipadに変更でき、見た目の検証ができる事がわかります。
無料でしかも標準で備わっている機能であるにも関わらずとても便利に使える事ができます。
まとめ
このように特殊なツールを用意しなくても、普段使いなれているブラウザでここまで色々な検証ができたり、シミュレートができたりしますので作成する側にとってはこの「デベロッパーツール」は手放せないツールだと思います。今回ご紹介しなかった機能もまだまだたくさんありますので、興味を持たれた方は是非この「デベロッパーツール」を活用して見てください。
コメント