Tool
Grid & Flexbox Playground
HTML を編集し、全幅のプレビューで配置・間隔・折り返しを調整します。ドラッグした結果を CSS としてコピーできます。
間隔・揃え方・コンテナーの高さを調整
auto は内容に合わせます。各要素で個別に上書きできます。
指定した場合だけ CSS に出力します。
2プレビューで操作
要素を選び、右・下・右下のハンドルをドラッグして伸縮。左上のハンドルで移動できます。ハンドルは矢印キーでも操作できます。
order が小さい要素から並び、同じ値なら HTML の記述順になります。見た目の順番を変更し、HTML 自体の順序は保持します。ドラッグ時は表示順に order を0から振り直します。
選択した要素の範囲を編集
縦いっぱいは指定した行数が対象です。下にはみ出す場合は行数を増やしてください。開始位置を重ねると要素も重なります。
プレビューの枠・背景は確認用です。コンテナーの高さは内容に合わせ、必要な場合だけ min-height を指定できます。
3HTML を編集・コードをコピー
HTML の変更は自動でプレビューに反映します。
body 内の構造を編集してください（3万文字・300要素まで）。CSS・script・外部参照や操作用の属性はプレビューとコピーする HTML から除去します。