4-1_必須スキル：レスポンシブデザイン

Webサイトをスマートフォンやタブレットなど、あらゆる画面サイズに最適化する手法がレスポンシブデザインです。

4.1.1. メディアクエリの活用

レスポンシブデザインを実現する鍵が、CSSの**メディアクエリ（Media Queries）**です。これは、特定の条件（画面幅など）が満たされたときにのみ、そのCSSを適用させる仕組みです。

【メディアクエリの基本構文】

/* 画面の最大幅が768px以下の時に適用するCSS */
@media screen and (max-width: 768px) {
  /* ここにスマートフォン用のデザインを記述 */

  /* 例：パソコンでは横並びだったメニューを縦並びに変更 */
  .header-menu {
    flex-direction: column;
    padding: 10px;
  }
}

• max-width: 指定したサイズ以下の画面に適用。
• min-width: 指定したサイズ以上の画面に適用。

この技術により、利用デバイスに関わらず一貫したユーザー体験を提供できます。

Kindle本のご案内