ナビゲーションのメニュー、横に並んだカード、アイコンと文字のセット——Webでよく見る「横並び」。これをきれいに作れるのが Flexbox（フレックスボックス）です。現代のCSSレイアウトの主役で、ここを覚えると一気に”それらしい”ページが作れます。
親にdisplay
まず、並べたいものを1つの親（<div> など）で囲みます。
<div class="row">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
そして、その親に display: flex; をつけます。
.row {
display: flex;
}
これだけで、ふだんは縦に積まれるA・B・Cが、横一列に並びます。display の仲間ですね。「並び方を display で決める」——その感覚がここで効いてきます。
すき間と寄せ方を整える
Flexboxには、並びを整える便利な相棒がいます。
.row {
display: flex;
gap: 16px;
justify-content: center;
align-items: center;
}
gap … 部品どうしのすき間justify-content … 横方向の寄せ（center 中央 / space-between 両端に散らす）align-items … 縦方向のそろえ（center で高さの中央にそろう）
この3つを覚えるだけで、「中央にまとめる」「等間隔に散らす」といった、よく使う配置がほとんど作れます。
このレッスンのまとめ
- 横に並べたい部品の親に
display: flex;
gap ですき間、justify-content で横、align-items で縦をととのえるdisplay の仲間——「並び方を決める」道具
:::
やってみよう：ヘッダー・写真・SNSリンクを横並びに
ヘッダーの中の「名前」と「ナビ」を横一列に離し、SNSリンクの2つも横並びにしましょう。名前のロゴ部分には新しくclass="brand"をつけ、SNSリンクの2つは新しく<div class="socials">で囲みます。
<header class="lp-header">
<span class="brand"><img src="/shima/hand.png" alt="" />しまちゃん</span>
<nav class="nav">
...
</nav>
</header>
<div class="socials">
<a class="social" href="https://www.youtube.com/">▶ YouTube</a>
<a class="social" href="mailto:[email protected]">✉ メール</a>
</div>
.lp-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 13px 34px;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
font-weight: bold;
font-size: 16px;
}
.brand img {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #fdece4;
}
.nav {
display: flex;
gap: 6px;
}
.socials {
display: flex;
gap: 12px;
justify-content: center;
margin-top: 20px;
}
.lp-headerは「名前を左、ナビを右」に離すjustify-content: space-between;。.brandは小さなロゴ画像と名前を横一列にそろえる、ミニチュア版のFlexbox。.navは中のリンクを横一列に。.socialsはSNSリンク2つを中央によせて横に並べます。
もう1か所、Flexboxが活躍する場所があります。しまちゃんの写真、じつはまだまるい台紙の上に乗っていません。写真を<div class="hero__disc">という丸い台紙でくるみ、class="hero__art"をつけた<figure>全体を「縦にセンタリングする」Flexboxで整えましょう。
<figure class="hero__art">
<div class="hero__disc">
<img src="/shima/hand.png" alt="しまちゃんの写真">
</div>
<figcaption class="hero__caption">はじめまして、しまちゃんです</figcaption>
</figure>
.hero__art {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0;
}
.hero__disc {
width: 280px;
height: 280px;
border-radius: 50%;
background-color: #fbf1cf;
border: 1px solid #e9e3d9;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
justify-content: center;
}
.hero__disc img {
width: 66%;
height: auto;
border-radius: 0;
box-shadow: none;
}
.hero__caption {
font-size: 13px;
color: #6b635c;
}
.hero__artはflex-direction: column;で「台紙→キャプション」を縦に積み、align-items: center;で中央にそろえます。写真そのものは.hero__discという大きな丸の中に浮かべるだけなので、写真自身の丸め・影は.hero__disc imgでいったんリセットしています。丸を二重に重ねるのではなく、台紙の丸だけを主役にする作りです。
バラバラに縦積みだった部品が、それぞれ横一列に整い、写真も丸い台紙に乗りました。