@media (min-width: ;){}を用いたレスポンシブデザインのコードを紹介します。
スマホ・タブレット・PCの3つを想定し、表示されるテキストを変えたり、レイアウトを変えたりできます。
実装例とコード
スマホで見ている人は、PCやタブレットでも見てみてください。（スマホの向きを変えても見れるかも。）
PCで見ている人は、ウィンドウサイズを狭くしたり広くしたりしてみてください。
画面サイズで、フォントサイズとカラーが変わります！
（下記テーブル参照）
| 画面サイズ | フォントサイズ | 文字色 |
|---|---|---|
| 768px未満 | 16px | 赤 |
| 768px以上、1280px未満 | 20px | 青 |
| 1280px以上 | 24px | 黒 |
HTML/CSSコードは こちら
CSSのメディアクエリ@media (min-width: ;){}を使うことで、画面サイズが指定した幅以上になったとき、{}で囲われたスタイルを適用させることができます。
例として、画面サイズに応じてdiv要素のサイズや背景色を変更するコードは以下のとおりです。
- 画面サイズが800px未満
-
「幅100px ✕ 高さ100px」「背景が赤」のdiv要素
- 画面サイズが800px以上
-
「幅200px ✕ 高さ200px」「背景が青」のdiv要素
div {
width: 100px;
height: 100px;
background-color: red;
}
@media (min-width: 800px) {
div {
width: 200px;
height: 200px;
background-color: blue;
}
}この例での切り替わりポイントは一つ（800px）だけですが、複数のポイントを作ることも可能です。
本記事の実装例のように、スマホ／タブレット／PCの3つのデバイスに対応しておくのがベストでしょう。
ブレイクポイントについて
代表的なデバイスであるPC・タブレット・スマホの3つを想定し、以下の通り設定しました。
- スマホ想定
-
768px未満
- タブレット想定
-
768〜1280px未満
- PC想定
-
1280px以上
ブレイクポイントは こちらのサイトを参考にしました。
これらのブレイクポイントに注意してデザイン設計すると、ほぼ全てのデバイスに対応できそうです。（2022年12月）
画面サイズを変えると、フォントのサイズと色が変わる
HTML/CSS コードはこちら
<p>画面の大きさでフォントサイズとカラーが変わります！</p>p {
font-size: 16px;
color: red;
text-align: center;
}
@media (min-width: 768px) {
p {
font-size: 20px;
color: blue;
}
}
@media (min-width: 1280px) {
p {
font-size: 24px;
color: black;
}
}- CSSは後から書いたものが優先される（スタイルが上書きされる）ことを利用し、ブラウザ幅の条件を小さい順に書くことで実装できる。
（このようなメディアクエリを「モバイルファースト」とも呼ぶ。）
画面サイズを変えると、フォントのサイズと色に加えてテキストも変わる
ブラウザ幅に応じてdisplay: none;とdisplay: block;を使い分けることで、表示テキストを変えられます。
HTML/CSS コードはこちら
<p id="p-1">768px未満の画面サイズです！（スマホ想定）</p>
<p id="p-2">1280px未満の画面サイズです！（タブレット想定）</p>
<p id="p-3">1280px以上の画面サイズです！（PC想定）</p>p {
font-weight: bold;
text-align: center;
}
#p-1 {
font-size: 16px;
color: red;
}
#p-2 {
font-size: 20px;
color: blue;
display: none;
}
#p-3 {
font-size: 24px;
color: black;
display: none;
}
@media (min-width: 768px) {
#p-1 {
display: none;
}
#p-2 {
display: block;
}
}
@media (min-width: 1280px) {
#p-2 {
display: none;
}
#p-3 {
display: block;
}
}- CSSは後から書いたものが優先される（スタイルが上書きされる）ことを利用し、ブラウザ幅の条件を小さい順に書くことで実装できる。
（このようなメディアクエリを「モバイルファースト」とも呼ぶ。） display: none;で非表示にし、display: block;で表示させる。
画面サイズを変えると、画像の並び方（レイアウト）やサイズが変わる
ブラウザ幅に応じてフレックスボックスdisplay: flex;の条件を使い分けることで、レイアウトを変えられます。
HTML/CSS コードはこちら
<div>
<div id="box-1"></div>
<div id="box-2"></div>
<div id="box-3"></div>
</div>#box-1 {
width: 80%;
height: 100px;
background-color: skyblue;
margin: 0 auto;
}
#box-2 {
width: 80%;
height: 100px;
background-color: tomato;
margin: 0 auto;
}
#box-3 {
width: 80%;
height: 100px;
background-color: limegreen;
margin: 0 auto;
}
@media (min-width: 768px) {
div {
display: flex;
justify-content: center;
}
}
@media (min-width: 1280px) {
#box-1 {
flex: 2;
}
#box-2 {
flex: 1;
}
#box-3 {
flex: 1;
}
}- CSSは後から書いたものが優先される（スタイルが上書きされる）ことを利用し、ブラウザ幅の条件を小さい順に書くことで実装できる。
（このようなメディアクエリを「モバイルファースト」とも呼ぶ。） - レイアウトの調整（要素を横並びにしたりサイズを変えたり）はフレックスボックス
display: flex;が便利！
フレックスボックスの使い方は こちらの記事 にまとめています。
【応用】ヘッダー（ハンバーガーメニュー）を作る
メディアクエリを使えば、以下のようなヘッダーを作ることもできます。
【実装例】
画面幅を800px以下にすると、ハンバーガーメニュー（三本線アイコン）が表示されます。
詳細は以下記事で解説していますので、実装してみたい方は合わせてご覧ください。
まとめ
以上、CSSのメディアクエリという記法を用い、ウィンドウ幅に応じてデザインを変える方法（レスポンシブウェブデザイン）を紹介しました。
デバイスが多様化する中、それぞれのサイズに応じてレイアウトを考えるのは正直面倒ではあるのですが、表示が崩れているとどうしてもそのサイトの信用度が下がってしまいます。
特に現代では、PCよりスマホ表示がメインです。
最低でもPCとスマホ表示は問題ないように、レスポンシブデザインを使えるようにしておきましょう！
また、スマホのタップ操作に対応したイベントもあります。
余裕があれば、是非こちらも合わせて用意してみてください！
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
