初心者必見！ウェブデザイン時間短縮。Chromeでコードを確認する方法。

ウェブデザインをする時に、人が作ったテンプレートを編集しようとすると、どこにどれが書いてあって、クラス名は何が定義されているのか？この要素のスタイルがどこに書かれてるのか？など色々と分かりづらい事があると思います。特に初心者の方はマージンを変えるだけでもひと苦労です。

でもグーグルのブラウザ　Chromeを使えば、一瞬でどこに何が書いてあるのかを確認することができます。「この要素のスタイルは、どのファイルの何行目に書いてある」ってことまで分かっちゃうので、あっと言う間に目的の場所にたどり着けます。

そこでこのページではグーグルのChromeを使って、ウェブデザインの時間を短縮する方法をご紹介します。

テンプレート編集の難点

ブログやホームページをデザインする時は、基本的にテンプレートを使ってそれを編集して作っていくことになります。０から作るのも楽しいけど、超絶メンドクサイし時間も掛かるから、テンプレートいじって好きなデザインにしていくのが楽で早いです。

でもそこで問題になるのが、テンプレートは「自分で書いてない」ってことです。

自分で０からマークアップしてコードを書いてたら、どの辺りにどのコードが書いてあって、IDやクラス名は何にしたかってことが分かるんだけど、テンプレートは他人が作ったものだから、どれがどれか分かりづらいってのが難点なんです。

スタイルを変えたい要素が記述してあるファイルを探して、クラス名を確認。次にCSSからそのクラス名が定義されている場所を探して、編集…。って具合で、ちょっと見た目を変更するだけでも大変だったりします。特に初心者の頃はね。

そこで便利なのが、『ブラウザの検証機能』です。

主要なブラウザにはデベロッパーツールとしてこの機能はあると思いますが、今回は「グーグルのChrome」を使って説明していきます。

Chrome（クローム）でサイトのコードを確認する方法

１．まずはChromeで編集したいページを表示させる。

HTMLで書かれているページならそのままファイルをクロームで開けば見れますし、既にサーバーにアップされているならそのページのURLにアクセスします。

PHPで書かれている場合は、MAMPなどローカルサーバーを使って、ページを開いてください。

っとまぁ、当たり前な説明はこのぐらいにして・・・

２．調べたい要素の上で右クリック。

ページが開いたら調べたい要素をドラッグするか、マウスカーソルをその要素の上に持って行き、右クリックします。

調べたい要素の上で右クリック

そしたら↑こんな感じで『検証』ってメニューがあるから、それをクリックです。すると↓こんな風に画面が分割されて、コードが表示されます。

画面が分割されコードが表示される

３．選択した要素のコードがハイライトされて、それに関連するCSSも表示される。

上手く要素を選択できていれば、その要素が書かれているHTMLコードがハイライト表示されます。これでクラス名なんかが一発で分かります。

しかも、その要素に適応されているCSSも表示されて、どのファイルの何行目に書いてあるかまでわかるから、後はそこへ行って編集するだけです。

デザインも編集できる（簡易的に）

あとこの検証機能で嬉しいポイントが、実際のファイル（コード）を触る前にデザインの確認ができることです。

適応されているCSSの部分をクリックして書き換えると、その場限りで編集したCSSを適応してくれます。もちろんファイルを直接編集したわけじゃないから、リロードすれば元に戻ってしまうけど、コードを書き換える前にデザインの確認として、簡易的に編集できるのは嬉しいポイント。

※ここまでの操作を簡単な動画にしてるから、そっちを見てもらった方が早いかもです。☟

レスポンシブデザインの確認も簡単

今の時代、スマホ対応は必須です。僕が運営している情報サイト（今は放置中）では８~９割がスマホからのアクセスです。

もちろんこれは扱う情報にもよるから、一概には言えないけど、スマホからのアクセスが増えてきているのは確か。だからスマホでもしっかりと読みやすいようにデザインされているのが絶対条件になってきています。

つまり、これからウェブデザインをする場合は、しっかりとスマホに対応したデザインを作る必要があるわけです。

パソコン用とスマホ用という感じで、そもそもファイルを別けてデザインする方法もあるけど、CSSでレスポンシブにする方がファイルの数も少なくてスッキリするし、編集も楽だから、僕はサイズに応じて要素の位置やサイズが変化するレスポンシブデザインを採用することが多いです。

ってことで、レスポンシブにデザインする上で欠かせないのが、これまた「検証機能」です。

Chromeのデベロッパーツールには自由に画面サイズを変更できる機能もあるから、これを使えばデザインがものすごく捗ります。

確認方法

使い方はメッチャ簡単です。デベロッパー画面の左上辺りに こんな感じでスマホとタブレットかな？のアイコンがあるからそれをクリックします。

そしたら、ページ画面右に画面サイズの調節トグルが出現するから、後は自由にサイズを変更するだけです。

画面上の『Responsive ▼』って表示をクリックすれば主要なデバイス名が表示されて、その画面サイズに自動で調整してくれたりもします。

※こちらも操作に関しての動画を作ってるので、そっちを見たほうが分かりやすいと思います。☟

ってな感じで、グーグルのブラウザ、Chromeを使えば、ウェブサイトのコードが確認できて、デザインのスピードが圧倒的に早く、簡単になるはずです。

まとめ

ウェブサイトをデザインする際はテンプレートを編集すると楽で早いけど、人が作ったモノだから分かりづらい部分もある。その不満を解消するのが「クロームの検証機能」。

これを使えばテンプレート編集が圧倒的に楽になって爆速で生産性上がりまくりになることは間違いないです。

初心者の方はこの方法を使ってテンプレート弄りまくって、デザインに慣れていきましょう。