【Tailwind和訳】LAYOUT/Clear

この記事について

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

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

Clear

要素の周りのコンテンツの折り返しを制御するためのユーティリティ。

クラス	プロパティ
clear-left	clear: left;
clear-right	clear: right;
clear-both	clear: both;
clear-none	clear: none;

Clear left

clear-left を使用して、要素を先行する左フローティング要素の下に配置します。

<img class="float-left ..." src="path/to/image.jpg" />
<img class="float-right ..." src="path/to/image.jpg" />
<p class="clear-left ...">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula.
  Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac
  rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras
  convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor
  magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem
  posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius
  vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend
  turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus
  justo. Etiam eu vehicula felis.
</p>

Clear right

右に配置されている先行する要素の下に要素を配置するには、clear-right を使用します。

<img class="float-left ..." src="path/to/image.jpg" />
<img class="float-right ..." src="path/to/image.jpg" />
<p class="clear-right ...">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula.
  Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac
  rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras
  convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor
  magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem
  posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius
  vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend
  turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus
  justo. Etiam eu vehicula felis.
</p>

Clear both

要素を先行するすべてのフローティング要素の下に配置するには、clear-both を使用します。

<img class="float-left ..." src="path/to/image.jpg" />
<img class="float-right ..." src="path/to/image.jpg" />
<p class="clear-both ...">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula.
  Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac
  rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras
  convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor
  magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem
  posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius
  vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend
  turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus
  justo. Etiam eu vehicula felis.
</p>

Don't clear

要素に適用されているクリアをリセットするには、clear-noneを使用します。これは、clear プロパティのデフォルト値です。

<img class="float-left ..." src="path/to/image.jpg" />
<img class="float-right ..." src="path/to/image.jpg" />
<p class="clear-none ...">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula.
  Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac
  rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras
  convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor
  magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem
  posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius
  vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend
  turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus
  justo. Etiam eu vehicula felis.
</p>

レスポンシブ

特定のブレークポイントで要素の clear プロパティを制御するには、既存の clear ユーティリティーに{screen}:というプレフィックスを追加します。例えば、md:clear-leftを使用すると、中程度のスクリーンサイズ以上でのみclear-leftユーティリティを適用できます。

<p class="clear-right md:clear-left ...">
  <!-- ... -->
</p>

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

カスタマイズ

バリアント

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

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

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

tailwind.config.js

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

無効化

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

tailwind.config.js

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