どうも、7noteです。今回は要素を横並びにする３つの方法を説明。高級レストランのように綺麗にナイフとフォークを並べましょう。
高級レストランとか、人生でまだいったことないけど、何となくナイフとフォークがナプキンの上にキレイに並んでるイメージがある。
いつか高級レストランでプロポーズを・・・なんちゃって。
完成図
早速、まずは基本から！画像を並べる方法。
①材料はこちら(1人前)
| ファイル | CSSプロパティ | 意味 |
|---|---|---|
| index.html | ||
| knife.png | ナイフの画像 | |
| folk.png | フォークの画像 |
①作り方
- index.htmlにナイフとフォークの画像を用意するだけ！
1.index.htmlにナイフとフォークの画像を用意するだけ！
index.html
<divclass="napkin"><imgsrc="knife.png"alt="ナイフ"><imgsrc="folk.png"alt="フォーク"></div>①＼完成／
画像
次は、flexboxで左右に並べる方法
②材料はこちら(1人前)
| ファイル | CSSプロパティ | 意味 |
|---|---|---|
| index.html | ||
| style.css | display: flex; | 要素を横並びにする |
| knife.png | ナイフの画像 | |
| folk.png | フォークの画像 |
②作り方
- index.htmlにナイフとフォークの画像を用意（ブロック要素で囲む）！
- flexboxで要素を横並びにする
1.index.htmlにナイフとフォークの画像を用意（ブロック要素で囲む）！
index.html
<divclass="napkin"><div><imgsrc="knife.png"alt="ナイフ"></div><div><imgsrc="folk.png"alt="フォーク"></div></div>2. flexboxで要素を横並びにする
style.css
.napkin{display:flex;}次は、floatで左右に並べる方法
③材料はこちら(1人前)
| ファイル | CSSプロパティ | 意味 |
|---|---|---|
| index.html | ||
| style.css | float: ~~; | 要素を浮かせて横並びにする |
| knife.png | ナイフの画像 | |
| folk.png | フォークの画像 |
③作り方
- index.htmlにナイフとフォークの画像を用意（ブロック要素で囲む）！
- floatで要素を横並びにする
1.index.htmlにナイフとフォークの画像を用意（ブロック要素で囲む）！
index.html
<divclass="napkin"><div><imgsrc="knife.png"alt="ナイフ"></div><div><imgsrc="folk.png"alt="フォーク"></div></div>2. floatで要素を横並びにする
style.css
.napkindiv{float:left;}解説・作り方のコツ
- 今回の形であれば、①の作り方で十分かなと思います。ただ、配置などを調整することが考えられるのでその場合は②のflexboxなどがいいかなと思います。
- ③float使ってますが、本当はcleafixなどをいれた方がいいのですが、今回は省略。cleafixはまた改めて解説入れたいなぁ。
まとめ
やっぱりflexbox最強。
素材データ配布
真似して作りたい人はこの画像をダウンロードして使ってね！
おそまつ！
（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）