ドキュメントブログショーケースプラス
  1. レイアウト
  2. display

レイアウト

display

要素のdisplayボックスタイプを制御するためのユーティリティ。

クラススタイル
inline
display: inline;
block
display: block;
inline-block
display: inline-block;
flow-root
display: flow-root;
flex
display: flex;
inline-flex
display: inline-flex;
grid
display: grid;
inline-grid
display: inline-grid;
contents
display: contents;
table
display: table;

例

ブロックとインライン

inline、inline-block、およびblockユーティリティを使用して、テキストと要素のフローを制御します。

テキストのフローを制御する場合、CSSプロパティを使用すると display: inline 要素内のテキストは通常どおり折り返されます。

プロパティを使用すると display: inline-block 要素が折り返され、内部のテキストが親要素を超えて拡張するのを防ぎます。

最後に、プロパティを使用すると display: block 要素が独自の行に配置され、親要素を埋め尽くします。
<p>
  When controlling the flow of text, using the CSS property <span class="inline">display: inline</span> will cause the
  text inside the element to wrap normally.
</p>
<p>
  While using the property <span class="inline-block">display: inline-block</span> will wrap the element to prevent the
  text inside from extending beyond its parent.
</p>
<p>
  Lastly, using the property <span class="block">display: block</span> will put the element on its own line and fill its
  parent.
</p>

フロールート

flow-rootユーティリティを使用して、独自のブロック整形コンテキストを持つブロックレベル要素を作成します。

あのな、坊や。ニューヨーク公共図書館って書いてあるちっちゃいスタンプ知ってるか？お前さんには何の意味もないかもしれないが、俺には大きな意味があるんだ。とてつもなく大きな意味がな。
笑いたきゃ笑えよ。お前みたいなタイプは見たことがある。派手で、イケてて、慣習を鼻で笑うやつだ。ああ、お前が何を考えてるか知ってるぞ。こいつは何で古本のことで大騒ぎしてるんだ？いいか坊や、ヒントをやるよ。
<div class="p-4">
  <div class="flow-root ...">
    <div class="my-4 ...">Well, let me tell you something, ...</div>
  </div>
  <div class="flow-root ...">
    <div class="my-4 ...">Sure, go ahead, laugh if you want...</div>
  </div>
</div>

フレックス

flexユーティリティを使用して、ブロックレベルのFlexコンテナを作成します。

アンドリュー・アルフレッドテクニカルアドバイザー
<div class="flex items-center">
  <img src="path/to/image.jpg" />
  <div>
    <strong>Andrew Alfred</strong>
    <span>Technical advisor</span>
  </div>
</div>

インラインフレックス

inline-flexユーティリティを使用して、テキストと一緒にフローするインラインFlexコンテナを作成します。

今日、ミシガン州ではボトルが10セントで返品できるのに、ここでは5セントにしかならないという事実を利用する方法を一日中調べていました。 クレイマー あらゆる可能なアプローチで数値を計算した結果、それがうまくいかないと何度も言ってくるのですが、私はどうにかしてうまくいく方法があると信じなければなりません。ここにはあまりにも多くのチャンスがあるのです。

<p>
  Today I spent most of the day researching ways to ...
  <span class="inline-flex items-baseline">
    <img src="/img/kramer.jpg" class="mx-1 size-5 self-center rounded-full" />
    <span>Kramer</span>
  </span>
  keeps telling me there is no way to make it work, that ...
</p>

グリッド

gridユーティリティを使用して、グリッドコンテナを作成します。

01
02
03
04
05
06
07
08
09
<div class="grid grid-cols-3 grid-rows-3 gap-4">
  <!-- ... -->
</div>

インライングリッド

inline-gridユーティリティを使用して、インライングリッドコンテナを作成します。

01
02
03
04
05
06
01
02
03
04
05
06
<span class="inline-grid grid-cols-3 gap-4">
  <span>01</span>
  <span>02</span>
  <span>03</span>
  <span>04</span>
  <span>05</span>
  <span>06</span>
</span>
<span class="inline-grid grid-cols-3 gap-4">
  <span>01</span>
  <span>02</span>
  <span>03</span>
  <span>04</span>
  <span>05</span>
  <span>06</span>
</span>

コンテンツ

contentsユーティリティを使用して、子要素が親要素の直接の子要素のように動作する「ファントム」コンテナを作成します。

01
02
03
04
<div class="flex ...">
  <div class="flex-1 ...">01</div>
  <div class="contents">
    <div class="flex-1 ...">02</div>
    <div class="flex-1 ...">03</div>
  </div>
  <div class="flex-1 ...">04</div>
</div>

テーブル

table、table-row、table-cell、table-caption、table-column、table-column-group、table-header-group、table-row-group、およびtable-footer-groupユーティリティを使用して、それぞれのテーブル要素のように動作する要素を作成します。

曲
アーティスト
年
The Sliding Mr. Bones (Next Stop, Pottersville)
Malcolm Lockyer
1961
Witchy Woman
The Eagles
1972
Shining Star
Earth, Wind, and Fire
1975
<div class="table w-full ...">
  <div class="table-header-group ...">
    <div class="table-row">
      <div class="table-cell text-left ...">Song</div>
      <div class="table-cell text-left ...">Artist</div>
      <div class="table-cell text-left ...">Year</div>
    </div>
  </div>
  <div class="table-row-group">
    <div class="table-row">
      <div class="table-cell ...">The Sliding Mr. Bones (Next Stop, Pottersville)</div>
      <div class="table-cell ...">Malcolm Lockyer</div>
      <div class="table-cell ...">1961</div>
    </div>
    <div class="table-row">
      <div class="table-cell ...">Witchy Woman</div>
      <div class="table-cell ...">The Eagles</div>
      <div class="table-cell ...">1972</div>
    </div>
    <div class="table-row">
      <div class="table-cell ...">Shining Star</div>
      <div class="table-cell ...">Earth, Wind, and Fire</div>
      <div class="table-cell ...">1975</div>
    </div>
  </div>
</div>

非表示

hiddenユーティリティを使用して、ドキュメントから要素を削除します。

02
03
<div class="flex ...">
  <div class="hidden ...">01</div>
  <div>02</div>
  <div>03</div>
</div>

要素を視覚的に非表示にするが、ドキュメントには残したい場合は、代わりにvisibilityプロパティを使用してください。

スクリーンリーダー専用

sr-onlyを使用して、要素をスクリーンリーダーから隠さずに視覚的に非表示にします。

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only">Settings</span>
</a>

not-sr-onlyを使用してsr-onlyを元に戻し、要素をスクリーンリーダーだけでなく、目の見えるユーザーにも表示するようにします。

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only sm:not-sr-only">Settings</span>
</a>

これは、例えば小さな画面では何かを視覚的に非表示にし、大きな画面では表示したい場合に役立ちます。

レスポンシブデザイン

プレフィックスa displayユーティリティ md:のようなブレークポイントバリアントを使用すると、ユーティリティを適用するのはmedium 以上の画面サイズのみになります。

<div class="flex md:inline-flex ...">
  <!-- ... -->
</div>

バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。

このページについて

Copyright © 2025 Tailwind Labs Inc.·商標ポリシー