ホームページ >ウェブフロントエンド >CSSチュートリアル >チートシート付きのCSS論理プロパティの完全なガイド

チートシート付きのCSS論理プロパティの完全なガイド

William Shakespeareオリジナル: 2025-02-08 11:04:10488ブラウズ

この記事では、CSSの論理プロパティに飛び込みます。それらが何であるか、どのように機能し、何に役立つかを見ていきます。また、CSSの論理プロパティを物理的な等価物と簡単に比較できるように、便利なチートシートも提供します。

自分で論理的なプロパティを使用しないことを選択したとしても、ますます多くのWebサイトとオンラインデモのコードに表示され始めているため、それらに慣れることをお勧めします。たとえば、

これに出くわすかもしれません：

CSSの論理的特性に精通していない限り、それはおそらくあなたにとってそれほど意味はありません。読み進めたら、すぐに論理的な財産忍者になります！

<span>p {
</span>  <span>margin-block-start: 1em;
</span><span>}
</span>

便利な論理プロパティPDFチートシートをダウンロードします

キーテイクアウト

CSS論理プロパティは、コンピューター画面の物理的寸法の代わりにテキストの方向に基づいて、幅、高さ、パディング、マージン、境界などのプロパティを宣言する新しい方法を提供します。

論理プロパティは、テキストの方向の変更に適応できるため、複数の言語バージョンを備えたWebサイトに特に役立ちます。また、メディアやコンテナのクエリによるテキスト方向の変更への適応性など、単一言語のウェブサイトにも利点があります。

CSS論理的プロパティには、サイズ、マージン、パディング、挿入図、境界線、境界半径、フローティングとクリアリング、テキストの調整、サイズ変更、オーバーフロー、および過剰なbehaviorのバリエーションが含まれます。これらの各プロパティには、テキストの方向に適応する論理的な同等物があります。

方向に基づいています。
いくつかの言語は、英語など、左から右に実行されます。他の人はアラビア語のように右から左に走ります。他の人は時々日本のように上から下に走ります。多くのウェブサイトには、英語、アラビア語、中国語のBBCのニュースサイト、または英語、アラビア語、中国語のアルジャジーラのサイトなど、さまざまな言語の複数のバージョンがあります。テキストの方向にリンクされたスタイルには、テキストの方向の変更に適応し、サイトのすべてのバージョンに適用できるため、多くの利点があります。

テキストの方向性を理解

論理的特性の目的をよりよく理解するには、テキストの方向性についていくつかのことを理解する必要があります。
HTMLとCSSの両方でテキストの方向を指定できます。

htmlにはdir属性があります。これは、テキストがページ全体で左から右に実行されるか（dir = "ltr"）、右から左（dir = "rtl"）、またはブラウザが独自の心を補うべきかどうかを指定します。使用されている言語に基づいています（dir = "auto"）。 dir属性は、ドキュメント全体（ドキュメント全体が同じ言語を使用する場合の標準）または個々の要素に適用できます。
HTMLでdir属性を使用する代わりに、CSSの方向プロパティを使用できます。左から右へのテキストを指定するには、方向：LTR、および左から左へのテキストを使用するには、方向を使用します。RTL。

HTMLまたはCSSでテキストの方向を設定するかどうかは本当に問題ではありませんが、HTMLでdir属性を使用することをお勧めします。シート。

CSSを使用して、テキストが上から下に実行されることを指定することもできます。左から右に実行される垂直テキストの場合、ライティングモード：Vertical-LRを使用し、右から左に実行される垂直テキストでは、ライティングモード：Vertical-RLを使用します。（垂直テキストにはdirオプションはありません。）
この記事では、物理的および論理的なCSSプロパティの効果を比較する一連のデモを見ていきます。これらのデモは、絵文字で構成される段落を使用してテキストの方向を示しています。
下のペンには、絵文字の文を含む4つのボックスがあります。 1つ目は、dir = "ltr"（ブラウザのデフォルト）に設定され、2番目はdir = "rtl"、3番目のwriting-mode：vertical-lr、4番目のwrite-mode：vertical-rlに設定されます。

ペンを参照してください論理プロパティ：SitePointによるテキストの方向（@SitePoint） Codepenで。
このデモでは、テキスト方向の設定が段落の文字の順序にどのように影響するかを見ることができます。

脇には、上記のデモで行がうまく並んでいる方法をご覧ください。これは、CSSグリッドの新しいサブグリッド値のおかげです。最近のクイックチップで行をサブグリッドと並べる方法を取り上げました。 CSSのブロックとインラインの理解
CSSが成長して発展するにつれて、画面上で左、右、上下に、コンテンツの流れに焦点が合っています。たとえば、FlexBoxのメイン軸と交差軸に精通している場合があります。これは、グリッドコンテンツの方向と同様に、テキストが流れる方向によって異なります。
CSSブロックとインラインのプロパティは、テキストの方向によって決定されます。下の画像では、ブロックとインラインの方向は、テキストの方向によって異なります。

左から右に実行される段落の場合、このように、インライン方向は左/右であり、ブロック方向は上/下にあります。
論理プロパティは、ブロックとインラインの寸法の観点から設定されており、テキストの方向が変化するにつれて自動的に交換されます。これにより、物理的特性よりもはるかに適応性があります
インラインの開始と終了は、ブロック方向の開始と終了と同様に、テキストが始まる場所と終了によって決定されます。

多言語サイトのみの論理プロパティは？
です
論理プロパティは、すべてのWebサイトに役立ちます。単一言語のウェブサイトが論理的なプロパティを使用することで利益を得る可能性がある状況はたくさんあります。
たとえば、
メディアまたはコンテナクエリを使用しながら、要素のテキスト方向を変更することに気付くかもしれません。左の赤い境界線の見出しを想像してみてください。小さな画面では、次の段落の上に見出しが水平になる可能性があります。広い画面では、見出しを垂直に表示するように設定する場合があります。下の画像は、左の左を使用した場合に何が起こるかを示しています。

見出しが垂直に表示されると、左の境界線が左側にとどまり、テキストの冒頭にそれを望んでいる可能性が高い場合になります。論理プロパティを使用して、代わりに、見出しのインラインスタート（Border-inline-start）に赤い境界が表示されることを指定することができます。

（Codepenでこれのライブデモをチェックできます。）
これは、論理的な特性を使用すると、さまざまなシナリオに追加のCSSを追加することなく、レイアウトが変化に適していることを示しています。これに加えて、論理的なプロパティは、複数の言語で作業するかどうかにかかわらず、CSSコーディングをすべての人にとってより効率的にするのに役立つ多くの有用な速記を提供していることもわかります。

サイズ（幅と高さの寸法）
物理画面に基づいた幅と高さの代わりに、論理的特性はインラインサイズとブロックサイズを使用します。幅と高さを設定するために使用するものを決定するには、テキストがどの方向に進むかを知る必要があります。
以下のデモでは、最初の行の段落に80pxのブロックサイズが与えられています。いずれの場合も、80pxはどちらの場合でもブロック方向に設定されます。
これを段落の2行目と比較してください。これは、それぞれ高さ80pxに設定されています。いずれの場合も、高さは画面に関連して設定されています。
ペンを参照してください論理的プロパティ：SitePointによるサイズ（幅と高さ）（@SitePoint） Codepenで。

その他のサイズのプロパティは次のとおりです

max-inline-size

min-inline-size
- すべてのサイズのオプションと、各テキストの方向でそれらを使用する方法については、ブラウザのサポート情報については、チートシートを参照してください。
- マージン
論理プロパティを使用すると、マージンはマージンインラインとマージンブロックのバリエーションで設定されています。
左から右への言語の場合、マージンインラインスタート：40pxは、テキストの開始時にマージンを適用します（画面の左側）。右から左の言語に適用すると、そのマージンは画面の右側に表示されます。垂直テキストの場合、下のデモに示すように、マージンが上部に表示されます。 最初の行の各段落に適用されたマージンインラインスタートの効果と、左の左側の40pxが適用されます。 ペンを参照してください論理プロパティ：SitePointによるマージン（@SitePoint） Codepenで。

その他のマージンプロパティには以下が含まれます

マージンインラインエンド

マージンブロックスタート

マージンブロックエンド

マージンインライン

マージンブロック
- マージンインラインは、マージン左およびマージン右の速記として使用できることに注意してください。これは、マージンインラインなど、多くの状況で非常に便利です。
- すべてのマージンオプションとブラウザサポート情報については、チートシートを参照してください。
```
-start-start-
-end-start-
-start-end-
-end-end-
```
すべての境界半径オプションとブラウザーサポート情報については、チートシートを参照してください。 Border Radiusの論理プロパティがブラウザによってサポートされるまでに時間がかかりましたが、サポートは最新のブラウザで優れています。
フローティングとクリア
フロートとクリアの論理的プロパティは、要素をフロートしてクリアする方法のための新しいオプションを提供します。論理的なプロパティの前に、唯一のオプションはフロートでした：左とフロート：右、クリア：左、クリア：右。テキストが垂直であった場合、テキストと同じ方向に浮かぶオプションはありませんでした。論理的なプロパティを使用して、インラインスタートとインラインエンドのおかげで、テキストのインラインフローに関連してフローティングとクリアを特に実行できるようになりました。 以下のデモでは、2列目に残っている物理値と比較して、スパン要素が論理値インラインスタートで浮かびます。 ペンを参照してください論理プロパティ：SitePointによるフロート（@SitePoint） Codepenで。

インラインスタート値とインラインエンドの値も、明確なプロパティに適用されます。（これがそのことのCodepenデモです。）

はクリアのための論理的な選択肢は必要ありません。両方がすでに両方のインライン方向にクリアされているためです。これは非常に論理的です！
テキストアライメント

左、右、中央、正当化などのテキストアライメント値が既にあります。現在、2つの論理値が追加されています。開始と終了です。それらを使用して、インライン軸に沿ってテキストを調整することができます。
以下のデモでは、最初の行の段落は、テキストアライメント：終了に設定されています。ご覧のとおり、絵文字はすべてインライン軸の遠端に押し込まれています。

ペンを参照してください論理的プロパティ：SitePointによるテキストアライメント（@SitePoint） Codepenで。

チートシートは、さまざまなテキストの指示で動作するために開始値と終了値を適用する方法を示しています。 sesizing

サイズのプロパティにより、特定の方向に特定の要素を変更することができ、インラインとブロックオプションがあります。

下のデモは、sezize：inline and resize：horizontalの違いを示しています。（ドラッグできる各ボックスの右下隅に小さなサイズのハンドルがあります。）

ペンを参照してください論理プロパティ：SitePointによるサイズ（@SitePoint） Codepenで。

（上記のデモでは、右から左へのボックスのサイズ変更は少しワイルドです。Dir= "rtl"はドキュメント全体に適用されていませんが、div。
オーバーフロー

オーバーフローXとオーバーフロー-Yの物理的特性には、オーバーフローインラインとオーバーフローブロックの論理的補体があります。
執筆時点でこれらの新しいプロパティに対するサポートはほとんどないことに注意してください（2024年4月）。
オーバークロールbehavior

オーバークロールビハビオールプロパティは、あふれる要素スクロールを洗練する新しいものです。ここでは掘り下げませんが、MDNで詳細を読むことができます。これらのプロパティの論理バージョンと物理的なものがあると言うだけで十分です。たとえば、左から右への言語のオーバークロールbehavior-Xは、過剰なbehaviorインラインなどに置き換えることができます。（例の完全なリストについては、チートシートを参照してください。）
ブラウザサポート
CSSのブラウザのサポートは、2020年代初頭に急速に進歩し、論理プロパティが主要なブラウザ全体で強くサポートされています。
論理的プロパティは物理的な対応物と同じ重量を持っているので、古いブラウザでの経験を心配している場合は、次のように2つの値を宣言できます。

古いブラウザは最初の宣言を使用し、新しいブラウザは2番目の宣言を使用します。
しかし、スタイルシート全体でこのようなコードを複製するのは退屈なので、古いブラウザを本当に心配しているなら、おそらく今のところ論理的なプロパティを簡単に進めるでしょう。
Caniuseには論理的なプロパティサポートの概要があり、チートシートの各セクションには特定のプロパティをサポートするリンクもあります。
結論
この記事では、現在利用可能なすべての論理的プロパティを
ほとんど>カバーしています。（キャプション側とサイズの封じ込めの論理プロパティをさらにチェックすることもできます。 他に何もなければ、今のところそれらを使用しないことを選択したとしても、論理的特性とそれらの使用方法を理解する価値があります。少なくとも、ウェブ全体に表示されている新しいCSS論理プロパティコードがわかります。
多言語サイトで作業していなくても、論理的なプロパティは利点を提供します。マージンインラインのようなさまざまな速記は非常に便利であり、キットに入れるのに最適なツールです。
この記事を正しく読んだことがある場合は、どこに表示されていても論理的なプロパティを認識できるはずです。（これらのブロックとインラインのキーワードを探してください！）CSSで時々使用するのに十分な自信を持っていることを願っています。
便利な論理プロパティPDFチートシートをダウンロードすることを忘れないでください。