Webサイトを閲覧する際は「ブラウザ」が必要です。
2022年現在、デスクトップブラウザ市場のうち77%はGoogle Chromeが占めています。したがって、Webサイト制作の業務ではまず、Google Chromeでの表示を整える必要があります。
この記事では「Google Chrome」のインストール方法や使い方、そしてWeb制作の学習でおすすめの拡張機能を画像を交えて解説します。
目次
ブラウザを準備しよう
これからGoogle Chromeをインストールする前に、まずはブラウザとは何かを学んでいきましょう。
ブラウザとは
ブラウザとは、Webサイトを表示するためのソフトの総称です。
サーバーに存在するWebサイトのデータを、Webサイトを閲覧しようとするパソコンで表示する役割を担います。
ブラウザの種類
ブラウザにはたくさん種類が存在します。代表的なものは「Google Chrome」「Mozilla Firefox」「Safari」「Microsoft Edge」などです。
Webサイト制作時には各々のブラウザにWebサイトを対応させる必要が出てきたりします。
ですが、今はブラウザにはたくさんの種類があるということを覚えておきましょう。
各ブラウザにはそれぞれ特徴がありますが、プログラミングの学習においては「Google Chrome」が定番です。プログラミングの学習には必須のブラウザになるので、さっそくインストールしていきましょう。
Google Chrome について学ぼう
次に、Google Chrome のインストール方法を説明していきます。
Google Chrome とは
Google Chrome とは、Googleが開発しているブラウザです。
プログラミング開発に特化した「デベロッパーツール」が用意されており、Webサイトを制作する際のデバッグ・パフォーマンス測定などの検証を行うことができます。
拡張機能も豊富で、開発業務に欠かせないブラウザになっています。
Google Chrome のダウンロード
それでは、Google Chromeのダウンロードをしていきましょう。
WindowsとMacで方法が異なりますので、ご自身がお使いのパソコンに合わせて説明を読み進めてください。
Windows OS の場合
ダウンロードページにアクセス
「Google Chrome - Google の高速で安全なブラウザをダウンロード」にアクセスし、「Chromeをダウンロード」をクリックしてください。
ダウンロードされた「ChromeSetUp.exe」を開く
ダウンロードボタンを押し、利用規約に同意すると「ChromeSetUp.exe」がダウンロードされます。
パソコンから、権限の確認のためにパスワードが要求される場合には入力して続行します。
開くとインストールが始まる
「ChromeSetUp.exe」を開くと、自動的にGoogle Chromeのダウンロードとインストールが行われます。
(ユーザーアカウント制御が表示された場合は、「はい」をクリックします。)
以上で、Google Chrome（ブラウザ）のインストールが完了です。
デフォルトのブラウザに設定する
Google Chromeは、プログラミングの学習において今後も使っていくブラウザになります。
そのため、デフォルトのブラウザーとして設定を行いましょう。
「スタート」 メニュー をクリックし、「設定」 をクリックする
左下の「スタート」メニューから「設定」を開きましょう。
設定の「アプリ」のメニューから「既定のアプリ」を開く
「既定のアプリ」の項目を開きます。
「Webブラウザー」の項目を確認する
「Webブラウザー」の項目から、デフォルトのブラウザーのアプリケーションを選択することができます。
「Webブラウザー」の項目を「Google Chrome」に変更する
Google Chrome に変更することで、デフォルトのブラウザーの設定は完了です。
Mac OSの場合
ダウンロードページにアクセス
「Google Chrome - Google の高速で安全なブラウザをダウンロード」にアクセスし、「Chromeをダウンロード」をクリックしてください。
Macに合ったChromeのバージョンを選ぶ
ダウンロードボタンをクリックすると、上記の画面が表示されます。
お使いのMacに対応したChromeのバージョンを選択しましょう。
お使いのMacに使われているプロセッサを確認してから、選択してください。
プロセッサを確認する
画面左上の「Appleメニュー」から「このMacについて」をクリックします。
「概要」のタブで、お使いのMacのプロセッサが確認できます。
お使いのプロセッサが確認できたら、先ほどのChromeのバージョン選択を行いましょう。
「googlechrome.dmg」がダウンロードされたか確認する
Chromeのバージョン選択が完了したら、以下の画面が表示されます。
「googlechrome.dmg」というファイルがダウンロードされていればOKです。
出てきたウィンドウ内で上記の操作を行う
次に、ダウンロードされた「googlechrome.dmg」を開きます。
上記の手順にしたがって、「Google Chrome.app」をアプリケーションフォルダに移動させてください。
移動が完了したら、Google Chrome（ブラウザ）のインストールは完了です。
デフォルトのブラウザに設定する
Macの方もGoogle Chromeをデフォルトのブラウザーとして設定しておきましょう。
システム環境設定の「一般」をクリックする
システム環境設定を開いて、「一般」の項目を開きましょう。
「デフォルトのWebブラウザ」を「Google Chrome.app」にする
一般の画面から、「デフォルトのWebブラウザ」の項目を変更します。
「Google Chrome.app」に変更することで、デフォルトのブラウザを「Google Chrome」に変更することができます。
Google Chrome の使い方
次に、Google Chrome の使い方を簡単に説明していきます。
画面の見方
こちらが、Google Chrome を立ち上げたときのデフォルトの画面になります。
まずは、基本的に操作で使っていく箇所を覚えていきましょう。ひとまず、画像で説明されている箇所を覚えていれば大丈夫です。
ブックマーク機能
次に、ブックマークの機能について説明していきます。
ブックマーク機能とは、Webサイトをお気に入りに登録する機能です。
プログラミングの学習をする際には、必ず使っていく機能になります。
- わかりやすい解説が載っているサイト
- フリー素材が手に入るサイト
- デザインが好きなサイトなど
など、自分がいつでも見返したいと思ったサイトは、積極的にブックマークしていきましょう。
見直したいサイトにいつでもアクセスできるようになるので、復習や調べ物の効率が上がります。
Google Chrome の「設定」から「ブックマークマネージャー」を選択することで、ブックマークの整理を行うことができます。
ブックマークしたサイトは、整理整頓していないと乱雑に溜まっていってしまうので、日頃から整理整頓を心がけましょう。目当てのサイトを探す手間を省くことで、学習効率を高めることができます。
おすすめの便利なショートカットキー
次に、Google Chrome の操作を快適に行うためのショートカットキーを紹介していきます。今回はよく使う基本的なものを厳選して紹介します。
| 操作 | ショートカットキー |
| タブを開く | ⌘ + T |
| タブを閉じる | ⌘ +W |
| タブの切り替え（左端から） | ⌘ + 1, ⌘ + 2, ⌘ + 3... |
| ページの更新 | ⌘ +R |
| 前のページに戻る | ⌘ +← |
| 次のページに進む | ⌘ + → |
| ブックマーク | ⌘ +D |
| ページを拡大/縮小する | ⌘ + ＋ / ⌘ + － |
| ページの拡大率をリセットする | ⌘ + 0 |
ショートカットキーの一覧は下記の記事でも紹介しています。詳しく知りたい方はぜひ参照してください。
Google Chrome の拡張機能
次に、Google Chrome の拡張機能について簡単に説明していきます。
拡張機能 とは
拡張機能とは、足りない機能や便利な機能を追加してくれる機能のことをいいます。
プログラミングを学習するにあたって、この拡張機能という単語はよく目にすることになるので覚えておきましょう。
Google Chrome には、開発を効率化する便利な拡張機能が豊富に存在します。
Google Chrome に拡張機能を入れる
次に、Google Chromeの拡張機能を入れていきましょう。
「chrome ウェブストア」を開き、拡張機能を検索する
「Chrome ウェブストア - 拡張機能」にアクセスし、以下の拡張機能を検索してみましょう。
「Chromeに追加」から拡張機能をインストールする
Google Chrome に追加したい拡張機能を見つけたら、「Chromeに追加」のボタンをクリックします。
拡張機能の停止やアンインストールなどの管理は「設定」の「その他ツール」から行うことができます。
おすすめの拡張機能
次に、Google Chrome のおすすめ拡張機能を紹介していきます。
Google Chromeには豊富に拡張機能が存在しますが、その中でもWeb制作に役立つような厳選したものを紹介します。
HTMLの開始・終了タグの過不足などを検出してくれる拡張機能です。
HTMLを始めたばかりの方は、記述ミスがよくあるので「HTMLエラーチェッカー」を導入して確認するようにしておくといいでしょう。
HTML上の画像を一括でダウンロードしてくれる拡張機能です。
Webサイトの模写学習をする際は、この拡張機能がとても役に立ちます。
普段見ているWebサイトにどんな技術が使用されているかを確認することができる拡張機能です。
この拡張機能を使用すれば、見ているWebサイトの使用言語、フレームワーク、ライブラリなどを調べることができます。
GoFullPage – Full Page Screen Capture
Webサイトの全体１ページ分のスクリーンショットを撮影できる拡張機能です。
この拡張機能で撮影したスクリーンショットを活用して、模写学習をすることができます。
要素間の距離を測ることができる拡張機能です。
この拡張機能も、Webサイトの模写学習の際に非常に便利です。
Webサイト上の要素や画像の色を検出することができる拡張機能です。
rgb値やカラーコード(HEX値)を確認することができるので、模写学習に最適な拡張機能です。
Webサイトに使われているフォントの種類を検出することができるプラグインです。気に入ったフォントの名前を調べることができます。
他にも豊富な拡張機能がありますので、自分に合った拡張機能を探してみてください。
Google Chrome を使いこなそう
今回はGoogle Chrome のインストールから基本的な使い方を学びました。
Google Chrome を使いこなせると、普段の調べ物などもはかどります。使いこなして、プログラミング学習を進めていきましょう！
