オタケ

TailwindCSS Grid テクニックを6記事で網羅。auto-fit・col-span・row-span・grid-template-areas・fr単位・place-* を使ったダッシュボー ...

TailwindCSS row-span は CSS Grid で要素を縦方向に複数行跨ぐためのユーティリティです。基本の行結合、grid-rows-N との N 不整合の罠、row-span-ful ...

TailwindCSS fr 単位は CSS Grid で残り領域を比率で配分する単位です。固定+可変、比率指定、minmax(0, 1fr) で長文崩れの罠を回避するテクニックを実例付きで解説します ...

TailwindCSS grid-template-areas は専用ユーティリティがなく任意値構文で書きます。col-span+row-span 方式との違い、領域名ミスマッチ、レスポンシブ切替の正 ...

TailwindCSS place-items を含む place-* クラスでつまずきがちな3つのポイントを解説。Flex の癖で冗長になる中央配置、place-items と place-cont ...

TailwindCSS col-span でカラムを結合したいのに効かない、はみ出してしまう、ブレークポイントごとに冗長な記述になる——こうした典型的な落とし穴を、実例コードと画像で解説する3つのテク ...

TailwindCSS auto-fit でレスポンシブグリッドを作る方法をテクニック三選で解説。ブレークポイント不要のカード列数自動調整、auto-fit と auto-fill の使い分け、サイド ...

TailwindCSS レイアウト 効かない原因と解決策を30パターンで網羅。Flexbox、Grid、position、サイズ指定など、カテゴリ別に整理した逆引きリストで、あなたの「効かない」をすぐ ...

TailwindCSS aspect-ratio（アスペクト比）が思い通りにならない？aspect-video が効かない、画像が歪む、iframe のレスポンシブ対応など、よくある3つの落とし穴と解 ...

TailwindCSS width height（幅・高さ）が思い通りにならない？h-full が効かない、w-full で画面幅にならない、max-w が効かないなど、よくある3つの落とし穴と解決法 ...