Web ページをデザインするときに最も重要なことは、要素を適切に配置することです。これは、Tailwind の「位置」クラスを使用することで簡単に行うことができます。位置決めにはさまざまなタイプがあり、そのうちの 1 つは静的です。
このブログでは、要素を静的に配置する方法を説明します。
DOM で要素を静的に配置する方法 – Tailwind?
要素は「」を使用して静的に配置できます。 静的 」 ポジションのクラス。静的位置は、HTML 要素のデフォルトの位置です。 「」が付いた要素は、 位置: 静的 」は、CSS スタイルを使用せずに、ページの通常のフローに基づいて配置されます。
構文
「」を適用するための構文 静的 ” クラスは次のとおりです。
<要素 クラス = '静的' > ... < / 要素>
ここで、要素は、position 属性を適用できる任意のタグにすることができます。
静的位置決めの実際の実装については、コードを参照してください。
< 体 クラス = 「テキストセンター」 >< 中心 >
< h1 クラス = 'text-green-600 text-5xl font-bold' >
静的位置の例
< / h1 >
< b >Tailwind CSS 位置クラス< / b >
< ディビジョン クラス = 「静的テキスト-左 p-2 m-2 bg-green-200 h-48」 >
< p クラス = 「太字」 >静的に配置< / p >
< ディビジョン >絶対配置要素< / p >
< / ディビジョン >
< / ディビジョン >
< / 中心 >
< / 体 >
このコードでは:
- 「 テキストセンター 」は、 タグの内容を画面の中央に調整します。
- をセットする ' 「」タグを「」を使用して緑色にします テキスト-グリーン-600 」で文字サイズを5倍に設定 テキスト-5×1 」を使用してフォントを強調します。 太字 ”。
- 二 ' ” 要素も作成され、最初の” の静的な左側の位置が設定されます。 ディビジョン ”を使用して” 静的テキスト左 ”。
- 「」のクラスを割り当てます。 p-2 '、' m-2 '、' bg-グリーン-200 '、' h-48 」を 2 番目の div に設定し、「」を使用してその位置を絶対左下に設定します。 相対下-0 左-0 ' クラス。
出力
上記のコードをファイルに保存し、それによって作成された Web ページをプレビューします。次のように表示されます。
静的に配置された要素は通常のページ フローとともに移動しますが、他の要素は絶対位置を保持します。
結論
ドキュメントの通常のフローで要素を DOM 内に静的に配置するには、「 静的 「追い風のクラス」 位置 ' ユーティリティ。このブログでは、要素を配置する方法を説明しました。 静的に 」を簡単な実践的なデモンストレーションで説明します。