Frontend Technology

[HTML / CSS] 画像や説明文を横一列に並べるレイアウトを作る方法

2021-01-13

画像と説明文のセットを横一列に並べるレイアウトを作った時の備忘録。

下記のようなイメージ。

HTMLの用意

まずはHTMLを用意する。

「offers」の中に、「offer」のdivが3つ入っている。

それぞれ「offer」のdiv の中に、img, h2, pを入れている。

<div class="offer-wrapper">
    <div class= "container">
    <h1>What We Offer</h1>
    <div class="offers">
      <div class="offer">
        <img src="./cafe.png">
        <h2>Cafe</h2>
        <p>こだわりのコーヒーを用意しました。森の中で深い味わいをお楽しみください。</p>
      </div>
      <div class="offer">
        <img src="./cozyroom.png">
        <h2>Room</h2>
        <p>木に囲まれた、贅沢ではないけど、どこかほっと落ち着くお部屋です。</p>
      </div>
      <div class="offer">
        <img src="./yoga.png">
        <h2>Yoga</h2>
        <p>ヨガを通して自分を見つめる。この忙しい社会だからこそ、自分を見つめることが大切です。</p>
      </div>
    </div>
    </div>
  </div>

HTMLだけにすると、画像と文字が一列になる。

CSSの用意

横にするときは、display: flex;を指定すると、要素が並列になる。

text-align: center;で、文字が中心にそって整理される。

.offer-wrapper{
  height:500px;
  text-align:center;
}

.offers{
  display: flex;
  flex-direction: row;
  justify-content: center;
}

あとは写真のサイズとか、文章の幅とかのサイズを調整すればOK。

-Frontend, Technology