[B! html][**css] slay-tのブックマーク

slay-t id:slay-t

htmlと**cssに関するslay-tのブックマーク (3)

プログラムによるレイアウト制御のための CSS Grid を考える
この記事は、既存のCSSのレイアウトの文脈ではなく、「プログラムから制御されるレイアウト」をいかに綺麗に制御・生成するか、です。複雑なSPAや何らかのオーサリング環境で、主に JavaScript の視点からレイアウトを扱うのに Grid をどう活かしていくか、という話。 grid-template-areas の視覚的な対応 IEがない世界では CSS grid のフル機能を使うことができます。自分が grid を使う際、今まで grid-template-areas を気に入って使っていました。これは CSS の視覚的な情報が最終的な表示と一致する、という理由からです。例えば、 svelte で書いた grid-template-areas を使ったレイアウト設定のコードはこんな感じになります。。 <div class="grid"> <div style="grid-area:
slay-t 2021/10/14
css

プログラム

html

Program

レイアウト

**css

layout

SCRIPT
リンク
「CSS完全に理解した」でCSS完全に理解する - Qiita
1：導入例の「CSS完全に理解した」Tシャツ。色々な方が話している通り、あれを意図的にやろうとすると実はなかなか難しい。むしろ、「CSS完全に理解した」を再現するコードを書くたびに我々はCSSの完全理解に近づけるんじゃ無いだろうか？ CSS完全に理解したでCSS完全に理解すればもっとCSS完全に理解したできるんじゃ無いかとにかく何かよくわからない追求心にとらわれた我々（約1名）は「CSS完全に理解した」を理解するために色々な方法でこれを再現することにしました。以下に「CSS完全に理解した」するための数々の方法について書いていこうと思います。 2：前提前提条件が限定されていないと無限の「CSS完全に理解した」状態を作り出せることになってしまうので、今回は以下の画像のように、まず、「CSS完全に理解したわけではない」状態を再現し、ここに手を加えることで「CSS完全に理解した」状態
slay-t 2021/03/17
css

html

qiita

**css
リンク
CSSでテキストが1行に収まるときだけ中央寄せする
ときどき1行に満たないテキストは中央寄せしたいが、1行以上になる場合は左寄せしたいことがある。これはCSSだけで簡単に実現できる。こんなHTMLを用意してみる。短いテキストと長いテキスト、どちらも同じHTML構造になっている。
slay-t 2020/12/04
css

container

dev

class

ec

html

**css
リンク
1