CSS の論理プロパティ

CSS では、論理プロパティを使用すると、開発者は物理的なレイアウトではなく、Web ページの論理構造に基づいてスタイルを定義できます。これは、テキストの方向またはコンテンツ フローに基づいて CSS を適用できることを意味します。

主に論理属性を使用して、HTML 要素のマージン、パディング、境界線を設定します。これには、マージン、パディング、境界線のプロパティのさまざまなバリエーションが含まれています。

論理プロパティは、ブロックレベルおよびインラインディメンションに基づいて定義できます。

• ブロック ディメンション - ブロック ディメンションは、コンテンツ フローの垂直方向を表します。たとえば、英語のテキストの方向は左から右です。そのため、ブロック ディメンションはコンテンツの上部と下部を処理します。要素。＃＃＃＃＃＃

• インライン ディメンション

  - インライン ディメンションは、コンテンツまたはテキストの方向と同じ方向を表します。英語の場合、左側と右側はインラインディメンションです。

CSS でよく使用される論理プロパティをいくつか見てみましょう。

• Border-block

  -上下の境界線を設定します。

• Border-inline

  -左右の境界線を設定します。

• Border-block-start

  - 上の境界線を設定します。

• Border-block-end

  -下枠を設定します。

• Margin-inline

  -左右のマージンを設定します。

• Padding-inline

  -左右のパディングを設定します。

• Padding-inline-start

  -左パディングを設定します。

• Margin-inline-end

  - 下部のパディングを設定します。

• Border-inline-end-width

  -右の境界線の幅を設定します。

• Border-block-start-style

  -上枠のスタイルを設定します。

上記のプロパティでは、上部と下部に 'block' を使用し、左側と右側に 'inline' を使用する必要があることがわかります。また、左側と上部には 'start'、右側と下部には 'end' を使用する必要があることがわかります。 .

通常の CSS プロパティの代わりに論理プロパティを使用する必要があるのはなぜですか?

上記のプロパティの機能を観察すると、最初に頭に浮かぶのは、通常の CSS プロパティを使用して同じスタイルを実現できるかどうか、そしてなぜ論理プロパティを使用する必要があるのか​​ということです。ここにあなたの答えがあります。

HTML 要素の左右の余白を設定する必要がある場合があります。これを行うには、margin 属性の「0 auto」値を使用するか、margin-left と margin-right の CSS プロパティをそれぞれ使用します。 「0 auto」を使用すると、上マージンと下マージンが以前に適用されていた場合は、その値も変更されます。したがって、「margin-inline」CSS プロパティを使用することをお勧めします。

リーリー ＃＃＃文法＃＃＃

ユーザーは以下の構文に従って CSS で論理プロパティを使用できます。

リーリー

上記の構文では、他の CSS プロパティと同様に論理プロパティを使用します。

例 1 (マージンとパディングの論理プロパティ)

以下の例では、2 つの div 要素を作成し、その中にテキストを追加します。 CSS では、「padding-block-start」、「padding-inline-start」、および「margin-block-end」論理 CSS プロパティを使用して、最初の div の上下のパディングと下マージンを設定しました。

さらに、「margin-inline-end」論理 CSS プロパティを使用して、div 要素に右パディングを追加しました。

リーリー

例 2

以下の例では、境界線に関連する論理 CSS プロパティを示しています。「border-block-start」を使用して上境界線を適用し、「border-block-end」を使用して下境界線を適用しました。さらに、「border-inline-start」を使用して左の境界線を適用し、「border-inline-end」を使用して右の境界線を適用しました。

出力では、ユーザーは div 要素のさまざまな側面のさまざまな境界線を確認できます。

リーリー

例 3

は次のように翻訳されます:

例 3

以下の例では、フレックスボックスのマージンとパディングに関連する CSS 論理プロパティを適用しました。ここでは、コンテナー div 要素内に 3 つの div 要素を作成しました。その後、「padding-inline」を使用してコンテナの div 要素に左右のパディングを適用します。

リーリー

ユーザーは CSS で論理属性を使用する方法を学びました。ほとんどの論理プロパティは、マージン、パディング、および境界線に関連します。ただし、オーバーフローに関連する論理プロパティもいくつか存在しており、開発者はインターネット上で参照できます。論理プロパティを操作する場合、ユーザーは「開始」と「終了」の方向だけでなく、「ブロック」と「インライン」の次元にも注目する必要があります。

以上がCSS の論理プロパティの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。