#2
チュートリアル

Tutorial 基礎編

自分のための備忘録です。

画像

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

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

サンプル

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

テスト

配置

Flexボックス

title
Flex body.

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プロパティを指定することが推奨されているが、今回は理解を深めるために指定していしていない