レイアウト

概要

詳細解説

実践手順

1. 1
   Flexboxで横並びにする 3分

   最も基本的なレイアウト。要素を横に並べます。

   • 親要素のdiv（クラス container）を作る
   • その中に子要素（item）を3つ入れる
   • container に display: flex; を適用する

   
                             <style>
   .container {
     display: flex;
     gap: 10px;
   }
   .item {
     padding: 20px;
     background: #e5e7eb;
   }
   </style>
   <div class="container">
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
   </div>
                           

2. 2
   Flexboxで左右に振り分ける（ヘッダー風） 3分

   ロゴを左端、ナビゲーションを右端に配置する、よくあるヘッダーの形を作ります。

   • justify-content: space-between; を使う

   
                             <style>
   .header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: #1f2937;
     color: white;
     padding: 10px 20px;
   }
   </style>
   <div class="header">
     <div>Logo</div>
     <div>[メニュー]</div>
   </div>
                           

3. 3
   Gridで敷き詰める（カード一覧） 5分

   PCでは3列、スマホでは1列で並ぶレスポンシブなカード一覧を作ります。

   • display: grid を使い、列数を指定する

   
                             <style>
   .grid-container {
     display: grid;
     /* 最小200px、余ったら均等に広がる魔法の1行 */
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 16px;
   }
   .card { border: 1px solid #ccc; padding: 20px; }
   </style>
   <div class="grid-container">
     <div class="card">A</div>
     <div class="card">B</div>
     <div class="card">C</div>
     <div class="card">D</div>
   </div>
                           

よくある質問

FlexboxとGridって結局どっち使えばいいの？

横一列（または縦一列）の1次元に並べたい時はFlexboxで、トランプの神経衰弱みたいに縦横の2次元（格子状）にしたい時はGridってイメージが良いかも！！ヘッダーとかはFlex、画像ギャラリーはGridって感じ！

Flexboxの中で文字が長すぎると、折り返さずに突き破っていく…

Flexbox君の「俺たち縮みたくねぇ！」っていう謎の自己主張ですね。折り返したい要素に min-width: 0; を付けると魔法のように大人しく折り返してくれるようになります。CSSの中でもトップクラスの初見殺しデス。

float: left; で横並びにするのはもう古いの？

化石レベルで古いです！昔はそれしか方法がなくて、clearfixとかいう謎の呪文で後始末して超頑張ってたんですが、今はFlexboxがあるのでfloatは本来の「画像の横にテキストを回り込ませたい」時以外は封印推奨です。

スマホ対応で@media (メディアクエリ) 何個も書くのめんどい…

超わかります。最近は画面の幅にあわせて勝手に折り返してくれる flex-wrap とか、Gridの魔法の呪文「repeat(auto-fit, minmax(200px, 1fr))」を使うと、メディアクエリ1行も書かずにスマホ対応できちゃうのでマジで神です。