HP初心者講座
パソコンではきれいに見えるのに、スマホで見ると崩れている…という経験ありませんか？
そんなときに必要なのが「レスポンシブデザイン」です。
今回は、初心者でもすぐできるスマホ対応の基本を紹介します。
レスポンシブデザインとは？
パソコン・タブレット・スマホなど、画面サイズに合わせてデザインを自動調整すること。
いまはスマホからの閲覧が約8割とも言われているので、対応は必須です！
CSSで簡単にスマホ対応する方法
まずは「viewport」タグを追加
<meta name="viewport" content="width=device-width, initial-scale=1.0">これをHTMLの<head>内に入れるだけで、スマホ見たときに自動で縮小表示されます。
※PCレイアウトのまま表示されます。
CSSで画面サイズ別に調整する（メディアクエリ）
/* スマートフォンでの表示 */
p {
font-size: 16px;
padding: 8px;
}
.container {
display: block;
}
/* タブレットでの表示 */
@media (min-width: 768px) {
p {
font-size: 20px;
padding: 32px;
}
.container {
display: flex;
}
}幅768px以下（スマホ）と幅768px以上（タブレット・PC）で文字サイズなどを変更しています。
※ブレイクポイントを768pxとした場合
よくある調整ポイント
- 文字が小さすぎないか？
- ボタンが押しやすいか？
- 画像がはみ出していないか？
見た目だけでなく、「使いやすさ（ユーザビリティ）」も大事です。
まとめ
<meta viewport>でまずはスマホ対応
@mediaで画面サイズ別にCSSを調整
「見た目＋使いやすさ」で差がつく！
初心者の皆様へ
「スマホで見たらレイアウトが崩れる…」
「PCもスマホも同じ表示になる…」
そんな方は、私がココナラに出品しているWebサイト制作サービスをご利用ください。
- 高品質テンプレートでデザインも安心
- 自分で更新できるWebサイト（WordPress）
- 実用的な機能多数
- 操作マニュアル付き
- 公開後2週間の無料サポート
