CSSグリッド作成
CSS Grid Builder
名前を付けた領域でグリッドを目で見ながら組み、grid-templateのCSSを出力します。
セルを押して名前を付けた領域をグリッドに塗り、仕様の長方形規則に合っているかを確かめたうえで`grid-template-areas`を出します。希望すれば線番号でも出します。この確認が大事なのは、不正な領域リストはどこにもエラーを残さず黙って捨てられるからです。
グリッド
サイズの欄には 1fr·240px·auto·minmax(200px, 1fr) が書けます。
セルを押すと、下に入れた名前の領域になります。ひとつ押してからもうひとつ押すと、その間の長方形がひとつの領域として埋まります。同じ名前のセルをもう一度押すと空になります。
CSS
プレビュー
覚えておく規則はひとつだけです
名前を付けた領域は必ず長方形でなければなりません（CSS Grid Level 2 §7.3.1）。L 字形にすると、エラーひとつ出ないまま grid-template-areas 全体が捨てられます。このツールが CSS を書く前に知らせるのはそのためです。同じトラックが三つ以上続くときは repeat() でまとめて書きます。
一次元の配置なら Flexboxプレイグラウンドのほうが簡単です。
使い方
ひな形から始めます
ヘッダー・サイドバー・本文・フッター、カードの列、ダッシュボード、中央寄せの記事があります。空のグリッドから自分で組んでも構いません。
領域に名前を付けてセルを押します
名前を入力してからセルを押します。1つ押してからもう1つ押すと、そのあいだの長方形が埋まります。同じ名前のセルをもう一度押すと消えます。
トラックの大きさを決めます
上と左の欄に`1fr`、`240px`、`auto`、`minmax(200px, 1fr)`を書けます。同じトラックが3つ以上あれば`repeat()`で書き出します。
よくある質問
L字型の領域が使えないのはなぜですか。
名前を付けた領域は長方形でなければならないからです。CSS Grid Level 2 §7.3.1です。そうでなければ`grid-template-areas`の宣言全体が無効になり、ブラウザはエラーも出さずに捨てます。このツールがCSSを書き出す前に知らせるのが、受け取れる唯一の警告です。
名前を付けた領域と線番号のどちらを使いますか。
領域のほうが読みやすく、トラックが1本挿し込まれても生き残ります。あるブレークポイントには存在しないトラックを項目がまたぐときや、グリッドが動的に作られるときは線番号しかありません。切り替えでどちらも出せます。
セルをひとつ空けるにはどうしますか。
名前を付けなければ空きます。テンプレートには`.`と書かれますが、これは仕様が定めた空セルの記号です。空セル1つにつき点1つで、それがいくつ並んでも、名前を付けた領域はやはり長方形でなければなりません。
`fr`なのに中身より小さくならないのはなぜですか。
`1fr`は実は`minmax(auto, 1fr)`で、その`auto`の最小値がコンテンツの大きさだからです。中身より狭くなれるトラックが要るなら`minmax(0, 1fr)`を使ってください。縮まないgridの子要素に対する古典的な対処法です。
ここから渡せます
次の一手
このツールが出したものをそのまま受け取れる道具です。
可変サイズのclamp()計算
Fluid Size Calculator
2つのビューポート幅のあいだでサイズがなめらかに変わるclamp()の式を計算します。
CSS整形・圧縮
CSS Beautifier & Minifier
並べ替えを一切せずにCSSを整形または圧縮し、トークンの並びをそのまま保ちます。
Flexboxプレイグラウンド
Flexbox Playground
実例の上でflexの各プロパティを切り替え、出来上がるCSSと各プロパティが何を変えたのかを表示します。
カラーコード変換
Colour Format Converter
HEX・RGB・HSL・HWB・LAB・LCH・OKLCHのあいだで色を変換し、いちばん近い色名も示します。
カラーピッカー
Colour Picker
OKLCHの色域から、画面のスポイトで、またはアップロードした画像から色を選び、好きな表記でコピーします。
コントラスト比チェッカー
Contrast Checker
文字色と背景色の組み合わせをWCAG 2とAPCAで採点し、基準を満たす最も近い色を提案します。