このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
寸法指定の論理的プロパティ
このガイドでは、ページ上の要素の寸法の設定に使用する、物理的な方向のプロパティと論理的なプロパティのフローに関連した対応付けを説明します。
アイテムの寸法を指定するときに、論理的プロパティと値モジュールにより、水平・垂直の物理的な長さ（左や右など）に関連する物理的な寸法ではなく、テキストの流れ（インラインとブロック）に関連した寸法を示すことができます。これらのフローに関連した対応付けは、私たちの大多数にとって普通であることもあるので、デザインでは物理的・論理的の両方の寸法を使用することができます。書字方向がどうであっても物理的な長さに関連した機能が使用したい場合もあるでしょう。
長さへの対応付け
以下の表は、論理的なプロパティと物理的なプロパティの対応付けを示しています。この対応付けは、英語やアラビア語のようなhorizontal-tb の書字方向を想定しており、この場合はwidth がinline-size に対応付けられます。
縦書きモードの場合は、inline-size はheight に対応付けられます。
幅と高さの例
width とheight の論理的な対応付けでは、inline-size がインライン次元の長さを設定し、block-size がブロック次元の長さを設定します。英語の場合は、width をinline-size で、height をblock-size で置き換えると同じレイアウトになります。
以下のライブデモでは、書字方向をhorizontal-tb に設定しました。これをvertical-rl に変更すると、最初の例 —width とheight を使用したもの — では、テキストが縦書きになっても、それぞれの方向が同じ寸法になります。 2 番目の例 —inline-size とblock-size を使用したもの — は、ブロック全体が回転したようにテキストの方向に従います。
<div> <div>これは width が 200px で height が 100px です。</div> <div> これは inline-size が 200px で block-size が 100px です。 </div></div>body { font: 1.2em / 1.5 sans-serif;}.container { display: flex;}.box { border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); padding: 10px; margin: 10px;}.box { writing-mode: horizontal-tb;}.physical { width: 200px; height: 100px;}.logical { inline-size: 200px; block-size: 100px;}最小幅と最小高の例
min-width とmin-height も、min-inline-size とmin-block-size に対応付けられます。これらはinline-size およびblock-size プロパティと同様に動作しますが、固定の寸法ではなく最小寸法を設定します。
最初の例のように、以下の例をvertical-rl に変更してみて、その作用を確認してみてください。最初の例ではmin-height を使用しており、二番目の例ではmin-block-size を使用しています。
<div> <div> これは width が 200px で min-height が 5em です。 </div> <div> これは inline-size が 200px で min-block-size が 5em です。 </div></div>body { font: 1.2em / 1.5 sans-serif;}.container { display: flex;}.box { border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); padding: 10px; margin: 10px;}.box { writing-mode: horizontal-tb;}.physical { width: 200px; min-height: 5em;}.logical { inline-size: 200px; min-block-size: 5em;}最大幅と最大高の例
最後にmax-inline-size とmax-block-size を、max-width とmax-height の論理的な置き換えとして使用することができます。以下の例を前と同様に操作してみてください。
<div> <div>これは max-width が 200px です。</div> <div>これは max-inline-size が 200px です。</div></div>body { font: 1.2em / 1.5 sans-serif;}.container { display: flex;}.box { border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); padding: 10px; margin: 10px;}.box { writing-mode: horizontal-tb;}.physical { max-width: 200px;}.logical { max-inline-size: 200px;}リサイズの論理キーワード
resize プロパティは、アイテムの大きさが変わるかどうかを物理的な値であるhorizontal およびvertical で指定します。resize プロパティは論理的なキーワード値にも対応しています。resize: inline を使用すると、インライン次元の大きさが変わることを許可し、resize: block を使用すると、ブロック次元の大きさが変わることを許可します。
both のキーワード値は物理的または論理的に考えて動作します。これは両方を同時に設定します。以下の例を実行してみてください。
<div> <div> これは width が 200px で height が 100px です。水平方向にサイズ変更ができます。 </div> <div> これは inline-size が 200px で block-size が 100px です。インライン方向にサイズ変更ができます。 </div></div>body { font: 1.2em / 1.5 sans-serif;}.container { display: flex;}.box { border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); padding: 10px; margin: 10px;}.box { writing-mode: horizontal-tb; overflow: scroll;}.physical { width: 200px; height: 100px; resize: horizontal;}.logical { inline-size: 200px; block-size: 100px; resize: inline;}