図解用の格子付きインボックス開発

ちょっと実験

背景画像を用意しなくても良いように、固定サイズのインボックスを試してみる。

横300pxなら小さなデバイスでもそのまま表示できる。backgroundにlinear-gradientで位置が分かりやすいように25%,50%,75%の位置に線を入れて格子(lattice)にしてみる。

成功。これで画像なしで行ける。

縦を変えても格子は健在♪

いいね。これを画像を入れるインボックス(zky)とは別の名前にするか…

→グリッド線があるから「Grd1」が良いかな

「Grd-ibx1」完成

無印

バリエ(フィット)

重畳クラス「F」を指定するとwidthもheightも「fit-content」になり、中身にフィットする。(inline-blockでないので中央寄せは「margin:● auto;」で足る)