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