Web制作ですっかり定番となったメディアクエリを使ったレスポンシブ Webデザイン。JavaScriptで実装している機能をメディアクエリと連携させるためのちょっとしたテクニックを紹介します。 テーブルタグがCSSに変わり、レスポンシブデザインは心躍るコンセプトの1つです。レスポンシブデザインはメディアクエリで閲覧中の機器の画面幅、高さ、向き、解像度、アスペクト比、色深度などを把握し、応じたスタイルシートを適用しています。 以下の例はcssbasic.cssをすべてのデバイスに適用して、水平方向の画面幅が500ピクセル以上なら、csswide.cssも適応します。 <link rel="stylesheet" media="all" href="cssbasic.css" /> <link rel="stylesheet" media="(min-width: 500px)" href="
![知ってた?JavaScriptでメディアクエリを利用するちょっとしたテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/9f9d958f1334fd8fdf5eb7142b0e5dedd1a10dc6/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2022%2F07%2F27%2F2443890%2Fl%2Fa6687981aa9e55fd.jpg)