こんにちは！
よっしーです！
今日は「レスポンシブ」について
の説明をしていこうと
思います！
なぜレスポンシブが
必要なのか
Webサイトがパソコンだけ
でなくスマートフォンやタブレットなど、
さまざまな端末で見られるからです。
あなたのせっかく作ったサイト、
スマホで見たら
文字が小さすぎたり、
画像がはみ出していませんか？
それはすごくもったいないです。
綺麗なサイトでも画面のサイズが
変わるとレイアウトが崩れると
伝わらなくなってしまいます。
そのため、「画面の大きさに
合わせて見た目を整えること」
はとても大切です。
これを実現するのが
「レスポンシブデザイン」。
目次
- メディアクエリでスマホ画面に対応
- 画像サイズは「%」で柔軟に対応
- レイアウト切り替え
- 【まとめ】
今回はWeb制作
初心者でも取り入れやすく、
効果的な方法を紹介していきます。
1. メディアクエリでスマホ画面に対応
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
.section {
padding: 10px;
}
}このコードは、「画面幅が768px以下
（＝スマホ）」になったときに
適用されるCSSです。
文字サイズやセクションの余白を
スマホ用に調整することで、読みやすく
ストレスのない表示を実現できます。
ポイントは、は以下の2点です。
- max-width: 768px は「最大768pxまで」を意味し、スマホ向けスタイルによく使われます。
- 必ず @media screen and (…) という形式で記述しましょう（()がないと無効になります）
2. 画像サイズは「%」で柔軟に対応
レイアウトの切り替え（Flexboxとメディアクエリ）
.image {
width: 100%;
max-width: 600px;
height: auto;
}このコードは、画像が
親要素に収まるよう自動調整される
ようにしています。
ポイントは以下の3点です。
- width: 100% → スマホでもはみ出さず表示される
- max-width: 600px → 大きい画面でも拡大しすぎないよう制限
- height: auto → 画像の縦横比が崩れない
これにより、どんな端末でも
きれいに画像が表示される
ようになります。
3. レイアウト切り替え
.flex-box {
display: flex;
flex-direction: column;
}
@media screen and (min-width: 768px) {
.flex-box {
flex-direction: row;
}
}この例では、スマホでは縦並び／PCでは横並びになるように設定しています。
ポイントは、は以下の2点です。
- デフォルトは column（縦並び）にしておくのが安全
- PCでは row（横並び）に切り替えると自然な見た目になる
例えば、サービスや実績の紹介などに活用できます！
【まとめ】
CSSのレスポンシブ対応は、
少しの工夫でサイト全体の
見やすさがグッと上がります。
今回紹介した3つのポイント：
- メディアクエリでスマホ用に文字や余白を調整
- 画像サイズを%指定で柔軟に対応させる
- Flexbox + メディアクエリ
これらを押さえるだけでも、
プロっぽくて見やすいサイトに
グッと近づきます！
CSSは「サイトの印象を
大きく左右する力」を
持っています。
完璧じゃなくても大丈夫。
一歩ずつ慣れていけば、
あなたにもきっとできます！
あなたの学習を、
心から応援しています😊
私の公式ラインで
Web制作に役に立つ情報の発信や
学習の相談やサポートを
おこなっているので
ぜひお気軽に
話しかけてみてください！
よっしーの公式ライン【画像をタップ↓】
0件のコメント