blockun dialy

同人ゲーム制作サークル「SaNa」のメンバーが書くゆるーいブログです。

簡単なWebページをつくってみる #3

まだ扇風機で粘ってます。 こんばんは、soraです。

この度は同人界隈向けに、なんとなくこんな風に作ってるよーというのを発信すべく、定期的にブログで紹介してみようかということになりました。の第5回です。

今日は前回に引き続き、HTMLに加えてCSSの話をしていきたいと思います。

関連ブログ

目次

さて、これまでHTMLやCSSのコーディングについて書いてきましたが、今日は少し趣向を変えてみようと思います。 コードを書くのはいいですが、うまく動いていないときに「どうしてかなー」とか、「どうすればうまく動くかなー」 というときがありますね。俗に言うデバッグ作業というやつです。
Webのコーディングをするときは、一般的に、ブラウザについている開発ツールを使ってデバッグを行います。
今日は自分がよく使っているGoogleChromeを使って説明していきます。

Google Chrome

言わずと知れた、Googleが作っているブラウザですね。いろんなプラットフォームに提供されていて便利ものです。 さて、普段はWebブラウジングに使うChromeですが、すごいデバッグツールを持っていることをご存知でしょうか。

Developer Toolsの起動方法

メニューバーからは[表示] > [開発/管理] > [デベロッパーツール]を選択してください。自分はMacを使っていますが、 おそらくWindowsでも同じだと思います。もしくは、ショートカットキーで[Command + Alt + I]で起動できます。 Windowsの場合は[Ctrl + Alt + I]です（のはず…）。

f:id:moshisora:20160714230221p:plain

レンダリングの結果を確認する

DeveloperToolsが開いたら、一番上の方に画像のようなタブが並んでいると思います。詳細はこの記事では省きますが、 それぞれWebのデバッグに便利なツールが搭載されています。どんなことができるのかは後の節で紹介します。

f:id:moshisora:20160714230234p:plain

ここでは、現在表示しているページが、どういったHTMLで書かれているのかを確認できるElementタブを見ていきます。Elementタブを選択すると、下の画像のように、このページを構成するHTMLの現在の状態を確認することができます。あえて現在の状態といったのは、JavaScript等でページの構成を変更した場合、このHTMLの変更はリアルタイムにここに反映されるためで、まだ取り扱ってはいませんが、JavaScriptでDOMの書き換え等を行う際には便利な機能です。

f:id:moshisora:20160714230242p:plain

また、その場でHTMLを書き換えることもできるので、毎回エディタに戻って確認しなくても、少しここで編集して表示を確認してから本反映する、みたいなこともできます。ただし、変更は一時的なもので、読み込みもとのファイルは変更されないので、ここだけ編集して満足せず、最終的にはファイル側を編集しましょう。

CSSを変更してみる

CSSを反映し始めると、見た目を確認して、思った通りにできていないところを探して、またコードを変更して、確認して…という 作業になりますが、これがなかなか面倒です。が、ChromeのDeveloperToolsを使えばこれもブラウザ上で変更して確認する ことができます。鋭い人はお気づきかもしれませんが、ElementタブのHTMLが表示されている横に、現在反映されているCSSの一覧があります。

f:id:moshisora:20160714230250p:plain

ここの値を直接変更すると、リアルタイムにページ上のコンテンツに反映されます。また、要素には最終的にたくさんのCSSプロパティが 反映されますが、Computedタブを開くと、選択中の要素が最終的に何のプロパティにどれだけの値が設定されているかを確認することが できます。便利ですね。

要素を選択する

ここまでやってみて、いちいちコードを変えなくてもブラウザ上でチェックできるのはなかなか便利だと思う反面、HTMLからデバッグしたい 要素を探し出すのはなかなか大変ではなかったでしょうか。DeveloperToolにはこういうときに便利な機能も搭載されています。 インスペクタの左上のあたりにあるボタンをクリックします。

f:id:moshisora:20160714230259p:plain

その状態で、ページ内のコンテンツにカーソルを当てると、要素の大きさや反映されている margin padding 等の大きさを確認することが できます。また、要素をクリックすると、その要素が選択状態になるので、上記で説明したCSS等のデバッグも簡単にできます。便利！

ショートカットはWindowsでは[Ctrl + Shift + C]、Macでは[Command + Shift + C] です。よく使うので覚えておくと楽です。

他にもこんな機能

デベロッパーツールには他にもたくさんのデバッグルールが用意されています。

  • Console：JavaScript等の実行結果やエラー出力等を確認できる
  • Sources：サイトに含まれるHTMLやCSS、JavaScriptなど、ページを構成するファイルを確認できる
  • Network：Webページを配信しているサーバとブラウザの間でどういう通信が行われているのか確認できる
  • Timeline：ページを表示して、JavaScript等のプログラムを実行するのにかかった時間やその経過を確認できる
  • Resources：Cookie、LocalStrage等の保存領域の内容を確認できる

もちろん、自分のサイトだけではなく、どんなサイトでもこれを使えばどういうファイル構成でできていて、 どういう内容のコードが書いてあるか、一目瞭然です。世界中で公開されているあらゆるWebサイトの コードはこれで確認することができて、つまり教材は無限大に存在するので、興味がある人は是非他の方の サイトも覗いてみましょう。

（ときどき、コメントで面白い芸を見せているサイトもあるので面白いです）

まとめ

  • GoogleChromeのDeveloperToolsを使ってWebページのデバッグをすると便利
  • HTMLやCSSをその場で書き換えて表示確認ができる
  • DeveloperTools上で変更しても、読み込み元のファイルは変更されないので注意！