Tailwind CSS では、「 ボックスデコレーションブレイク 」プロパティは、要素が複数の行または列にまたがる場合の要素の背景、境界線、およびパディングのレンダリングを決定します。 2 つのクラスがあります。 スライス ' と ' クローン ”。ユーザーは、ブレークポイントとメディア クエリで「box-decoration-break」プロパティを使用して、デバイスの幅に応じて要素のレイアウトと外観がどのように変化するかを決定し、ブレークポイントに基づいてさまざまなスタイルを適用できます。
この記事では、ブレークポイントとメディア クエリを使用してボックス デコレーション ブレークを使用する方法を説明します。
Tailwind でブレークポイントとメディア クエリを使用してボックス デコレーション ブレークを使用する方法
ブレークポイントとメディア クエリでボックス デコレーション ブレークを使用するには、HTML プログラムでさまざまな画面サイズに応じてさまざまな値とスタイルを定義する必要があります。次に、検証用の HTML プログラムを実行して Web ページを表示します。
より深く理解するには、以下の手順を確認してください。
ステップ 1: ボックス デコレーション ブレークでブレークポイントとメディア クエリを使用する
HTML プログラムを作成し、さまざまな画面サイズに応じてさまざまな値とスタイルを指定します。たとえば、「 MD ' と ' LG 」ブレークポイントとそのスタイル:
< 体 >< スパン クラス = 「bg-teal-600 box-decoration-clone md:bg- yellow-500 lg:box-decoration-slice text-white text-3xl px-2」 >
こんにちは < br />
Linux < br />
ヒント
スパン >
体 >
ここ：
- 「 bg-ティール-600 」を選択すると、背景にティール色が設定されます。
- 「 ボックス装飾クローン 」は、クローンボックスの装飾に使用されるカスタムクラスです。
- 「 md:bg-黄-500 ” の 要素に黄色の背景色を適用します。 MD 」ブレークポイント (中サイズの画面)。
- 「 lg:ボックス装飾スライス 」のボックス装飾にスライス効果を設定します。 LG ” ブレークポイント (大画面)。
- 「 文字白 」はテキストに白色を設定します。
- 「 テキスト-3xl 」はフォント サイズを 3xl に設定します。
- 「 ピクセル-2 」は、2 ピクセルの水平パディングを 要素に追加します。
ステップ 2: 出力を確認する
ブレークポイントとメディア クエリが正常に適用されたことを確認するには、HTML プログラムを実行し、Web ページを表示します。
ブレークポイントとメディア クエリが定義された内容に応じて Web ページが変化していることがわかります。
結論
Tailwind でブレークポイントとメディア クエリを使用してボックス デコレーション ブレークを使用するには、まず HTML ファイルを作成します。次に、画面サイズごとに異なる値とスタイルを指定して、HTML プログラムでブレークポイントとメディア クエリを使用します。確認するには、HTML プログラムを実行して Web ページを表示します。この記事では、ブレークポイントとメディア クエリでボックス デコレーション ブレークを使用する方法を説明しました。