論理的なMargin、Padding、Border
top／right／bottom／leftを、start／end／block／inlineに対応する論理プロパティへ置き換えます。
「論理的なMargin、Padding、Border」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
間隔に対応する論理プロパティ
物理的な間隔のプロパティには、ブロック方向とインライン方向を使う論理プロパティが対応しています。
margin-top→margin-block-startmargin-bottom→margin-block-endmargin-left→margin-inline-startmargin-right→margin-inline-end
論理的なショートハンドプロパティ
新しいショートハンドプロパティを使うと、ブロック方向の両側またはインライン方向の両側をまとめて指定できます。
<div class="card">Card with logical spacing</div>
margin-inline: auto による中央揃え
従来の中央揃えのパターンには、論理プロパティによる同等の方法があります。
<div class="container">Centered container</div>
論理的なborderプロパティ
論理的な側にborderを設定します。
<div class="card">Card with top border</div>
<blockquote class="quote">Quoted text with a gold side border</blockquote>
論理的な位置指定プロパティ
位置指定プロパティにも論理的な対応プロパティがあります。
top→inset-block-startbottom→inset-block-endleft→inset-inline-startright→inset-inline-end
insetショートハンド
insetプロパティは、4辺すべてを指定する論理的なショートハンドです。inset-blockとinset-inlineを使うと、2つの軸を個別に制御できます。
<div class="wrap"><div class="overlay"></div></div>
論理的なサイズ指定プロパティ
widthとheightには論理的な対応プロパティがあります。
<div class="box">Sized box</div>
比較: 物理方向と論理方向
開始側にborderを持つサイドバーの例です。
<div class="sidebar-physical">Physical (border-left)</div>
<div class="sidebar-logical">Logical (border-inline-start)</div>
floatとclearの論理値
floatとclearプロパティでは、論理値もサポートされるようになりました。
<div class="figure"></div><p>Text wraps around the floated figure.</p><div class="clear">Cleared element</div>
論理的なtext-align
text-align: startとtext-align: endは、leftとrightに代わる論理的な指定です。テキストの方向に合わせて自動的に適応します。
<div class="nav-link">Aligned to the start (left in LTR)</div>
移行戦略
新しいコードでは論理プロパティを優先してください。既存のコードでは、コンポーネントを1つずつ書き換えます。移行の優先順位は、間隔（margin/padding）、border、サイズ指定、位置指定の順です。
確認問題
LTRレイアウトでmargin-leftに相当し、RTLではmargin-rightになる論理プロパティはどれですか。
まとめ
論理的なmargin、padding、borderプロパティは、物理的なtop/right/bottom/leftではなく、blockとinlineの方向を使います。margin-block、padding-inline、inset-blockなどのショートハンドを使うと、両側を一度に指定できます。新しいコードでは、間隔の指定に論理プロパティを優先すると、RTLや縦書きの書字モードを自動的にサポートできます。
よくある質問
「論理的なMargin、Padding、Border」レッスンは無料ですか？
はい。「論理的なMargin、Padding、Border」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「論理的なMargin、Padding、Border」で何を学びますか？
top／right／bottom／leftを、start／end／block／inlineに対応する論理プロパティへ置き換えます。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「論理的なMargin、Padding、Border」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 論理プロパティが必要な理由：国際化
- ブロック方向とインライン方向
- 論理的なMargin、Padding、Border
- RTLレイアウトでの論理プロパティ