① 物語性を取り入れた説明: 「メディアクエリ」

中学生のカナは、学校の授業で「メディアクエリ」という言葉を初めて聞きましたが、何のことだかよくわかりません。そこで、授業後に先生に質問しました。

「先生、メディアクエリってどういう意味ですか？」

先生は笑顔で答えました。「カナ、いい質問だね。簡単に説明すると、メディアクエリは、ウェブサイトが表示されるデバイスの種類や画面サイズに合わせて、デザインやレイアウトを変えるための技術なんだ。たとえば、スマホで見るときとパソコンで見るときに、同じウェブサイトでも見え方が違うことがあるだろう？」

「はい、スマホだと画面が小さいから、ウェブサイトの配置が違うことがありますね！」

「そう、それがメディアクエリのおかげなんだよ。画面が大きければ、より多くの情報を一度に表示できるけれど、小さい画面では必要な部分だけを見やすくするために、レイアウトが調整されるんだ。この仕組みを使うことで、ユーザーはどのデバイスを使っても快適にウェブサイトを見られるんだ」

「じゃあ、例えばスマホで見たときにメニューが小さく表示されたり、写真が違う配置になるのは、メディアクエリの働きなんですね？」

「その通り！たとえば、ウェブデザイナーはメディアクエリを使って、スマホ、タブレット、パソコン、それぞれのデバイスで最適な見え方を設定しているんだ。これを『レスポンシブデザイン』とも呼ぶんだよ。メディアクエリで実現するレスポンシブWebデザインという本もあるよ。」

「なるほど…。CSSの中で使うということは、これはコードの一種ということでしょうか？」とカナはさらに質問しました。

先生はうなずきながら答えました。「そうだね。メディアクエリは、ウェブページの見た目を決めるためのCSS（Cascading Style Sheets）というコードの一部なんだ。CSSは、HTMLで作られたページにスタイルを付けるための技術なんだよ。例えば、文字の色や大きさ、背景色、レイアウトを決めるのがCSSだ。そして、メディアクエリを使うと、画面の幅や高さに合わせてそのスタイルを変えられるんだ」

「具体的には、どんな感じで使うんですか？」

「たとえば、画面幅が768ピクセル以下のときに文字のサイズを小さくしたいときには、こんなコードを書くんだよ」

「これを使うと、画面幅が768ピクセル以下のデバイス、たとえばスマホやタブレットでは文字の大きさが自動的に小さくなるんだ。だから、どのデバイスでもウェブページが見やすくなるってわけだね」

「なるほど！メディアクエリって、CSSの中に組み込んで使って、デバイスに合わせて見た目を変えられるんですね。ウェブデザインには欠かせない技術ですね」

② 実際の事例: メディアクエリの使用例

メディアクエリは、ウェブサイトやアプリケーションを作成するときに欠かせない技術です。特に、スマートフォンやタブレットの普及に伴い、ウェブデザインにおいては必須となっています。

たとえば、大手通販サイトでは、ユーザーがパソコン、タブレット、スマートフォンのどれでアクセスしても、サイトのレイアウトが自動的に最適化されるように設計されています。スマホでは商品画像が縦に並び、パソコンでは横に並んで表示されるようになっているのは、メディアクエリのおかげです。

また、自治体のウェブサイトでも、メディアクエリを使って、スマートフォンでも簡単に情報にアクセスできるようにデザインされています。例えば、災害情報をすぐに確認できるよう、スマホではボタンやリンクが大きくなって操作しやすくなっているのです。

最近では、メディアクエリを使って、画面の明るさやユーザーの設定に応じたダークモード対応のサイトも増えています。

➂ クイズや小テスト

クイズ1

メディアクエリの主な役割は何ですか？

A. ウェブサイトのスピードを上げる
B. プログラムの動作を制御する
C. デバイスに応じてレイアウトを調整する

クイズ2

メディアクエリを使うときに必要な技術は何ですか？

A. JavaScript
B. CSS
C. HTML

クイズ3

メディアクエリを使って実現されるウェブデザインの考え方は何ですか？

A. モバイルファーストデザイン
B. レスポンシブデザイン
C. フラットデザイン

⑤ 回答

1. C – メディアクエリは、デバイスに応じてウェブサイトのレイアウトを調整する技術です。
2. B – メディアクエリは、CSSで使用されます。
3. B – メディアクエリを使って実現されるのは、レスポンシブデザインです。