「モバイルファースト」の意味

CoddyのHTMLジャーニー「Practical Frontend」セクションの一部 — レッスン 6/35。

モバイルファーストは、最初にモバイルデバイス向けにウェブサイトを構築し、その後、より大きな画面に合わせて段階的に拡張していく設計戦略です。
主な考え方は、現在ほとんどのユーザーがスマートフォンでウェブを閲覧しているため、小さな画面から始めることで、大多数の訪問者にとってサイトが適切に機能することを保証するというものです。

まず、モバイル用のスタイルを記述することから始めましょう：

body {
  font-size: 16px;
  padding: 10px;
}

次に、メディアクエリを使用して、より大きな画面に合わせてデザインを調整します：

/* 768pxより広いデバイス向けのスタイル */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

このアプローチにより、まず小さな画面でサイトが適切に動作することを保証し、その後、より大きなデバイスのユーザー向けにエクスペリエンスを向上させます。

チャレンジ

簡単

シンプルなナビゲーションメニューを含むHTMLが提供されています。あなたのタスクは、モバイルファーストの手法を使用してスタイルを設定することです。

1. 最初にモバイルスタイルを設定する

各メニュー項目がコンテナの全幅を占めるようにします（垂直方向に積み重ねます）。
リンクを display: block にして、全幅を占めるようにします。その他のスタイリング（色、ボーダーなど）は自由です。下の例の画像のようになるかもしれません。

2. より大きな画面のスタイル

min-width: 768px の画面用のメディアクエリが既に用意されています。
その中で、.menu に対して display: flex を使用して、メニューのレイアウトを水平方向に変更します。
メニュー項目間の間隔を調整して、下の例の画像と一致するようにします。

チートシート

モバイルファーストは、最初にモバイルデバイス向けにウェブサイトを構築し、その後、より大きな画面に合わせて段階的に拡張していく設計戦略です。

まず、モバイル用のスタイルを記述することから始めます：

body {
  font-size: 16px;
  padding: 10px;
}

次に、メディアクエリを使用して、より大きな画面に合わせてデザインを調整します：

/* 768pxより広いデバイス向けのスタイル */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

このアプローチにより、サイトがまず小さな画面で適切に動作することを保証し、その上で大きなデバイスのユーザー向けに体験を向上させることができます。

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
  <title>What “mobile-first” means</title>
  <style>
    /* Write your mobile-first CSS here */
    .menu {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .menu li {
      margin-bottom: 10px;
    }
    
    .menu a {
      
    }
    
    /* Bigger screen styles */
    @media (min-width: 768px) {
      .menu {
       
      }
      
      .menu li {
      
      }
    }
  </style>
</head>
<body>
  <nav>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>