こんにちは！今日はWebサイトをレスポンシブデザインにする簡単な方法をご紹介します。難しいコードや複雑な設定は必要ありません！たった3つのステップで、あなたのWebサイトがスマホでも美しく表示されるようになります。
レスポンシブデザインとは？：一度作ったWebサイトが、パソコン、タブレット、スマホなど、様々な画面サイズで自動的に最適な表示になる設計手法です。
1. ビューポートの設定：モバイル表示の基本
まず最初に行うべきことは、HTMLの<head>タグ内にビューポートの設定を追加することです。これはたった1行で、モバイルデバイスでの表示が劇的に改善します！
<meta name="viewport" content="width=device-width, initial-scale=1">
この魔法の1行で何が起こるのでしょうか？
width=device-width：ページの幅をデバイスの画面幅に合わせますinitial-scale=1：初期の表示倍率を1.0（等倍）に設定します
例：このコードがない場合、スマホではデスクトップ版のサイトが小さく表示され、ユーザーは拡大する必要があります。このコードを追加するだけで、スマホ画面に適したサイズで表示されるようになります。
2. メディアクエリ：デバイスに応じてデザインを変える魔法
メディアクエリは、画面サイズに応じて異なるCSSスタイルを適用できる強力な機能です。初心者でも使いこなせるシンプルな書き方を見てみましょう。
/* 基本のスタイル（すべての画面サイズに適用） */
.container {
width: 100%;
padding: 20px;
}
/* タブレット向けのスタイル */
@media (max-width: 768px) {
.container {
padding: 15px;
}
}
/* スマートフォン向けのスタイル */
@media (max-width: 480px) {
.container {
padding: 10px;
}
}
よく使われる主なブレイクポイント（デザインが切り替わる画面幅）は以下の通りです：
- スマートフォン：480px以下
- タブレット：768px以下
- デスクトップ：769px以上
初心者向けヒント：「モバイルファースト」のアプローチがおすすめです。まずはスマホ向けのスタイルを基本として設計し、より大きな画面向けにスタイルを追加していきましょう。
/* 基本（スマホ向け）のスタイル */
.navigation {
display: flex;
flex-direction: column;
}
/* タブレット以上の画面サイズ向け */
@media (min-width: 768px) {
.navigation {
flex-direction: row;
}
}
3. フレキシブル要素：伸び縮みする画像とレイアウト
固定サイズではなく、相対的なサイズやフレキシブルな要素を使うことで、どんな画面サイズでも美しく表示されるデザインが可能になります。
画像を伸縮させる方法
img {
max-width: 100%;
height: auto;
}
このシンプルなCSSで、画像が親要素からはみ出すことなく、画面サイズに合わせて自動的にリサイズされます。
Flexboxで柔軟なレイアウト
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 1 300px; /* 伸び率、縮み率、基本サイズ */
margin: 10px;
}
Flexboxを使うと、要素が画面サイズに応じて自動的に折り返され、柔軟なレイアウトが実現します。
例：上記のコードでは、.itemクラスの要素が300pxを基本サイズとして、画面幅に応じて自動的に並び替わります。デスクトップでは横に3つ並び、タブレットでは2つ、スマホでは1つずつ表示されるようなレイアウトが簡単に実現できます。
相対的な単位を使う
固定サイズのpxではなく、相対的な単位を使いましょう：
%：親要素に対する割合em：親要素のフォントサイズを基準とした相対値rem：ルート要素のフォントサイズを基準とした相対値vw：ビューポート幅の1%vh：ビューポート高さの1%
body {
font-size: 16px;
}
h1 {
font-size: 2rem; /* 32px相当 */
}
.container {
width: 90%; /* 画面の90% */
max-width: 1200px; /* 最大幅は1200px */
margin: 0 auto;
}