雑記

座学再開

全ての要素をdivに内包させた場合

全ての要素をそのまま置いた場合

全ての要素をdivに内包させた場合_要素2つver

全ての要素をそのまま置いた場合_要素2つver

色使いが90年代のそれ。一旦昼寝。

スモーク味というのはベーコン味ということね　完全に理解した

3列×2行の6マス作っても、1マス目に全要素を重ねるように置くと2行目が無くなる。（grid-template-rowsをautoにした場合）

grid-template-rowsを50% 50%にした場合は6マス全て表示される。

入れ子にすると可愛らしい感じになる。grid-template-rowsを50% 50%にすると普通にオーバーフローする。

display(MDN)
個人用リンク。値多すぎじゃないですかね。

■要素をグリッドの領域全体に表示させる（子要素のサイズを親要素に合わせる？）方法を調べる

CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説
どういう場合にgrid、flexを使うかを解説してくれてる記事。投げ銭したくなる内容。
「Flexboxは1次元、CSS Gridは2次元」を覚えるようにする。

object-fit(MDN)
個人用リンク。やりたいこととは関係ないようだった。

とりあえずpに対してwidth 100%、height 100%を入れてみる

ブラウザのcssが指定したmarginが適用されていてfitしていない。
「ブラウザ側のcssをリセットするcss」というのもあるらしい。今はまだ考えなくて良さそう。

marginを0にしたら良い感じになった。

ついでに中央揃えの練習をする。

width 90%、height 90%にする。

意気揚々とpにjustify-selfとalign-selfを適用してみたけど何ら位置が変わらない・・・(　´ω｀)
div（親）、div（子）、p（孫）　親に対してpが孫だったから変わらなかった模様。
3/20にやったことが頭に入っていない。悲しい。

div（子）に適用したらp（孫）が縮んだ。

div（子）のサイズを90%にして、Pの方のサイズを100%に戻したら良い感じになった。

text-align centerで横位置は中央寄せになったけど、縦位置が中央に寄らない。
これが配置が魔境な理由・・・

Pをフレックスアイテム化して解決。独学の場合、この方法が正しいのかが分からないところが難点。
あくまで解決法の1つとして覚えておくようにする。
flexが主流じゃない時代にどうやって縦位置を中央寄せにしていたのだろうか・・・
positionを駆使していたっぽいけど、情報が見当たらない。

とりあえず今日は寝。