デバイスの幅に応じてCSSを適用するには【@media】
ここではWebページをRWD(レスポンシブ・ウェブ・デザイン）に対応させるために、使用しているデバイスごとに異なるCSSを適用する方法を解説します。
WebページをRWDに対応させるには、headタグ内に以下のようなmetaタグを追加する必要があります。metaタグのname属性には「viewport」を設定します。
content属性には「width=device-width, initial-scale=1.0」を設定します。
Webサイトを訪問している人がどんなデバイスを使用しているかを調べるにはCSSのメディアクエリ「@media」を使用します。
たとえば、幅が1025px～1280pxのラップトップやディスクトップ等のデバイスに対応したCSSを適用させるには
「@media (min-width: 1025px) and (max-width: 1280px) {...}」のように記述します。
また、幅が768px～1024pxのタブレットやiPad(landscape)等のデバイスに対応したCSSを適用させるには
「@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {...}」のように記述します。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
/* Device = Laptops, Desktops : 1025px to 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {
div#rwd-media::after {
content: "Device = Laptops, Desktops : 1025px to 1280px";
}
}
/* Device = Tablets, iPads (landscape) : 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
div#rwd-media::after {
content: "Device = Tablets, iPads (landscape) : 768px to 1024px";
}
}
</style>
作成手順
-
VS2019(Visual Studio 2019 or Visual Studio 2022)を起動したら新規のWebフォーム「Article015.aspx」を作成します。
-
Webフォームのヘッダータグ内「<head>...</head>」にmetaタグを追加します。
次にstyleタグを追加したら以下のCSSを入力します。
CSSの行16-20ではデバイスの幅が1281px以上のとき適用させるCSSを定義しています。
行17-18では、CSSのcontentプロパティにテキスト文字「Device = Desktops : 1281px to higher resolution desktops」を定義してdiv#rwd-media要素に表示させます。
以下、同様にデバイスの幅を指定してデバイスごとに異なるCSSを適用しています。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
div#rwd-media {
width: 100%;
height: 200px;
background-color: black;
color: white;
font-size: 3vw;
}
/* Device = Desktops : 1281px to higher resolution desktops */
@media (min-width: 1281px) {
div#rwd-media::after {
content: "Device = Desktops : 1281px to higher resolution desktops";
}
}
/* Device = Laptops, Desktops : 1025px to 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {
div#rwd-media::after {
content: "Device = Laptops, Desktops : 1025px to 1280px";
}
}
/* Device = Tablets, iPads (Portrait) : 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
div#rwd-media {
content: "Device = Tablets, iPads (Portrait) : 768px to 1024px";
}
}
/* Device = Tablets, iPads (Landscape) : 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
div#rwd-media::after {
content: "Device = Tablets, iPads (Landscape) : 768px to 1024px";
}
}
/* Device = Low Resolution Tablets, Mobiles (Landscape) : 481px to 767px */
@media (min-width: 481px) and (max-width: 767px) {
div#rwd-media::after {
content: "Device = Low Resolution Tablets, Mobiles (Landscape) : 481px to 767px";
}
}
/* Device = Most of the Smartphones Mobiles (Portrait) : 320px to 479px */
@media (min-width: 320px) and (max-width: 480px) {
div#rwd-media::after {
content: "Device = Most of the Smartphones Mobiles (Portrait) : 320px to 479px";
}
}
</style>
-
<body>...</body>要素内にHTMLのdiv要素を追加したらid属性に「rwd-media」を設定します。
<body>
<div id="rwd-media">
</div>
</body>
操作手順と解説
-
まずは、DESKTOP-PC、NOTE-PCでWebページを表示したら、マウスでブラウザのウィンドウ幅を拡大・縮小させてください。
ブラウザのウィンドウ幅が変わるごとにdiv要素内に表示されるテキスト文字が変わります。
-
次にTablet、MobileなどのデバイスからWebページを表示してください。
Webページが表示されたらデバイスを縦型・横型にして「Portrait」「Landscape」に切り替えてください。
div要素内に表示されるテキスト文字が変わります。
たとえば、スマホを縦型(Portrait)にすると「Device = Most of the Smartphones Mobiles (Portrait) : 320px to 479px」が表示されるはずです。
スマホを横型(Landscape)にすると「Device = Low Resolution Tablets, Mobiles (Landscape) : 481px to 767px」が表示されるはずです。