はじめに
この文書は「webサイト 検証 見方」という検索ワードに対する答えをまとめた第1章です。主に初心者やこれからサイト制作を始める方、簡単なチェック方法を知りたい個人・小規模の制作者を想定しています。
- 検索意図の整理
- Webサイトの品質を確認する方法を知りたい
- ブラウザの検証ツール（例：開発者ツール）の使い方を学びたい
-
HTMLやCSSの見方、直し方を知りたい
-
本記事で扱う内容（概略）
- ブラウザチェックの重要性と基本手順
- チェックリストの活用例（表示崩れやリンク切れの確認など）
-
Google Chromeの検証ツールを使ったHTML/CSSの確認方法（初心者向け）
-
読み方のアドバイス
- 手順は実際のサイトで試しながら進めてください。たとえば「右クリック→検証」を試すだけでも多くが学べます。
- 専門用語は可能な限り少なくし、具体例を交えて説明します。
この章ではまず、なぜ検証が必要か、誰がどのようにこの記事を使えるかを分かりやすく伝えます。次章以降で具体的なチェック手順やツールの使い方を丁寧に解説します。
サイト制作にブラウザチェックは必須！Webサイトの品質の確保について
ブラウザチェックとは
ブラウザチェックは、Webサイトやアプリが複数のブラウザで正しく表示・動作するかを確認する作業です。主な対象はGoogle Chrome、Safari、Microsoft Edgeです。要件で指定した端末やブラウザで行います。
実施のタイミングと準備
要件定義後にチェック対象を確定し、ステージング環境で実施します。あらかじめチェックシートを用意してください。記載項目は「確認ページ」「端末・ブラウザ」「確認結果」「不具合時の修正内容」です。
基本チェック項目（例）
- 表示・動作確認：レイアウト、画像、ボタンの挙動を確認します。
- Meta情報・検索設定：タイトルや説明（description）が正しいか確認します。
- SEO関連：見出しの構造やリンクの貼り方を確認します。
- リダイレクト確認：想定のURL遷移が行われるか確認します。
- 計測確認：アクセス解析が正しく動くか確認します。
- フォーム送信：入力・送信・確認メールが届くか確認します。
- 不要データの削除：テスト用のダミーや未使用ファイルが残っていないか確認します。
不具合対応と優先順位
不具合は影響の大きさと発生頻度で優先度を決めます。表示崩れや入力不能は高優先、文言の誤りは中優先などです。修正後は必ず再チェックして記録を更新してください。
便利な補助ツール
リンクチェックには「Check My Links」などの拡張機能が便利です。ブラウザの開発者ツールでコンソールやネットワークを確認すると原因特定が早まります。
【初心者向け】Google Chrome検証ツールの使い方｜HTMLとCSSの確認方法
はじめに
Chromeの検証ツール（デベロッパーツール）は、Webページの構造や見た目をその場で確認・編集できる便利なツールです。まずは開き方と画面構成を押さえましょう。
開き方と画面構成
- 開き方：ページ上で右クリック→「検証」、またはショートカット（Mac: Command+Option+I、Windows: Ctrl+Shift+I）。
- 画面：左側にWebページ本体、右上にHTML（Elementsタブ）、右下にCSS（Stylesタブ）の3エリアに分かれます。
HTMLの確認と操作（Elementsタブ）
- ポインタアイコンを選んでページ上の要素をクリックすると、該当HTMLがツリーでハイライトされます。実際の位置が分かりやすく便利です。
- HTMLの編集：要素を右クリック→「Edit as HTML」を選ぶと中身を書き換えられます。テキストや属性を一時的に変更して表示を確認できます。
- 便利な操作：要素を右クリックして「Copy」→「Copy selector」や「Copy outerHTML」で選択・共有できます。
CSSの確認と操作（Stylesタブ）
- Stylesタブでは、その要素に適用されているCSSが一覧で見えます。プロパティをクリックして値を変更すると即時に見た目が変わります（例：color: red;）。
- プロパティ名の横のチェックボックスでON/OFFを切り替えられます。表示崩れの原因調査に便利です。
- 新しいルールを追加したい時は、Styles内の空白をクリックして手入力できます。Specificity（優先度）も確認しながら調整しましょう。
- Computedタブで最終的に適用された値やボックスモデル（margin・border・padding・size）を確認できます。
レスポンシブ確認・擬似状態
- デバイストグル（画面上部のスマホアイコン）で画面幅を切り替え、レスポンシブ表示を確認できます。
- 擬似クラス（:hoverなど）はElementsの右クリック→”Force state”で疑似状態を強制できます。
注意点
検証ツールでの変更はローカルだけの反映です。実際のファイルに反映するにはエディタで修正してからサーバーにアップロードしてください。
