ビジネス向けWEBサイトをつくる

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

本ページはプロモーションが含まれています

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

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

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

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

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

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

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス(事業案内)」
SEO機能(metaタグ、OGP、高速化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

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

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

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

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

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

google chrome

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

google chrome 検証
赤枠の意味
  • 左:表示画面
  • 中央:HTML
  • 右:CSS

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

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

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

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

google chrome 検証

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

HTMLの表示

検証 HTML

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

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

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

CSSの表示

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

検証 CSS

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

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

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

CSSを変更してみましょう

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

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

検証 CSS変更

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

検証 CSS変更

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

CSS変更 結果
CSSのチェックを外す前
CSS変更 結果
CSSのチェックを外した後

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

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

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

google chrome 検証スマートフォン

「検証」を終了しよう

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

google chrome 検証終了

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定(絵文字読み込み・コード最適化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

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

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

Firefoxの「検証」

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

Firefoxの「検証」

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

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

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

Firefoxの「ウェブ開発ツール」ページのソース

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

Firefoxの「ウェブ開発ツール」ソースチェック結果

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

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

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス(事業案内)」
SEO機能(metaタグ、OGP、高速化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

Safariの「開発」を使ってみよう

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

「開発」がそれです。

「開発」を有効にしよう

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

Safariの「開発」を有効にする

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

Safariの「開発」を使う

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

Safariの「開発」ソース

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

Safariの「開発」イメージ

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

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

Safariの「開発」スクリプト

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

まとめ

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

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

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

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

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

ChromeCSSのシミュレート
CSSのセレクター名称の確認
FirefoxHTMLのチェック
SafariHTMLや画像の表示
Scriptコードの確認

CSSのセレクタ

.h1, h1 {

font-size: 1.9em;

font-size: clamp(1.4em, 4vw, 1.9em);

margin-top: 0.67em;

margin-bottom: 0.67em;

}

上記の「.h1」「h1」がセレクタです。「.h1」がクラスセレクタ(.が付いているもの。HTMLではclass=でセレクター名称を指定します。)「h1」が要素型セレクターです。
#が付いているものをIDセレクターといいます。(HTMLではid=でセレクター名称を指定します。)

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

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス(事業案内)」
SEO機能(metaタグ、OGP、高速化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

プロモーション

戦略的WEBサイト構築方法

戦略的WEBサイト構築方法
WEB担当者にオススメ

WEBサイトをビジネス戦略のPDCAサイクルに組み込むための考え方と、サイトを内製化する方法を分かりやすく解説します。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

one × 5 =

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUT US
lin記事を書いている人
はじめまして。「lin」です。クリエイティブディレクター兼グラフィックデザイナーとして活動しています。おかげさまで、キャリア25年以上になりました。「Theme3」は、私が企画デザイン事務所スラッシュディーの仕事で得たノウハウを公開します。
※以下は私が活動している企業情報にリンクしています。