---

---

第8回：ホームページをスマホやタブレットでも見やすく！レスポンシブデザインの基本

前回は、CSSグリッドレイアウトとフレックスレイアウトについて解説しました。

今回は、ホームページをスマートフォンやタブレットなどの様々なデバイスでも見やすく表示させるためのレスポンシブデザインの基本について解説します。

レスポンシブデザインとは

レスポンシブデザインとは、画面サイズに合わせてレイアウトを自動的に調整するデザイン手法です。近年では、スマートフォンやタブレットなどの利用者が増えているため、レスポンシブデザインは必須の技術となっています。

レスポンシブデザインの基本的な考え方

レスポンシブデザインの基本的な考え方は、以下の3つです。

• 流動グリッドレイアウト
  固定幅のレイアウトではなく、画面サイズに合わせて要素の幅や高さを調整するレイアウトを使用します。
• メディアクエリ
  画面サイズやデバイスの種類に応じて、CSSのスタイルを切り替えます。
• フレックスボックス
  要素を柔軟に配置できるフレックスボックスを使用することで、様々な画面サイズに対応したレイアウトを実現しやすくなります。

例

以下のコードは、メディアクエリを使用して、画面サイズが768px以下の場合にレイアウトを変更する例です。

/* デフォルトのスタイル */
.container {
  width: 100%;
}

.box1 {
  width: 50%;
  float: left;
}

.box2 {
  width: 50%;
  float: right;
}

/* 画面サイズが768px以下の場合 */
@media screen and (max-width: 768px) {
  .container {
    width: 90%;
  }

  .box1 {
    width: 100%;
    margin-bottom: 10px;
  }

  .box2 {
    width: 100%;
  }
}

まとめ

今回は、レスポンシブデザインの基本について解説しました。
レスポンシブデザインをマスターすれば、より多くの人にホームページを見てもらうことができるようになります。

次回からは、さらに高度なレスポンシブデザインテクニックや、JavaScriptを使った機能追加について解説していきますので、ぜひご期待ください！