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だけにすると、画像と文字が一列になる。
CSSの用意
横にするときは、display: flex;を指定すると、要素が並列になる。
text-align: center;で、文字が中心にそって整理される。
.offer-wrapper{
height:500px;
text-align:center;
}
.offers{
display: flex;
flex-direction: row;
justify-content: center;
}
あとは写真のサイズを変更したり、marginやpaddingで各クラス間の幅を調整すればOK。
HTMLサイトの作り方のまとめ記事はこちら。
[st-card myclass=”” id=3358 label=”” pc_height=”” name=”” bgcolor=”” color=”” fontawesome=”” readmore=”on”]
レスポンシブルに対応していないのですが。。。
CSSに追加が必要でしょうか。
コメントありがとうございます。
はい、レスポンシブに対応させるにはHTMLやCSSに追加が必要です。以下3点確認してみると良いかと思いました。
①viewportタグをhead内に書いているか。
レスポンシブに対応させるには、viewportのタグをheadタグ内に記載する必要があります。
②@media (max-width:〇〇px) { }の記載
レスポンシブのデザインに変えるには、CSSに以下の記載が必要です。
@media (max-width:〇〇px) {
}
③ レスポンシブ用にCSSを記載
レスポンシブ用にwidthを変えるとか、横一列から縦一列に変えるとか、何らかの記載をする必要があります。