どうも、7noteです。今回は要素を横並びにする３つの方法を説明。高級レストランのように綺麗にナイフとフォークを並べましょう。

高級レストランとか、人生でまだいったことないけど、何となくナイフとフォークがナプキンの上にキレイに並んでるイメージがある。
いつか高級レストランでプロポーズを・・・なんちゃって。

完成図

早速、まずは基本から！画像を並べる方法。

①材料はこちら(1人前)

①作り方

1. index.htmlにナイフとフォークの画像を用意するだけ！

1.index.htmlにナイフとフォークの画像を用意するだけ！

<div class="napkin">
	<img src="knife.png" alt="ナイフ">
	<img src="folk.png" alt="フォーク">
</div>

次は、flexboxで左右に並べる方法

②材料はこちら(1人前)

②作り方

1. index.htmlにナイフとフォークの画像を用意（ブロック要素で囲む）！

1. flexboxで要素を横並びにする

1.index.htmlにナイフとフォークの画像を用意（ブロック要素で囲む）！

<div class="napkin">
	<div><img src="knife.png" alt="ナイフ"></div>
	<div><img src="folk.png" alt="フォーク"></div>
</div>

2. flexboxで要素を横並びにする

.napkin {
	display: flex;
}

次は、floatで左右に並べる方法

③材料はこちら(1人前)

③作り方

1. index.htmlにナイフとフォークの画像を用意（ブロック要素で囲む）！

1. floatで要素を横並びにする

1.index.htmlにナイフとフォークの画像を用意（ブロック要素で囲む）！

<div class="napkin">
	<div><img src="knife.png" alt="ナイフ"></div>
	<div><img src="folk.png" alt="フォーク"></div>
</div>

2. floatで要素を横並びにする

.napkin div {
	float: left;
}

解説・作り方のコツ

• 今回の形であれば、①の作り方で十分かなと思います。ただ、配置などを調整することが考えられるのでその場合は②のflexboxなどがいいかなと思います。
• ③float使ってますが、本当はcleafixなどをいれた方がいいのですが、今回は省略。cleafixはまた改めて解説入れたいなぁ。

まとめ

やっぱりflexbox最強。

素材データ配布

真似して作りたい人はこの画像をダウンロードして使ってね！

おそまつ！