Webブラウザについて
ブラウザとは、一般にWWWの情報を閲覧するためのソフトウエアで、HTTPユーザーエージェントのひとつです。SNSや様々なクラウドシステムが日常的なものになった今日、最も使用頻度の高いソフトウエアといえるでしょう。
世界のブラウザのシェアは以下で確認できます。
http://www.w3counter.com/globalstats.php
Windowsでは、Microsoft Edge / Internet Explorer 、 Macでは、Safari が標準で搭載されています。無料で配布されているものとしては、FirefoxやChromeが有名です。以下からダ ウンロードできます。
- Firefox：OpenSource（Mozilla Public License）
- Chrome：OnenSource （一部プロプライエタリ）
- Opera：プロプライエタリ・無料
ブラウザの種類
ブラウザの活用
ブラウザは様々あるソフトウエアの中で、最も使用頻度の高いものです。
その使い勝手は、すべての作業の効率を左右するといっても過言ではありません。正しく理解して、使いこなして下さい。
ブラウザの設定
- ホームページ
起動時、またHOMEアイコンをクリックしたとき表示されるページのことです。初期設定のまま使用するのではなく、自分にとって活用しやすい窓口サイトが表示されるように設定しておきましょう。
- ダウンロード先
デフォルトでは、「ダウンロードフォルダ」となっているものが多いのですが、そもそも「ダウンロードフォルダ」がどこにあるかがわかりにくいので、
どこに落ちてきたのかわからず、それで困る方が多いようです。
設定パネルにダウンロード先を定義する項目がありますので、確実に目に見える「デスクトップ」にすることをおすすめします。
ブックマーク（お気に入り）
頻繁に利用するサイトはブックマークして、情報の活用効率を上げて下さい。
アドオン（機能拡張）
Web開発用のツール、FTPクライアント、サイトの一括ダウンロード（スクラップブック）など、便利なツールがオプションとして用意されています。活用して下さい。
履歴に注意
- 検索履歴はプライベートな情報です。必要に応じて消去しましよう。
- Googleアカウントでログインして検索したものは、Google履歴に残ります。
- Java Script, JAVA, WebGL その他、各種機能のの有効化・無効化について
ブラウザの「設定」から変更できます。
キャッシュのクリアについて
ブラウザというソフトウエアは、ページの閲覧を効率化する目的では過去に閲覧したサイトの情報をローカル（あなたのPC）に蓄積し（これをブラウザキャッシュといいます）、再度そのページを閲覧する場合には、サーバーに再アクセスすることなく、キャッシュを使って再現することがあります。
サイトを書き直して再アップしたが、変更が反映されない・・という問題が生じる場合は、キャッシュを見ているのではないか？と疑う必要があります。
その場合は、まずブラウザの「更新ボタン」を押してみて下さい。
特に HTML以外のCSSやJSなど、リンクでインクルードするファイルについては、単にリロードしただけでは更新されない場合もあります。以下の方法で閲覧履歴(キャッシュ)ごとリフレッシュして見てください。
- Firefox：Shift + 「再読み込み」｜ Ctrl + F5 ｜Ctrl + R （Mac では ⌘ + R）
- Google Chrome：Ctrl + Shift + R （Mac では ⌘ +Shift + R）
- Safari： Shift + 「再読み込み」｜Ctrl + F5 or Ctrl + R （Mac では ⌘ + R）
- Internet Explorer：Ctrl +「最新の情報に更新」｜ Ctrl-F5
ブラウザの開発ツール
ブラウザには、ソースコードの表示はもちろん、表示中のページの情報を詳細に分析する機能があります（特にFirefoxではこれが充実）。Webサイトの制作では、この開発ツールを用いたチェックを行うことで、作業を効率化することができます。
開発ツールの起動
FirefoxやChrome、Safariには、開発支援ツールが標準で実装されています。
- Firefoxの場合
- ページ上で右クリック＞要素を調査 ※これが最も早いです
- トップメニュー＞ツール＞Web開発＞開発ツールを表示
- 右上のメニューボタン＞開発ツール＞開発ツールを表示
- Cromeの場合
- ページ上で右クリック＞検証
- トップメニュー＞表示＞開発/管理＞デベロッパーツール
- 右上のメニューボタン＞その他のツール＞デベロッパーツール
- Safariの場合
- ページ上で右クリック(要カスタマイズ)＞要素の詳細を表示
- トップメニュー(要カスタマイズ)＞開発＞Webインスペクタを表示
- ツールバー(要カスタマイズ)＞Webインスペクタアイコンをクリック
- 補足：Safariはデフォルトが「素人モード」になっているので、開発系のメニューを有効にするには、環境設定で以下の操作が必要です。
・環境設定＞詳細＞開発メニューを表示 にチェック
この操作で、メニューバーに「開発」の項目が表示されるとともに、
コンテクストメニュー（右クリックで表示されるメニュー）にも
「ソースを表示」が出るようになります。
・環境設定＞詳細＞スマート検索フィールド
Webサイトの完全なアドレスを表示 にチェック
- なお、開発ツールはショートカットでも出せます。
Firefox, Chrome とも [command]+[option]+[i]（Windowsは [F12] ）
開発ツールの使い方
ここではFirefoxの例で説明します。どのブラウザもほぼ同様です。
- まず、開発ウインドウの出し方について
ウインドウ右上のアイコンで、ページの下・右・独立ウインドウなど、自分が使い易いタイプのものを選んで下さい。
- 開発ウインドウ＞ 要素選択
ページ上の要素選択で、当該部分のHTMLソースがハイライト表示
- 開発ウインドウ＞インスペクタ
- HTMLソースに触れるとページ上の当該部分がハイライト表示されます。下左図は、<section> 部分の状態が示されています。
- CSSの各プロパティについて、その有無による表示の違い、さらに、値を変更した場合の表示の違いをシミュレーションすることができます。下右図では、<section> の height を 200px に変更した例です。
- コンソール
CSSやJSのエラーが行番号とともに表示されます。
- 「警告」は、あくまで警告なので、そのままでも大丈夫です。理想は完全除去ですが、費用対効果の点で、無視することが多いです。
- JSパネルでエラー（赤字）が出ている場合は、その行で機能停止していますので、これは必ず修正が必要です。
