【CSS】スマホ表示は1列、PC表示は2列にする方法（Flexbox＋メディアクエリ）

ウェブサイトを作るときには、スマホとパソコンでレイアウトを変えたい場面がよくあります。例えばスマホでは1列で縦に並べたいけれど、PCでは2列で横並びに見せたいというケースです。

この記事ではCSSのFlexboxとメディアクエリを使って、スマホは1列、PCは2列に切り替わるシンプルなサンプルコードを紹介します。初心者の方でも理解しやすいように手順を追って解説していきます。

表示確認

以下はスマホでは1列、PCでは2列で表示したリストの完成形です。

コード

スマホとPCでの表示の違いは、ブラウザのウインドウ幅を変更するだけで確認できます。コードをコピーして貼り付け、実際に動作をチェックしてみてください。

HTML

<ul>
  <li>阪神タイガース</li>
  <li>読売ジャイアンツ</li>
  <li>横浜DeNAベイスターズ</li>
  <li>広島東洋カープ</li>
  <li>中日ドラゴンズ</li>
  <li>東京ヤクルトスワローズ</li>
</ul>

CSS

ul {
  width: 90%;
  margin: 0 auto;
  padding: 12px;
  border: 1px solid #ccc;
  font-size: 18px;
  list-style: none;

  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* li同士の隙間を固定で空ける */
}

li {
  flex: 1 1 100%; /* デフォルトは幅100%、つまり1列 */
  height: 50px;
  background-color: blue;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 768px) {
  /* 768px以上はパソコン用の幅 */
  li {
    flex: 1 1 45%; /* だいたい2列になる幅 */
  }
}

解説

ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* li同士の隙間を固定で空ける */
}

ulをFlexコンテナにして、子要素を横並びにします。
flex-wrap: wrap;で折り返しを可能にし、gapでli同士の間隔を固定しています。

li {
  flex: 1 1 100%; /* デフォルトは幅100%、つまり1列 */
  display: flex;
  justify-content: center;
  align-items: center;
}

flex: 1 1 100%; は、3つの設定をまとめて書いた省略形です。

• flex-grow: 1 → 余白があるとき、要素を他の要素と同じ比率で広げる
• flex-shrink: 1 → 幅が足りないとき、要素を他の要素と同じ比率で縮める
• flex-basis: 100% → 基本の幅は100%で、スマホでは1列になる

まとめると、この設定によって スマホでは1列で表示され、画面幅に応じて要素の幅が自動で伸びたり縮んだりする という動きを作れます。

display: flex; justify-content: center; align-items: center; により、liの中身が縦横中央に配置されます。

@media (min-width: 768px) {
  li {
    flex: 1 1 45%; /* だいたい2列になる幅 */
  }
}

画面幅が768px以上になると、flex-basisが45％に変わります。これにより横に2列並ぶレイアウトになります。

---

まとめ
スマホでは1列表示、PCでは2列表示に自動で切り替わります。flex: 1 1 100% とメディアクエリの組み合わせで柔軟な列幅が実現されます。

Web制作を学ぶならUdemy

私は動画学習プラットフォームのUdemyでプログラミングを学習しています。
HTML・CSS・JavaScriptの基本から本格的なWebアプリ制作まで学べます。

興味がある方はUdemyの講座をチェックしてください。

実際に私が受講した講座はこちら👇

Udemyでは頻繁にセールをやっていて、90％オフになることも！
気になる講座はセール時に購入するのがおすすめです。