← トップページに戻る

CSSレイアウト テストページ

Chrome拡張のキャプチャでCSSレイアウトが正しく再現されるかを検証するページです。

Flexbox

flex-wrap（複数アイテムの折り返し）

1
2
3
4
5
6
7
8

gap（row-gap: 20px, column-gap: 40px）

1
2
3
4
5
6

order（視覚的な並び替え: DOM順 1,2,3,4 → 表示順 3,1,4,2）

1 (order:2)
2 (order:4)
3 (order:1)
4 (order:3)

flex-direction: column

1（上）
2（中）
3（下）

justify-content / align-items バリエーション

justify-content: space-between, align-items: center

1
2
3

justify-content: space-around, align-items: flex-end

1
2
3

justify-content: center, align-items: stretch

1
2
3

flex-grow / flex-shrink

1 (grow:1)
2 (grow:2)
3 (grow:1)

flex-shrink テスト（コンテナ幅 400px）

1 (shrink:1)
2 (shrink:3)
3 (shrink:1)

Grid

grid-template-areas（名前付きエリア）

header
sidebar
main
footer

auto-fill + minmax（レスポンシブグリッド）

1
2
3
4
5
6
7
8

グリッドスパン（行・列をまたぐアイテム）

1 (2列)
2
3 (2行)
4
5 (2列)
6
7
8

grid gap（row-gap: 20px, column-gap: 40px）

1
2
3
4
5
6

明示的な grid-template-columns / rows

1 (100px)
2 (2fr)
3 (1fr)
4 (150px)
5 (100px)
6 (2fr)
7 (1fr)
8 (150px)

マルチカラムレイアウト

column-count: 3

これはマルチカラムレイアウトのテストです。column-countプロパティにより、テキストが3つの段に分割されます。ブラウザが自動的にコンテンツを各段に分配します。

2番目の段落です。十分な量のテキストがあれば、自然に次の段に流れ込みます。キャプチャ時にこの段組みが正しく再現されるかを検証します。

3番目の段落です。各段の幅は均等に割り振られます。テキストの量によって段の高さが変わることがあります。

4番目の段落です。段をまたぐ場合のレイアウト崩れがないかも確認ポイントです。

column-gap: 40px

column-gapを40pxに設定したマルチカラムです。段と段の間隔が通常より広くなっています。

段間のスペースがキャプチャで正しく維持されるかを確認します。

3つ目の段落です。gapが広い分、各段のテキスト幅は狭くなります。

4つ目の段落です。段間が適切に表示されていることを確認してください。

column-rule（段間の罫線）

column-ruleにより段と段の間に罫線が表示されます。この線は2px solidの灰色です。

罫線がキャプチャで正しく表示されるかを確認します。column-ruleは装飾的な要素のため、見落とされやすいプロパティです。

3つ目の段落です。罫線は段間の中央に配置されます。

4つ目の段落です。テキストが罫線と重ならないことも確認してください。

column-span: all（段をまたぐ要素）

column-spanテスト：この段落は通常の3段組みの中にあります。

この見出しは column-span: all で全段をまたぎます

span後の段落です。見出しの下で再び3段組みが続きます。spanの前後でレイアウトが正しく分割されるかを確認します。

2つ目の段落です。段組みが再開されている場合、このテキストは2段目以降に表示されます。

3つ目の段落です。全体のレイアウトが崩れていないことを確認してください。