画像

pictureタグで画面サイズに応じた画像の出し分け

動作: 画面サイズが767px以下の場合は、320x160pxのサイズの画像を表示。

デバイスピクセル比(DevicePixelRatio）に応じた画像の出し分け(imgタグ）

配置

Flexボックス

Floatボックス

ref.https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

float指定なし

ブロック要素は包含要素の幅いっぱいに広がり、上から配置される。

float指定あり

floatを指定した要素は、文字通り浮動ボックスになる。後続する要素は浮動ボックに対して回り込むように配置される。

CSS2.1からwidthを指定しないときは内容を計算して設定される。

float指定あり2

両方にfloat:left/rightをした例（以前はレイアウトなどで使われた）。 どちらも浮動ボックスのために、合計が包含ボックスの幅を超える場合は一方が下に配置される。

※ floatプロパティにleft, rightを指定した場合は、基本はwidthプロパティを指定することが推奨されているが、今回は理解を深めるために指定していしていない