次のページCSSの学習でこれまでに遭遇したプロパティと値の多くは、画面の物理的な大きさに関係しています。ボックスの上下左右にborderを作成します。これらの物理的大きさは、水平に表示されるコンテンツに非常にきちんとマッピングされ、デフォルトでは、ウェブは右から左への言語(アラビア語など)よりも左から右への言語(英語やフランス語など)をサポートする傾向があります。近年、CSSは、右から左へのコンテンツや上から下へのコンテンツ(日本語など)を含むコンテンツのさまざまな方向性をより適切にサポートするために進化しました。modesを理解することが非常に役立ちます。そのため、これらのモードを紹介します。第一歩)に関する基本的な知識を得ている。?CSSの書き込みモードは、テキストが水平方向または垂直方向のどちらで実行されているかを示します。プロパティにより、ある書き込みモードから別の書き込みモードに切り替えることができます。これを行うために縦書きモードを使用する言語で作業する必要はありません。創造的な目的のためにレイアウトの一部の書き込みモードを変更することもできます。vertical-rlを使用して見出しを表示しています。これで、テキストが垂直方向に実行されます。縦書きテキストはグラフィックデザインでは一般的であり、Webデザインにより興味深い外観を追加する方法になります。上から下へのブロックの流れの方向。文は水平に実行されます。右から左へのブロックの流れの方向。文は垂直に実行されます。左から右へのブロックの流れの方向。文は垂直に実行されます。したがって、writing-modeプロパティは、実際には、ページにブロックレベルの要素が表示される方向(上から下、右から左、または左から右)を設定します。これにより、文章内のテキストの流れが決まります。ブロックレイアウトとインラインレイアウトブロックとインラインのレイアウト、およびいくつかの要素がブロック要素として表示され、他の要素がインライン要素として表示されるという事実についてはすでに説明しました。上で説明したように、ブロックとインラインは、物理的な画面ではなく、ドキュメントの書き込みモードに関連付けられています。英語などのテキストを水平方向に表示する書き込みモードを使用している場合、ブロックはページの上から下にのみ表示されます。例を見れば、これはより明確になります。この次の例では、見出しと段落を含む2つのボックスがあります。1つ目は、writing-mode:horizo​​ntal-tbを使用します。これは、水平にページの上部から下部に向かって書き込まれる書き込みモードです。vertical-rlを使用します;これは、垂直に右から左に書き込まれる書き込みモードです。書き込みモードを切り替えると、ブロックの方向とインラインの方向が変更されます。horizontal-tb書き込みモードでは、ブロックの方向は上から下に向かっています。vertical-rl書き込みモードでは、ブロックの方向は右から左に水平に実行されます。常に、使用中の書き込みモードでページにブロックが表示される方向です。dimensionは、常に文が流れる方向です。この図は、横書きモードでの2つのdimensionsを示しています。この図は、縦書きモードの2つのdimensionsを示しています。CSSレイアウト、特に新しいレイアウトメソッドを検討し始めると、このブロックとインラインの考え方が非常に重要になります。書き込みモードに加えて、テキストの方向もあります。上記のように、アラビア語などの一部の言語は水平に書かれていますが、右から左に書かれています。これは、創造的な意味で使用する可能性のあるものではありません。右側に何かを並べたい場合は、他の方法もありますが、CSSの性質の一部としてこれを理解することが重要です。Webは、左から右に表示される言語専用ではありません!書き込みモードとテキストの方向が変更される可能性があるため、新しいCSSレイアウトメソッドは、左右、上下を参照しません。代わりに、インラインとブロックのこのアイデアとともに、開始と終了について話します。心配する必要はありませんが、レイアウトを見始めるときにはこれらのアイデアに留意してください。CSSを理解する上で非常に役立ちます。論理プロパティと値ただし、学習のこの時点で書き込みモードと方向を記述することについて説明する理由は、私たちは既に、画面の物理的な大きさに関連付けられた多くのプロパティを見ており、横書きモードのときに最も意味があるという事実のためです2つのボックスをもう一度見てみましょう。書き込みモード、もう1つはvertical-rlです。ボックスが縦書きモードのときは、まだ幅があるため、テキストがオーバーフローすることがわかります。このシナリオで本当に必要なのは、書き込みモードに合わせて基本的にheightとwidthを入れ替えることです。縦書きモードのときは、横書きモードの場合と同じように、ボックスをブロックのdimensionで拡大します。これを簡単にするために、CSSは最近マッピングされたプロパティのセットを開発しました。これらは基本的に、物理的なプロパティ(幅や高さなど)を論理的な、またはフローに関連するバージョンに置き換えます。呼ばれます—インラインディメンションのサイズを参照します。ブロックディメンションのサイズです。widthをinline-sizeに置き換えた以下の例で、これがどのように機能するかを見ることができます。論理マージン、ボーダー、パディングのプロパティ最後の2つのレッスンでは、CSSのボックスモデルとCSSのボーダーについて学びました。widthとheightのマッピングと同じ方法で、これらのプロパティのマッピングがあります。margin-topプロパティはmargin-block-startにマップされます—これは常にブロックディメンションの先頭のマージンを参照します。padding-leftプロパティは、インライン方向の開始に適用されるパディングであるpadding-inline-startにマップされます。これは、その書き込みモードで文章が始まる場所です。プロパティは、border-block-endにマップされます。これは、ブロックディメンションの最後のボーダーです。以下の物理的特性と論理的特性の比較を見ることができます。.boxのwriting-modeプロパティをvertical-rlに切り替えてボックスの書き込みモードを変更すると、物理プロパティが物理方向にどのように関連付けられているかがわかりますが、論理プロパティは書き込みモードで切り替わります。border-bottomがあることがわかります。両方のライティングモードで、下の境界線が常にテキストの下に来るようにする方法を見つけられますか?個々のボーダーロングハンドをすべて考慮すると、膨大な数のプロパティがあり、論理プロパティと値のMDNページですべてのマッピングプロパティを確認できます。論理値これまで、論理プロパティ名について見てきました。leftの物理値をとるプロパティもあります。inline-start)へのマッピングもあります。画像を左にフロートさせて、画像の周りにテキストを折り返すことができます。以下の例に示すように、leftをinline-startに置き換えることができます。この例の書き込みモードをvertical-rlに変更して、画像がどうなるかを確認します。inline-startをinline-endに変更して、フロートを変更します。ここでは、書き込みモードが何であってもマージンが正しい場所にあることを保証するために、論理マージン値も使用しています。物理的または論理的なプロパティを使うべきか?論理的なプロパティと値は、物理的に同等のものよりも新しいため、ごく最近ブラウザに実装されました。MDNの任意のプロパティページをチェックして、ブラウザーサポートがどの程度遡っているかを確認できます。複数の書き込みモードを使用していない場合は、現時点では物理バージョンを使用することをお勧めします。フレックスボックスやグリッドなどのレイアウトメソッドの処理を開始すると、多くの人が理にかなっているため、最終的にはほとんどの場合、人々は論理バージョンに移行することを期待しています。まとめこのレッスンで説明する概念は、CSSでますます重要になっています。ブロックとインラインの方向、および書き込みモードの変更に伴うテキストフローの変化を理解することは、今後非常に役立ちます。水平モード以外の書き込みモードを使用しない場合でも、CSSを理解するのに役立ちます。次のモジュールでは、CSSのオーバーフローについて詳しく見ていきます。inbox.現在、ニュースレターは英語でのみ提供されています。従って私の個人情報を扱うことに同意します。