CSSでのflexを使って2コラムレイアウトを作る | Make a two-column layout using flex in CSS

HTML,CSS

CSSでのflexを使って2コラムレイアウトを作る

お台場のチームラボに遊びに行きました。子供たちは不思議な映像の空間世界に圧倒され大騒ぎでした。

HTML <div id=”layout”>
<div id=”picture”>
<img src=” ” width=”300px” height=”200px”>
</div>
<div id=”text”>
<p>お台場の～　　
</div>
</div>

普通に記述していくと上記のようになりますが、CSSのflexを使って横に並べると下記のようになります。
だらだらと下に長く表示しなくて少しすっきり見えます。こんな方法でも簡単に家族旅行のアルバムが作れますね。

お台場のチームラボに遊びに行きました。

帰りは豊洲から竹芝まで電車でなく船で帰ってきました。

HTML <div id=”twolayout”>
<div id=”picture”>
<img src=” ” width=”300px” height=”200px”>
</div>
<div id=”text”>
<p>お台場のチームラボに遊びに行きました。</p>
</div>
<div id=”picture”>
<img src=” ” width=”300px” height=”200px”>
</div>
<div id=”text”>
<p>帰りは豊洲から竹芝まで電車でなく、船で帰ってきました。</p>
</div>
</div>

CSS #twolayout {
display: flex;
}
#text {
padding-left: 5px;
}

こんな形で3つ並べるのもいいかもしれません。

お台場のチームラボに遊びに行きました。

帰りは豊洲から竹芝まで電車でなく船で帰ってきました。

このような船で帰ってきました。

HTML <div id=”twolayout”>
<div id=”picture”>
<img src=” ” width=”200px” height=”200px”>
</div>
<div id=”text”>
<p>お台場のチームラボに遊びに行きました。</p>
</div>
<div id=”picture”>
<img src=” ” width=”200px” height=”200px”>
</div>
<div id=”text”>
<p>帰りは豊洲から竹芝まで電車でなく、船で帰ってきました。</p>
</div>
<div id=”picture”>
<img src=” ” width=”200px” height=”200px”>
</div>
<div id=”text”>
<p>このような船で帰ってきました。</p>
</div>
</div>

CSS #twolayout {
display: flex;
}
#text {
padding-left: 5px;
}

この本を参考に学びました。HTML,CSSの基本を学びながらサイトを作っていきます。この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが1,000円程ならコスパよく、買っておいてよかったと満足してます。