Chrome、Firefox、Safariを使ってHTMLとCSSの関係を学ぼう！

私が最初につくったホームページはHTMLというタグ言語とgifやjpg画像だけで出来ていました。

その後、CSSで全体の文字の大きさや色を決めることが多くなりました。

そして、ホームページはHTMLとCSSで作られるようになったのです。

そんな流れを追いかけてくると、HTML＋CSSということが当たり前の様に思うのですが、現在ではWordPressのようなCMS上でホームページを作る方が、主流なのかもしれません。

しかし、WordPressもHTMLとCSSの知識の有無で表現力が大きく変わります。
さらにJavaScriptやjQueryといった言語を知っていると、さらに面白いことができるでしょう。

このページでは、基本となるHTMLとCSSを理解するために視覚的な方法を用いて説明します。

Google Chromeの「検証」を使ってみよう

Google Chromeには「検証」という機能が用意されています。

もともとWEB開発のために用意されている機能なので、ホームページの裏側をみることができます。

では実際に使ってみましょう。

まず、ホームページ上の何処でもいいので、右クリックします。
するとプルダウンメニューが開かれますので「検証」をクリックしてください。

以下のような画面が表示されます。
これがホームページの内部（ソース）です。

このようにホームページの画面はHTMLとCSSによって出来上がっています。（レンダリングされています。）

ホームページの要素を検証しよう

この検証ツールは画面上の一部をさらに検証することができます。

「企業・個人、それぞれのブログ活用のススメ。ブログが果たす役割と目的、構築方法を知ろう！」というタイトルがどのように作られているのか検証してみましょう。

タイトルにマウスをあわせ右クリックし、「検証」をクリックします。

HTMLの表示

HTMLの該当箇所がハイライトします。
以下のようになっています。

<h1 class="entry-title post-title" itemprop="headline" rel="bookmark">企業・個人、それぞれのブログ活用のススメ。ブログが果たす役割と目的、構築方法を知ろう！</h1>

「h1」というタグでくくられていることがわかります。
「class=」の「entry-title post-title」がCSS IDです。

CSSの表示

CSS部分を見てみると検証したタイトルに効いているCSSが表示されています。

「.h1, h1」が「h1」タグに効いていることが分かります。

線が引いてある箇所は優先するCSSがあるために効いていません。

「font-size: 1.9em;」が消されているのは次の行の「clamp」が効いているためです。

CSSを変更してみましょう

CSSの「.h1, h1」をマウスオーバーするとチェックが入ります。（①）
同時にタイトル部分がハイライトします。（②）

CSSがタイトルに効いていることを示しています。

①に付いたチェックの上2つを外してみましょう。

タイトルを見てください。

小さくなっていますね。
このように、「検証」ツールを使えばCSSをシミュレートできます。

スマホをシミュレートしてみよう

スマートフォンのシミュレートも簡単です。
以下のトグルボタンをクリックします。

「検証」を終了しよう

「検証」を終了する場合は右端のクローズボタンをクリックします。

Firefoxの「ウェブ開発ツール」を使ってみよう

FirefoxにもGoogle Chromeの「検証」と同様の機能があります。

「ツール」→「ブラウザーツール」→「ウェブ開発ツール」をクリックします。

FirefoxでもHTMLやCSSが表示されます。シミュレートもできます。

Firefoxのソースチェック機能を使おう

Firefoxで最もよく使うのがページのソースです。

FirefoxにはHTMLをチェックしてくれる機能があります。

<div class=”container”>に対応する</div>がないので</section>に赤いアンダーラインが引かれています。

※以前は赤の太字になっていて分かりやすかったのですが、あらためてやってみると点線のアンダーラインになっていました。ひょっとしたらどこかに設定があるかもしれません。

AppleのSafariにも便利な機能があります。

「開発」がそれです。

「開発」を有効にしよう

「開発」を表示するためには「環境設定」→「詳細」画面で「メニューバーに”開発”メニューを表示」チェックボックスをオンにします。

その後、メニューバーに「開発」表示されます。

レスポンシブを検証したりソースを確認したりできます。

左サイドバーの「イメージ」をクリックすると使用されている画像を確認できます。

「スタイルシート」から、見たいCSSも表示できます。

safariで最も便利なのは「スクリプト」です。

圧縮されたスクリプトもきれいに整列して表示してくれます。

まとめ

以上、ブラウザーでHTMLやCSSを確認しました。

さらに、様々なブラウザーでWEB開発のための支援機能を提供していることもみてきました。

私はGoogle Chromeをメインで使用していますが、Firefoxも同等の機能がありますので、好みで使ってみてください。

最後に私が各ブラウザーのツールをどのように使用しているか、まとめておきます。
参考にしてください。

ブラウザー名称からダウンロードページにリンクしています。
SafariはOS標準ですのでダウンロードページでは古いものしか、ダウンロード出来ません。

最も利用しているのはChromeです。
開発にチャレンジしてみようという方はChormeの「検証」ツールを使いこなしてください。