00 レスポンシブホームページ講座 (検証ツール)

2020年11月3日2025年1月12日

レスポンシブホームページ制作講座の概要

今回のレスポンシブホームページ制作講座は、その基本概念と考え方について学ぶ初回講座です。レスポンシブとは何か？

初回は、Google Chromeの「デベロッパーツール（開発者ツール）」を使いこなす方法を学びます。デベロッパーツールは、レスポンシブデザイン講座を進める上で必須のツールです。ここでしっかり使い方を覚えていきましょう。

デベロッパーツールって何ですか？

デベロッパーツールは、開発者向けの便利なツールのことです。最初はMozilla FirefoxのFirebugというプラグインとして登場し、その後Chromeや他のブラウザにも標準機能として搭載されるようになりました。このツールを使うと、コードの検証やデザインの確認が簡単にできますよ

なるほど！じゃあ、コードの検証って何ですか？プログラムのエラーを探すことですか？

そうですね。その一つです。ただ、デベロッパーツールの検証では、HTMLに適用されているCSSやユーザーエージェントスタイルシート（ブラウザ独自のデフォルトスタイル）の確認が主な用途です。また、CSSの上書きがどう反映されているかもリアルタイムでチェックできます。

デバイスの切り替えって何ですか？

レスポンシブデザインでは、PC、タブレット、スマートフォンなど異なるデバイスでの画面表示を確認する必要があります。デベロッパーツールには、その切り替え機能がついていて、プレビューを簡単に切り替えることができます。

デベロッパーツールを開く
- Chromeブラウザで対象のページを開き、右クリック→「検証」を選択。
- または、ショートカットキーCtrl + Shift + I（Windows）またはCmd + Option + I（Mac）を使います。
デバイス切り替えモードを有効化
- デベロッパーツールの右上にある「デバイス切り替えボタン」をクリック。
- 切り替えモードでは、PC、タブレット、スマートフォンなどの画面サイズを選択してプレビューできます。
カスタムサイズの設定
- デフォルトで用意されたサイズ以外にも、任意の幅や高さを設定することで、他のデバイスでの見え方を確認できます。