ガイドは新しいページに入った。 developer.mozilla.org グリッド線に沿って配置するのが王道なんだけども、そうではないやり方もある。 アスキーアートっぽいやり方が。 いや、ガイドにそう書いてあんだもんよ("we sometimes call this the ascii-art metho…

ここからは developer.mozilla.org を読む。エゲレス語の文書を読んでいて、かつ、私の英語能力がプアなので、英語そのままの用語が出てきたり、 英文をそのまま引用したり、内容を勘違いしていたりするかもしれない。知ったこっちゃないけど。 あと、少しペ…

今度はdisplay: contentsとの関係の話。また知らない子の登場である。 ちょっと調べてみたところ、display: contentsを指定すると起きることは あたかもその内容がタグで囲われていないように扱われるということのようだ。ほっほーう。 DOMツリー上、レベル…

グリッドコンテナやアイテムが絶対位置指定のブロックとどういう関係になるか、見てみる。 出発点は、こんなHTMLとCSS。box3に長い文章が含まれている。 div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3"> このブロックに絶対位置を指定する。 グリッドコンテナがブロックを含</div>…

残念だが、ここから翻訳がなくなっているのでエゲレス語を読むしかない。とほほ。 さて、フレックスボックスとfrとminmax()を使ったグリッドは、一列の幅いっぱいにアイテムが 広がるという意味では似ている。しかし、全体の幅を広げたり狭めたりしたときに …

フレックスボックスでアイテムの配置を制御して、こんな風に並べてみる。 指定しているCSSはこんな感じだ。 wrapper { display: flex; align-items: flex-end; min-height: 200px; } .wrapper > div{ padding: 1em; } .box1 { align-self: stretch; } .box2 …

ここからは、 developer.mozilla.org の内容に入る。 グリッドとフレックスボックスの違いについてが最初のテーマ。 しかし、音に聞くBootstrapとはなんぞと遅まきながら調べてみたら、 最近はCSSのグリッドもいいらしいぜという経緯で勉強をはじめているた…

スタートはこの状態から。 グリッドアイテムは同じセルを占有することができる。つまり、重なってもいい。重ねてみる。 今、わざと各コンテンツの背景色の透過度opacityを0.5にしてあるので、重なっているのがよくわかる。 しかし、これだとどちらが上にある…

Firefoxの開発者ツールのGrid Inspectorのオプションには"Display line numbers"という項目があって、 これにチェックを入れるとグリッド線の番号がわかる。縦横それぞれに1から始まる番号がついている。 コンテンツの配置位置をこのグリッド線を使って指定…

暗黙的なグリッドと明示的なグリッドについて説明されている。 例えば、この状況。 2行3列のグリッドが出来ているけど、CSSで指定しているのはgrid-template-columnsだけ。 だから、列は「明示的」だけど行は「暗黙的」ということになる。 暗黙的なグリッド…

developer.mozilla.org これを読んでる。 まず、初っぱなはここからスタートする。 HTMLはこんなの。 <div class="wrapper"> <div class="one">One</div> <div class="two">Two</div> <div class="three">Three</div> <div class="four">Four</div> <div class="five">Five</div> <div class="six">Six</div> </body> CSSはこんなの。重なってもわかるように半透明の色をつけてます。 .wrap…

フロントの技術について知らなさすぎるので、今度はCSSを勉強してみたい。 というわけで、CSS GRIDをやる。なぜかその前にBootstrapのhowtoビデオを見た エゲレス語が難しいので0.5倍速で見た。時間がかかった。コンセプトはわかったけど、HTMLの魔改造ぶり…