デザインコード紹介

Chapter4 レイアウト

Flexboxレイアウト – 横並び1行レイアウト

更新日:

横並び1行レイアウトのWebデザイン画像

HTML

<div class="wrap">
  <div class="item">
    <img src="picture01.jpg" alt="パソコンを前に談笑している写真">
    <h2>横並び見出し</h2>
    <p>横並びレイアウトをFlexboxで実装します。</p>
  </div>
  … (繰り返し)
</div>

CSS

.wrap {
  display: flex;
  justify-content: space-between;
}

.item {
  padding: 30px;
  width: 32%;
  background-color: #d6d6d6;
  border-radius: 10px;
}

できるだけ誌面とコードの色を近づけるように調整しましたが、印刷物と画面表示との差異はどうしても発生してしまいます。サポートサイトでご確認いただける色が実際に表示されます。