[HTML / CSS] flexで画像や説明文を横並びさせる

ホームページ作成

# #

Flexboxを使って、画像と説明文のセットを横一列に並べるレイアウトの作り方を説明する。


完成形

下記のようなイメージを作る。

using flexbox


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だけにすると、画像と文字が一列になる。

using flexbox


CSSの用意

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

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

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

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

あとは写真のサイズを変更したり、marginやpaddingで各クラス間の幅を調整すればOK。

HTMLサイトの作り方のまとめ記事はこちら。

HTMLとCSS、Javascriptを使ったwebサイトの作り方まとめ

続きを見る

Related posts