6日でできる 新HTML&CSS入門｜Chromeのインストール

6日でできる 新HTML&CSS入門｜Chromeのインストール

Googleの公式情報に沿って、Chromeの導入からWeb制作での活用までを整理しました。

Chromeを準備して、作ったWebページをすぐに確認できる制作環境を整えよう。

HTMLを使ってWebページを作成するときは、コードを書くためのエディターだけでなく、完成したページを表示して確認するためのWebブラウザも必要です。

HTMLファイルの中には、見出し、文章、画像、リンクなど、Webページを構成するための情報が記述されています。しかし、HTMLファイルを見ているだけでは、実際に利用者の画面でどのように表示されるのかを十分に確認できません。

そこで、作成したHTMLをWebブラウザで開き、文字の表示、画像の大きさ、リンクの動作、ページ全体の構造などを確認します。

Web制作の学習環境として利用しやすいブラウザの一つがGoogle Chromeです。一般にはChromeという名前で呼ばれています。

Chromeには、Webページを閲覧する基本機能に加えて、HTMLの構造や通信状況などを詳しく調べられるChrome DevToolsが標準で組み込まれています。DevToolsを利用すると、表示中のページを一時的に編集したり、問題の原因を確認したりできます。

Windows 11にはMicrosoft Edgeが既定のWebブラウザとして用意されていますが、Chromeを使用したい場合は利用者が追加でインストールします。

ここでは、ChromeをWeb制作に使用する理由、Windows 11へインストールする手順、インストール後の設定、Chrome DevToolsの開き方、問題が起きたときの確認方法までを順番に解説します。

WebブラウザはHTMLを画面へ表示するソフトウェア

Webブラウザは、HTMLなどのデータを読み取り、人が閲覧しやすいWebページとして画面へ表示するソフトウェアです。

HTMLには、文章のどの部分が見出しなのか、どの部分が段落なのか、どこに画像やリンクを配置するのかといった情報が記述されています。

ブラウザはその内容を解析し、画面上に見出し、文章、画像、一覧などを配置します。

HTMLのコードを修正した後は、ファイルを保存し、ブラウザで再読み込みします。

この作業を繰り返すことで、入力したHTMLと実際の表示結果の関係を確認できます。

Chromeとは

Google Chromeは、Googleが開発、提供しているWebブラウザです。個人のパソコンへ無料でダウンロードして利用できます。

Windows、macOS、Linuxなどのパソコン向けに提供されているほか、AndroidやiPhone、iPadなどでも利用できます。対応するOSや最低動作要件は更新される可能性があるため、インストール前に公式の案内を確認することが大切です。

Chromeは、一般的なWebページの閲覧だけでなく、Web制作中の表示確認にも利用できます。

ただし、Chromeで正しく表示されたからといって、すべてのブラウザで完全に同じ結果になるとは限りません。

Webページを公開するときは、Chromeだけでなく、Microsoft Edge、Safari、Firefoxなど、利用者が使う可能性のある複数のブラウザで確認することも大切です。

ChromeをWeb制作に使う利点

Chromeには、Web制作を進めるときに役立つ機能が用意されています。

Chromeは更新機能を備えており、新しいバージョンが利用可能になると、通常はバックグラウンドで更新を準備します。更新を完全に反映するには、Chromeの再起動が必要になる場合があります。

Web制作で特に重要なのがChrome DevToolsです。

DevToolsでは、ページ内の要素を選択してHTMLの構造を確認したり、読み込まれているデータやエラーを調べたりできます。

ChromeとMicrosoft Edgeの関係

Windows 11では、Microsoft Edgeが既定のWebブラウザとして利用できます。

そのため、ChromeをインストールしなくてもWebサイトを閲覧したり、HTMLファイルを開いたりできます。

Chromeと現在のMicrosoft Edgeは、どちらもChromiumという技術を基盤として使用しています。基本的なWebページの表示には共通する部分がありますが、ブラウザごとの機能や設定、更新時期などがすべて同じというわけではありません。

どちらか一方だけを正しいブラウザと考えるのではなく、複数の環境で確認するための選択肢として利用するとよいでしょう。

図1：Chromeを使ったWeb制作の確認作業

この図から分かること

Web制作では、コードエディターとWebブラウザを役割に応じて使い分けます。

Visual Studio Codeなどのコードエディターでは、HTMLを入力してファイルへ保存します。Chromeでは、そのHTMLをWebページとして表示し、利用者からどのように見えるかを確認します。

表示結果に問題があればコードエディターへ戻り、HTMLを修正します。修正したファイルを保存した後、Chromeでページを再読み込みすると、新しい内容を確認できます。

このように、コードを編集する、保存する、ブラウザで確認する、再び修正するという流れを繰り返しながらWebページを完成させます。

Windows 11にはChromeが最初から入っているとは限らない

Windows 11ではMicrosoft Edgeが既定のWebブラウザです。そのため、新しく購入した一般的なWindows 11パソコンでは、Chromeを追加でインストールする必要があります。

ただし、パソコンの販売店、会社、学校などが事前にChromeを導入している場合もあります。

最初にスタートメニューを開き、Chromeと入力して検索しましょう。

すでにインストールされている場合は、同じChromeを重ねてインストールする必要はありません。

インストール前にシステム要件を確認する

現在の公式案内では、IntelまたはAMD系の一般的なプロセッサを搭載したWindowsパソコンでChromeを利用するには、Windows 10以降が必要です。ARMプロセッサを搭載したWindowsパソコンでは、Windows 11以降が必要とされています。

Windows 11を使用している一般的なパソコンであれば、多くの場合は対応条件を満たします。

ただし、Windows Updateが長期間行われていない場合や、会社の管理設定が適用されている場合は、インストールできないことがあります。

公式サイトからダウンロードする理由

Chromeは、Googleが運営する公式サイトからダウンロードします。

検索結果には、ソフトウェアをまとめて配布する第三者のサイトや、広告を含むページが表示される場合があります。

第三者の配布サイトから入手すると、古いインストーラーや、不要なソフトウェアを追加したファイルを誤ってダウンロードする可能性があります。

Googleの公式Chromeページでは、インストールファイルをダウンロードし、ダウンロードフォルダーから開いて画面の案内に沿って操作する手順が案内されています。

Microsoft Edgeを起動する

Chromeがまだ入っていないWindows 11では、最初にMicrosoft Edgeを使ってChromeの公式サイトへアクセスします。

スタートメニューを開き、Microsoft Edgeを検索して起動します。

EdgeのアドレスバーへChromeと入力して検索する場合は、検索結果の提供元をよく確認してください。

広告として表示された似た名前のページではなく、Googleの公式Chromeページを開きます。

Chromeの公式ページを開く

Chrome公式ページ：
https://www.google.com/intl/ja/chrome/

公式ページを開くと、Chromeをダウンロードするためのボタンが表示されます。

表示されたページ内の「Chrome をダウンロード」ボタンをクリックします。

画面の内容は更新によって変わることがありますが、通常はChromeをダウンロードという案内から進めます。

使用しているOSやプロセッサは、ページ側で自動的に判定されることがあります。

ダウンロードを実行する前に、表示されている対象がWindows用になっていることを確認しましょう。

利用規約や追加設定を確認する

ダウンロードの前後に、利用規約やデータ送信などに関する案内が表示される場合があります。

表示された内容を確認し、同意できる場合にダウンロードを進めます。

画面にチェック項目がある場合は、最初から選択されている内容をそのまま受け入れるのではなく、何を許可する設定なのか確認しましょう。

Webブラウザは、検索、閲覧履歴、パスワード、サイトの権限など、多くの情報を扱います。インストール後も、必要に応じてプライバシーや同期の設定を確認できます。

インストーラーをダウンロードする

Chromeをダウンロードすると、通常はダウンロードフォルダーにインストーラーが保存されます。

Windows向けのオンラインインストーラーでは、次のようなファイル名が使われることがあります。

ChromeSetup.exe

ファイル名やダウンロード画面の見た目は変更されることがあるため、教材の画像と完全に一致していなくても問題ありません。

重要なのは、Googleの公式ページからダウンロードしたWindows用のインストーラーであることです。

ダウンロードしたファイルを確認する

Microsoft Edgeの右上にダウンロード通知が表示された場合は、その一覧からChromeSetup.exeを確認できます。

通知が見つからない場合は、エクスプローラーを開き、ダウンロードフォルダーを確認します。

同じインストーラーを何度もダウンロードすると、ファイル名の末尾に数字が付く場合があります。

どれを実行するか分からなくなった場合は、不要な重複ファイルを削除し、公式サイトから改めて一つだけダウンロードすると分かりやすくなります。

ChromeSetup.exeを実行する

ダウンロードしたChromeSetup.exeをダブルクリックします。

Microsoft Edgeのダウンロード一覧から、ファイルを開く操作を選択しても構いません。

Windowsのセキュリティ機能によって、アプリがパソコンへ変更を加えることを許可するか確認される場合があります。

確認画面が表示されたときは、アプリ名や確認できる発行元を見て、Googleから入手したChromeのインストーラーであることを確かめてから進みます。

インストール中はインターネット接続を維持する

通常のChromeSetup.exeは、実行後に必要なファイルをインターネットから取得してインストールを進めます。

そのため、処理が完了するまではインターネット接続を切らないようにします。

通常は、細かなインストール先や機能を一つずつ選ばなくても、自動的に処理が進みます。Googleの公式案内でも、インストールファイルを開き、画面上の手順に沿って操作する流れが示されています。

インストール完了後にChromeを起動する

インストールが完了すると、Chromeが自動的に起動することがあります。

自動的に起動しない場合は、Windowsのスタートメニューを開き、Google Chromeを検索して起動します。

インストール後にデスクトップショートカットが作成されるかどうかは、インストーラーやWindowsの設定によって異なることがあります。

ショートカットが表示されなくても、インストールに失敗したとは限りません。スタートメニューからChromeを検索し、起動できるか確認してください。

図2：Windows 11へChromeをインストールする流れ

この図から分かること

Windows 11では、最初にMicrosoft Edgeを使ってGoogleの公式Chromeページへアクセスします。

公式ページからWindows用のインストーラーをダウンロードし、ChromeSetup.exeを実行すると、必要なファイルの取得とインストールが進みます。

検索結果に表示されたページを無条件に開くのではなく、Googleが提供する公式ページであることを確認することが大切です。

通常のインストーラーは、実行後もインターネットから必要なデータを取得します。そのため、Chromeが起動するまではネットワーク接続を維持します。

インストール後の画面を確認する

Chromeが起動すると、新しいタブ画面や初期設定画面が表示されます。

バージョンや地域、既存の設定によって表示内容は異なりますが、次の部分が操作できるか確認しましょう。

アドレスバーへWebサイトのURLを入力し、正常にページを開ければ、基本的なインストールは完了しています。

Googleアカウントへのログインは必須ではない

Chromeの起動時に、Googleアカウントへのログインを案内されることがあります。

Googleアカウントへログインすると、設定に応じてブックマーク、パスワード、タブなどを複数の端末で同期できます。

ただし、Chromeを使ってHTMLを表示したり、DevToolsを開いたりするだけであれば、必ずしもログインする必要はありません。

共用パソコンや学校のパソコンでは、個人のGoogleアカウントへ安易にログインしないようにしましょう。

Chromeをタスクバーへ追加する

Chromeを頻繁に使う場合は、Windowsのタスクバーへ固定すると起動しやすくなります。

1. スタートメニューを開く
2. Google Chromeを検索する
3. Google Chromeを右クリックする
4. タスクバーにピン留めする操作を選択する

Windowsの表示やバージョンによって、最初に詳細を選択してからピン留めする場合があります。

タスクバーにChromeのアイコンが表示されれば、次回からスタートメニューを開かずに起動できます。

Googleの公式案内でも、Chromeを後から簡単に起動できるよう、タスクバーへショートカットを追加する方法が案内されています。

Chromeを既定のブラウザにするか検討する

既定のブラウザとは、メールや文書などに含まれるリンクを選択したときに、自動的に起動するWebブラウザです。

Chromeを既定にすると、Webリンクを選んだときにChromeで開くようになります。

ただし、Web制作にChromeを使用するだけであれば、必ずしも既定のブラウザに変更する必要はありません。

既定のブラウザを変更する場合は、Windows 11の設定から既定のアプリを開き、Google Chromeを選択して設定します。設定画面の構成はWindowsの更新によって変わることがあります。

既定のブラウザをChromeへ変更する

Windows 11では、次の流れで設定できます。

1. スタートメニューを開く
2. 設定を開く
3. アプリを選択する
4. 既定のアプリを開く
5. Google Chromeを検索する
6. 既定値を設定する操作を選択する
7. 必要に応じて確認画面を進める

Windowsの更新状況によって、表示される項目名や手順が少し異なる場合があります。

設定後にWebリンクを選び、Chromeが起動することを確認します。

Chromeの更新状態を確認する

Webブラウザは、Webページを表示するだけでなく、インターネット上のデータやプログラムを扱います。

そのため、安全に使うには、新しいバージョンへ更新することが大切です。

Chromeは通常、自動的に更新を確認します。更新が用意されている場合は、Chromeを再起動することで適用されます。

手動で確認する場合は、次のように操作します。

1. Chromeを起動する
2. 右上のその他メニューを開く
3. ヘルプを選択する
4. Google Chromeについてを開く
5. 更新の確認を待つ
6. 必要に応じてChromeを再起動する

再起動すると開いているタブが閉じられる場合があるため、フォーム入力などの未保存内容がないか確認してから進めましょう。

作成したHTMLをChromeで開く

Chromeの準備ができたら、Visual Studio Codeなどで作成したHTMLファイルを表示してみましょう。

ローカル環境に保存したHTMLは、次のような方法で開けます。

既定のブラウザがEdgeのままの場合、HTMLファイルをダブルクリックするとEdgeで開くことがあります。

Chromeで確認したい場合は、HTMLファイルをChromeのウィンドウへドラッグする方法が簡単です。

HTMLを修正した後は再読み込みする

ChromeでHTMLを表示した後、Visual Studio Codeへ戻って内容を変更したとします。

変更した内容をChromeへ反映するには、次の操作を行います。

1. Visual Studio CodeでHTMLを修正する
2. HTMLファイルを保存する
3. Chromeへ切り替える
4. 再読み込みボタンを選択する

Windowsでは、Ctrl+RまたはF5でも再読み込みできます。

ファイルを保存しないままChromeを再読み込みしても、変更前の内容が表示されます。

Chrome DevToolsとは

Chrome DevToolsは、Chromeに組み込まれているWeb開発者向けのツールです。

WebページのHTML構造を確認したり、表示中のページへ一時的な変更を加えたり、エラーやネットワーク通信を調べたりできます。

HTMLの学習を始めたばかりの段階では、最初にElementsを使うとよいでしょう。

ページ上の見出しや文章が、どのHTML要素によって表示されているのかを確認できます。

Chrome DevToolsを開く方法

表示中のページを右クリックし、検証を選択すると、選択した部分に対応するHTMLをElementsパネルで確認できます。Googleの公式DevToolsドキュメントでも、この方法が案内されています。

キーボードから開く場合は、次のショートカットを利用できます。

Consoleを直接開くショートカットは、Chromeの公式ドキュメントでも案内されています。

DevToolsの配置は、Chromeの右側、下側、別ウィンドウなどへ変更できます。

DevToolsで変更した内容は一時的なもの

DevToolsのElementsパネルでは、表示中のHTMLを書き換えられます。

ただし、DevToolsで行った変更は、基本的にブラウザ上の一時的な変更です。

ページを再読み込みすると、元のHTMLが再び読み込まれ、変更内容は消えます。

実際のHTMLを修正するときは、Visual Studio Codeへ戻ってコードを書き換え、ファイルを保存します。

DevToolsは、変更した場合にどのように見えるかを試したり、問題の場所を探したりするために利用します。

図3：ChromeでHTMLを確認する流れとDevTools

この図から分かること

Chromeは、完成したWebページを閲覧するためだけでなく、制作中のHTMLを確認するためにも利用できます。

Visual Studio CodeでHTMLを編集して保存した後、Chromeでページを再読み込みすると、修正内容が表示されます。

表示に問題がある場合は、Chrome DevToolsを開いて、HTMLの構造、エラー、ファイルの読み込み状況などを確認できます。

DevTools上でHTMLを変更しても、その内容は通常、元のHTMLファイルには保存されません。

試した変更を実際のページへ反映したい場合は、Visual Studio Codeへ戻り、HTMLファイルを修正して保存します。

スマートフォンに近い画面幅で確認する

Chrome DevToolsには、パソコン上でスマートフォンやタブレットに近い画面幅を確認するためのDevice Toolbarがあります。

DevToolsを開き、端末の形をしたアイコンを選択すると、表示領域の幅や高さを変更できます。

Device Toolbarは、スマートフォンの表示環境を完全に再現するものではありません。

最終的には、実際のスマートフォンやタブレットでも確認することが大切です。

Chromeだけで確認を終わらせない

Chromeで正常に表示されたWebページでも、別のブラウザでは文字の大きさやフォームの見た目などに違いが出る場合があります。

Web制作では、次のように段階を分けて確認すると効率的です。

1. 普段の制作中はChromeで頻繁に確認する
2. ページが完成に近づいたらEdgeでも確認する
3. 利用できる場合はFirefoxでも確認する
4. Apple製品を対象とする場合はSafariでも確認する
5. パソコンとスマートフォンの実機で確認する

ブラウザごとに完全に同じ見た目にすることだけが目的ではありません。

文章が読める、リンクを選べる、フォームへ入力できるなど、必要な情報と機能を問題なく利用できることが重要です。

Chromeをインストールできない場合の確認

インストーラーが起動しない、途中で停止する、Chromeが開かない場合は、どの段階で問題が起きたかを確認します。

Googleは、Chromeをインストールできない場合、インストールファイルを改めてダウンロードし、それでも解決しないときはオフラインインストーラーを試す方法を案内しています。

インストーラーをもう一度ダウンロードする

ダウンロード中に通信が切れた場合、インストーラーが正常に保存されていない可能性があります。

この場合は、古いChromeSetup.exeを削除し、Googleの公式サイトから改めてダウンロードします。

同じファイルを何度も実行するより、新しく取得したインストーラーを使ったほうが問題を切り分けやすくなります。

会社や学校のパソコンでは管理者へ確認する

会社や学校が管理するパソコンでは、利用者が自由にソフトウェアをインストールできない場合があります。

セキュリティや運用の方針によって、Chromeの利用、拡張機能の追加、既定のブラウザの変更などが制限されることもあります。Googleも、管理対象パソコンでは管理者がChromeの設定やポリシーを制御できる仕組みを提供しています。

管理者権限を求める画面が表示されたからといって、制限を回避しようとしてはいけません。

授業や業務で必要な場合は、担当者やシステム管理者へ相談しましょう。

Chromeを安全に利用するための注意

Chromeをインストールした後は、Webサイトから表示される通知や権限の確認にも注意します。

Webサイトは、位置情報、カメラ、マイク、通知などの利用許可を求めることがあります。

Chromeでは、設定のプライバシーとセキュリティから、サイトごとの権限を確認、変更できます。

知らないWebサイトから権限を求められた場合は、すぐに許可せず、利用目的を確認しましょう。

拡張機能は必要なものだけ追加する

Chromeでは、Chromeウェブストアから拡張機能を追加できます。

拡張機能は便利ですが、Webページの内容を読み取ったり、サイト上で処理を行ったりする権限を持つものもあります。

そのため、提供元、説明、必要な権限、更新状況などを確認し、必要なものだけを追加しましょう。

Web制作を始める段階では、Chrome本体とDevToolsだけでも基本的な表示確認を行えます。

便利そうに見える拡張機能を最初から大量に入れる必要はありません。

Chromeの設定を変更しすぎない

Chromeには多くの設定項目がありますが、インストール直後からすべて変更する必要はありません。

最初は標準設定で利用し、必要性を感じた部分だけを調整します。

設定や拡張機能の影響で動作がおかしくなった場合は、Chromeの設定を既定値へ戻す方法もあります。設定をリセットしても、保存済みのブックマークやパスワードは削除されないとGoogleは案内しています。

Web制作の確認環境としてChromeを活用する

Chromeのインストールが完了したら、次の流れでHTMLの学習を進められます。

1. Visual Studio Codeで作業用フォルダーを開く
2. HTMLファイルを作成する
3. HTMLを入力して保存する
4. ChromeでHTMLファイルを開く
5. 文章や画像の表示を確認する
6. DevToolsでHTMLの構造を確認する
7. Visual Studio Codeへ戻って修正する
8. 保存後にChromeで再読み込みする
9. 完成後はほかのブラウザでも確認する

Chromeは、HTMLを自動的に正しくしてくれるソフトウェアではありません。

HTMLに記述された内容を解釈し、Webページとして表示するブラウザです。表示に問題がある場合は、Chromeの画面だけでなく、HTMLの構造やファイルの保存場所なども確認します。

Visual Studio CodeでHTMLを書き、Chromeで表示し、DevToolsで問題を調べるという役割分担を理解すると、Web制作の作業を進めやすくなります。