この記事では、Tailwind で対角分数を使用する方法を説明します。
Tailwind CSS で対角分数を使用するには?
Tailwind の対角分数クラスは、分子と分母を小さくし、スラッシュで区切る事前定義された数値フォント バリアントです。これにより、分数の数字がテキストの他の部分と区別できるようになります。
構文
「」を使用する構文 対角分数 」クラスは次のとおりです。
< ディビジョン クラス = 「対角分数」 >
< ディビジョン / >
上記の構文からわかるように、開発者は「 対角分数 ' の中に ' クラス ” 要素の属性。
実際の例として「diagonal-fractions」クラスを使用してみましょう。以下のデモでは、ユーザーは通常の分数と対角分数の違いを確認できます。
< ディビジョン クラス = 「bg-slate-200 テキストセンターテキスト-lg」 >< p >通常の分数: 3 / 5 6 / 3 6 / 5 < / p >
< p クラス = 「対角分数」 >対角分数: 3 / 5 6 / 3 6 / 5 < / p >
< / ディビジョン >
上記のコードの説明は次のとおりです。
- ” ディビジョン ” 要素が作成され、「」を使用して背景色として提供されます。 bg-{色}-{数字} ' クラス。
- 次に、テキストは大きなフォント サイズで提供され、「 テキスト-lg ' そして ' テキストセンター 」のクラスをそれぞれ設定します。
- 次に、2つの「 ” 要素が作成され、2 番目の要素には “ 対角分数 ' クラス。
出力：
対角分数と法線分数の違いは、上記の出力ではっきりとわかります。
ブレークポイントを使用した対角分数クラスの使用
ブレークポイントは、Tailwind のメディア クエリとして使用されます。最小幅が指定されたデフォルトのブレークポイントが 5 つあります。これらのブレークポイントは、Tailwind の任意のクラスで使用して、応答性の高い動的なデザイン レイアウトを作成できます。
「」を使用するには 対角分数 Tailwind にブレークポイントを含むクラスを作成するには、次の構文が使用されます。
{ ブレークポイントのプレフィックス } : 対角分数以下の表は、Tailwind のさまざまなブレークポイントの最小幅を示しています。
| ブレークポイントのプレフィックス | 最小幅 |
|---|---|
| sm | 640ピクセル |
| MD | 768ピクセル |
| LG | 1024ピクセル |
| XL | 1280ピクセル |
| 2XL | 1536ピクセル |
「」でブレークポイントを使用しましょう 対角分数 」クラスを使用して、その使用法を実際に理解します。
< ディビジョン クラス = 「bg-slate-200 text-center text-lg md:diagonal-fractions」 >3/4、7/8、5/4、6/5
< / ディビジョン >
上記のコードでは、div 要素が「 md:対角分数 ” のときに数値の分数のフォントを変更するクラス MD ” ブレークポイントに到達しました。
出力
出力でわかるように、小数は、「 MD ” ブレークポイントに到達しました:
追い風状態での対角分数クラスの使用
Tailwind はデフォルトで「 州 」を使用して、特定の状態がトリガーされたときに要素にデザイン プロパティを提供します。これにより、デザイン レイアウトがより魅力的でダイナミックになります。 Tailwind の状態で「diagonal-fractions」クラスを使用するには、次の構文が使用されます。
{ 州 } : 対角分数Tailwind によって提供されるデフォルトの状態は次のとおりです。
- ホバー: ユーザーが要素の上にカーソルを置いたとき。
- 集中： ユーザーが要素に移動してその要素に注目したとき。
- アクティブ： ユーザーが要素をクリックしてアクティブ化したとき。
- 無効にする: ユーザーが要素をアクティブ化することを許可されていない場合。
以下のデモは、「 対角分数 「」のクラス ホバリング 」 Tailwind の状態:
< ディビジョン クラス = 「bg-slate-200 text-center text-lg hover:diagonal-fractions」 >3/4、7/8、5/4、6/5
< / ディビジョン >
” ディビジョン 上記のコードの「」要素は「」によって提供されます。 ホバー:対角分数 」クラスは、分数の通常のフォントを斜めの分数フォントに変更します。
出力
出力でわかるように、ユーザーがマウス カーソルを上に置くと、分数の数値フォントが変わります。
Tailwind CSS での対角分数クラスの使用については以上です。
結論
Tailwind CSS で対角分数を使用するには、「 対角分数 ' クラス。このクラスは分子と分母をスラッシュで区切って小さくします。ユーザーは、Tailwind のデフォルトのブレークポイントと状態で「diagonal-fractions」クラスを使用して、設計をより動的にすることもできます。この記事では、Tailwind で対角分数を使用する手順を説明しました。