padding-bottomのように物理プロパティをボックスモデルで使用していると思います。GridやFlexboxで使われている論理プロパティを使用する機会が増えるでしょう。CSSの論理プロパティにおける考え方、注意点、そして英語や日本語など言語で変化する使い方について紹介します。Shechter下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。記事内の日本語サイトとは横書きではなく、縦書きが想定されています。-参考記事はじめにわたし達デベロッパーのほとんどが、leftとright、topとbottom、という観点から考えていました。これはインターネットの初期の頃はテキスト主体のものが多かったためで、今日存在する複雑なWebサイト構造を目的としたものではありません。多くの人が多言語Webサイトのニーズを考慮していませんでした。これからのCSSは、論理プロパティに。SASS!」を読んでください)。CSSは新しい論理プロパティにより、使用する言語の種類(英語・アラビア語・日本語など)に関係なく、最小限のスタイルの変更で、Webサイトを制御するための強力な機能が得られます。それでは始めましょう!CSSの論理プロパティにおける考え方CSSのボックスモデルについて説明する時、下記のような図がよく使用されます。border-topのような古い物理プロパティは最後の日がくるかもしれません。block-endに置き換える必要があります。英語を例にしましょう。読む方向は左側から始まり、右側で終わります。これはプロパティのインライン要素です。inline;」で配置された要素を考えるとき、想像するのはとても簡単です。各アイテムは行に沿って表示されます。padding-inline-startだと、言語が始まる側のpaddingになります。英語の場合padding-inline-startは、padding-leftと同じアラビア語の場合padding-inline-startは、padding-rightと同じ日本語の場合padding-inline-startは、padding-topと同じブロック軸topとbottomのプロパティだと、topがWebサイトの始まり、bottomが終わりです。覚えておくのは非常に簡単です。block;」の要素が複数上から順に積み重なっていると想像してみてください。あなたはこう思うかもしれません。常にそうなりませんか?正確に言うと、もう少し複雑です。現時点では他の方法を利用できなかったため、すべてのWebサイトはすべての言語で上から順に積み重なります。日本語およびその他の東部言語で書かれたWebサイトは、上から下ではなく、右から左に始まります。これを理解するためはに、スクリーンを右に90度回転させることを想像してください。Webサイトのスクロールは垂直ではなく、代わりに水平になります。英語・アラビア語の場合padding-block-startは、padding-topと同じ日本語およびその他の東部言語の場合padding-block-startは、padding-rightと同じ日本語の場合、水平スクロールに新しいボックスモデルのプロパティインラインとブロック軸を理解したと思うので、新しいボックスモデルのプロパティを確認しておきましょう。英語の場合、プロパティは下記のようになります。border-right論理ディメンションwidthとheightのプロパティもこの新しい方法に合わせて対応する必要があります。インラインとブロック軸を理解したら、ディメンションを理解するのも簡単です。英語では、widthプロパティはinline-sizeに、heightプロパティはblock-sizeに置き換えます。英語・アラビア語の場合(LTR/RTL)widthは、inline-sizeにheightは、block-sizeに日本語のように上から下の言語の場合、逆になります。widthは、block-sizeにheightは、inline-sizeにmin/maxは、プロパティの開始時にmin/maxを追加するだけです。inset-inline-end/inset-block-end/inset-inline-start)に変わります。すべて接頭辞insetが付いています。英語の場合*/}一見すると、なぜこんな複雑な名称に変更したのか疑問に思うかもしれません。それには理由があります。新しい名称では、padding/margin/borderに似た方法で組み合わせることができます。これは、positionにこれまで存在しなかった新しい機能です。英語の場合*/}古いプロパティだと、下記のようになります。古いプロパティの場合そして、新しいプロパティは、下記のようになります。新しいプロパティの場合floatの新しい値floatはとても簡単です。left/rightの値をinline-start/inline-endに置き換えるだけです。inline-end;にtext-alignの新しい値floatよりも簡単で、left/rightの値をstart/endに置き換えます。textareaに使用され、その値はhorizontal/verticalをinline/blockに置き換えます。どのブラウザにもまだ実装されていませんが、MDNを見ると、background-position-inlineとbackground-position-blockが用意されています。完全なドキュメントはありません。transform-originプロパティなども同時に実装されると想定できます。GridとFlexboxの素晴らしいニュースは、これら2つはすでに論理プロパティの新しい方法で実装されているため、変更する必要がないことです。最初は複雑に見えるかもしれませんが、これらの値を使うことは非常に簡単です。スタイルを書いている間、言語間サポートについて心配する必要はありません。古い物理プロパティの代わりに、論理プロパティを使用して、それらをあなたの好みの言語に合わせます。言語に応じた配置の適用ブロック軸の配置(Webサイトの流れ)とインライン軸の配置(テキストを読む方向)を定義できる2つのプロパティを解説します。writing-modeプロパティ(ブロック軸)Webサイトの流れを定義します。ほとんどの場合、上から下になりますが、前述のように、特定の言語は右から左(日本語)、さらには左から右(モンゴル語)に流れることがあります。どちらの場合も垂直スクロールではなく、水平スクロールになります。現在のところ、writing-modeには3つの値があります。これらの名称は少し紛らわしいものとなっています。その理由としては、その名称にはブロック軸の方向があり、さらにその場合のテキストの配置(インライン軸)がどうなるかということです。テキストの配置は冗長であり、混乱を招くだけなので、これは明らかにイライラするものです。この混乱を避けるために、値のインライン軸部分を無視し、値のブロック軸部分のみを参照することをお勧めします。vertical-lr;は、左から右に(モンゴル語)私の個人的な意見としては、潜在的な混乱をなくすために、値に含まれるのはtb/rl/lr(ブロック軸部分)だけであることを望みます。日本語の定義例を見てましょう。vertical-rl;}それぞれ下記のようになります。writing-modeプロパティの値とスクロールの方向directionプロパティの値(インライン軸)directionプロパティはテキストを左から右へ開始するか、右から左へ開始するかを定義します。デフォルトのwriting-modeプロパティがアクティブの場合に限られます。writing-modeを縦書きに定義すると、テキストの方向(左から右)は上から下に変わります。anrtl(右から左)値では、下から上に変わります。アラビア語の定義例を見てましょう。rtl;}この定義をするだけで、上から下のWebサイトを水平スクロールの右から左のWebサイトに変換されることは驚くべきことです。この動作が確認できるデモを作成しました。Firefoxがベストビューです。プルダウンで言語を変更してみてください。プロパティは、Edgeを除くすべての主要ブラウザで機能します。text-alignの新しい値は、Edgeを除くすべての主要ブラウザで機能します。float/position/resiezeの新しい値は、Firefoxのみで機能します。論理プロパティに関する注意点これらの新しい方法が原因で、わたし達は新しい問題に直面することになります。5px;」となり、どのように解釈されるのか予測できません。Webサイトが物理プロパティの場合、値は「margin-top/margin-right/margin-bottom/margin-left」と解釈されます。論理プロパティの場合は「margin-block-start/margin-inline-end/margin-block-end/margin-inline-start」と解釈されます。英語のサイトであれば、物理プロパティと論理プロパティは同じに機能します。他の言語のサイトであれば、marginのようにショートハンドを使うと、directionプロパティまたは新しいプロパティwriting-modeに従って機能します。これはまだ未解決の問題です。私はGithubのcsswg-draftにこの問題を解決することができる提案を加えました。良い解決策があると思われる場合は、そこにコメントすることができます。解決策としては、論理プロパティを使用したい場合は、ショートハンドを使用せずに完全なプロパティ名を記述する必要があります。完全に機能するデモを作成しようとした時、メディアクエリでmax-widthの新しいプロパティmax-inline-sizeを使用しようとしました。それはmax-widthのように振る舞い、日本語のような言語ではmax-heightのように振る舞います。残念ながら、ブラウザは現在メディアクエリでこのプロパティを解釈していません。私がこの記事を書いたとき、論理プロパティのコンセプトを詳しく学んで理解した後、まだ見つからないものがありました、それらは将来取り込まれるべきだと思います。line-heightは、line-sizeでも構わないborder-widthは、border-sizeでも構わない少なくとも、border-widthはどうにかしてほしいと思います。論理プロパティで更新されたばかりで、その名称にはまだ「width」という単語があります。border-block-start-widthしかし、W3Cの誰かがこの記事を読むと思います。私の経験から学んだことが、あなたのためになることを願っています。Shechterで、CSSおよびHTMLの設計とアーキテクチャを専門とするWeb開発者で、Investing.comに勤務しています。