「モバイルファースト」とは

CoddyのHTMLジャーニー「実践的フロントエンド」セクションの一部。レッスン 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を使い、メニューのレイアウトを横並びに変更します。
下の画像の例のように、各メニュー項目（.menu li）にmargin-rightを追加して、項目の間隔を空けます。

自分で試してみよう

<!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>