① 物語性を取り入れた説明: 「メディアクエリ」
中学生のカナは、学校の授業で「メディアクエリ」という言葉を初めて聞きましたが、何のことだかよくわかりません。そこで、授業後に先生に質問しました。
「先生、メディアクエリってどういう意味ですか？」
先生は笑顔で答えました。「カナ、いい質問だね。簡単に説明すると、メディアクエリは、ウェブサイトが表示されるデバイスの種類や画面サイズに合わせて、デザインやレイアウトを変えるための技術なんだ。たとえば、スマホで見るときとパソコンで見るときに、同じウェブサイトでも見え方が違うことがあるだろう？」
「はい、スマホだと画面が小さいから、ウェブサイトの配置が違うことがありますね！」
「そう、それがメディアクエリのおかげなんだよ。画面が大きければ、より多くの情報を一度に表示できるけれど、小さい画面では必要な部分だけを見やすくするために、レイアウトが調整されるんだ。この仕組みを使うことで、ユーザーはどのデバイスを使っても快適にウェブサイトを見られるんだ」
「じゃあ、例えばスマホで見たときにメニューが小さく表示されたり、写真が違う配置になるのは、メディアクエリの働きなんですね？」
「その通り！たとえば、ウェブデザイナーはメディアクエリを使って、スマホ、タブレット、パソコン、それぞれのデバイスで最適な見え方を設定しているんだ。これを『レスポンシブデザイン』とも呼ぶんだよ。メディアクエリで実現するレスポンシブWebデザインという本もあるよ。」
「なるほど…。CSSの中で使うということは、これはコードの一種ということでしょうか？」とカナはさらに質問しました。
先生はうなずきながら答えました。「そうだね。メディアクエリは、ウェブページの見た目を決めるためのCSS（Cascading Style Sheets）というコードの一部なんだ。CSSは、HTMLで作られたページにスタイルを付けるための技術なんだよ。例えば、文字の色や大きさ、背景色、レイアウトを決めるのがCSSだ。そして、メディアクエリを使うと、画面の幅や高さに合わせてそのスタイルを変えられるんだ」
「具体的には、どんな感じで使うんですか？」
「たとえば、画面幅が768ピクセル以下のときに文字のサイズを小さくしたいときには、こんなコードを書くんだよ」
「これを使うと、画面幅が768ピクセル以下のデバイス、たとえばスマホやタブレットでは文字の大きさが自動的に小さくなるんだ。だから、どのデバイスでもウェブページが見やすくなるってわけだね」
「なるほど！メディアクエリって、CSSの中に組み込んで使って、デバイスに合わせて見た目を変えられるんですね。ウェブデザインには欠かせない技術ですね」