【Tailwind和訳】LAYOUT/Overflow

この記事について

この記事は、LAYOUT/Overflowの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Overflow

コンテナに対して大きすぎるコンテンツを要素がどのように処理するかを制御するユーティリティ。

クラス	プロパティ
overflow-auto	overflow: auto;
overflow-hidden	overflow: hidden;
overflow-visible	overflow: visible;
overflow-scroll	overflow: scroll;
overflow-x-auto	overflow-x: auto;
overflow-y-auto	overflow-y: auto;
overflow-x-hidden	overflow-x: hidden;
overflow-y-hidden	overflow-y: hidden;
overflow-x-visible	overflow-x: visible;
overflow-y-visible	overflow-y: visible;
overflow-x-scroll	overflow-x: scroll;
overflow-y-scroll	overflow-y: scroll;

Visible

overflow-visibleを使って、要素内のコンテンツがクリップされるのを防ぎます。ただし、要素の境界からはみ出したコンテンツは可視になります。

<div class="overflow-visible h-24 ...">Lorem ipsum dolor sit amet...</div>

Auto

overflow-autoを使用すると、要素のコンテンツがその要素の境界を越えた場合に、その要素にスクロールバーを追加することができます。常にスクロールバーを表示する.overflow-scrollとは異なり、このユーティリティはスクロールが必要な場合にのみスクロールバーを表示します。

<div class="overflow-auto h-32 ...">Lorem ipsum dolor sit amet...</div>

Hidden

overflow-hiddenを使用すると、要素内のコンテンツがその要素の境界からはみ出した場合、そのコンテンツをクリップすることができます。

<div class="overflow-hidden h-32 ...">Lorem ipsum dolor sit amet...</div>

Scroll horizontally if needed

必要に応じて水平方向にスクロールできるよう、overflow-x-autoを使用します。

<div class="overflow-x-auto ...">QrLmmW69vMQD...</div>

Scroll veriitically if needed

必要に応じて、overflow-y-autoを使用して、垂直スクロールを可能にします。

<div class="overflow-y-auto h-32 ...">Lorem ipsum dolor sit amet...</div>

Scroll horizontally always

overflow-x-scrollを使用すると、水平方向のスクロールが可能になり、オペレーティング・システムで常に見えるスクロールバーが無効になっていない限り、常にスクロールバーが表示されます。

<div class="overflow-x-scroll ...">QrLmmW69vMQD...</div>

Scroll vertically always

overflow-y-scrollを使用して、垂直方向のスクロールを可能にし、オペレーティング・システムで常に見えるスクロールバーが無効になっていない限り、常にスクロールバーを表示します。

<div class="overflow-y-scroll h-32 ...">Lorem ipsum dolor sit amet...</div>

Scroll in all directions

要素にスクロールバーを追加するには、overflow-scrollを使用します。必要な場合にのみスクロールバーを表示する .overflow-auto とは異なり、このユーティリティは常にスクロールバーを表示します。なお、一部のオペレーティングシステム（macOS など）では、この設定にかかわらず不要なスクロールバーが非表示になります。

<div class="overflow-scroll h-32 ...">Lorem ipsum dolor sit amet...</div>

レスポンシブ

特定のブレイクポイントでのみoverflowユーティリティを適用するには、既存のクラス名に{screen}: というプレフィックスを追加します。例えば、ある要素にmd:overflow-scrollというクラスを追加すると、中程度のスクリーンサイズ以上でオーバーフロースクロールユーティリティーが適用されます。

<div class="overflow-auto md:overflow-scroll ...">Lorem ipsum dolor sit amet...</div>

Tailwind のレスポンシブデザイン機能の詳細については、レスポンシブデザインのドキュメントをご覧ください。

カスタマイズ

バリアント

デフォルトでは、オーバーフローユーティリティにはレスポンシブバリアントのみが生成されます。

tailwind.config.jsファイルの variants セクションにあるoverflowプロパティを変更することで、オーバーフローユーティリティのために生成されるvariantsをコントロールすることができます。

例えば、この設定ではホバーとフォーカスのバリアントも生成されます。

tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+     overflow: ['hover', 'focus'],
      }
    }
  }

無効化

プロジェクトでオーバーフローユーティリティーを使用する予定がない場合、設定ファイルのcorePluginsl セクションでoverflowプロパティをfalseに設定することで、完全に無効にすることができます。

tailwind.config.js

  module.exports = {
    corePlugins: {
      // ...
+    overflow: false,
    }
  }