使い方を教えてください。

画面の入力欄に処理したい値を入れるだけで、CSS display一覧が即座に結果を表示します。コピーボタンで結果をワンクリックでクリップボードに送れます。

料金はかかりますか？

CSS display一覧は完全無料です。登録やログイン、課金、アプリのインストールは不要で、ブラウザがあればすぐに利用できます。

デザイン・CSS無料登録不要

CSS display一覧

CSSのdisplayプロパティの値と挙動を比較解説する無料オンラインツール。

Input

Result

値              幅              改行    子要素配置
──────────────────────────────────────────
block          親幅100%        前後    縦に積む
inline         コンテンツ幅     なし    横に並ぶ
inline-block   コンテンツ幅     なし    横に並ぶ(幅高さ指定可)
flex           親幅100%        前後    横/縦に柔軟配置
inline-flex    コンテンツ幅     なし    横/縦に柔軟配置
grid           親幅100%        前後    格子状に配置
inline-grid    コンテンツ幅     なし    格子状に配置
none           非表示           -      -
contents       自身なし         -      子のみ表示
table          テーブル         前後    セル配置
list-item      block+マーカー   前後    リスト項目

--- よく使うパターン ---
中央揃え: display:flex; justify-content:center; align-items:center;
横並び:   display:flex; gap:1rem;
格子:     display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;

FAQ

よくある質問

運営維持のため一部ページに広告を表示していますが、ツール本体の動作を妨げない範囲に留めています。ブロッカーを利用されても機能は動作します。

こちらもおすすめ

CSS display値一覧

CSS display値一覧を表示する無料オンラインツール。CSS display値一覧をブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。

Flexboxガイド

CSS Flexboxの主要プロパティと値の早見表。レイアウト設計の参考に便利な無料オンラインツール。

CSS Gridガイド

CSS Gridの主要プロパティと値の早見表。2次元レイアウト設計に便利な無料オンラインツール。

CSS position解説

CSSのpositionプロパティ(static/relative/absolute/fixed/sticky)の違いと使い方を解説する無料オンラインツール。

border-radiusジェネレーター

CSSのborder-radiusをGUIで視覚的に調整。4隅個別・楕円形の角丸にも対応。コードをコピーしてすぐ使える無料オンラインツール。

Box Shadow生成

CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。コード即コピーの無料ツール。

読み込み中...