【CSS Modules】padding-block-endプロパティの使い方
padding-block-endプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
padding-block-endプロパティは、要素のブロック方向における「終わり」側のパディング（内側の余白）の大きさを保持するプロパティです。このプロパティは、CSSの論理プロパティの一つであり、テキストの書字方向（writing-modeプロパティ）やテキストの方向（directionプロパティ）の設定によって、適用される物理的な位置が動的に決定されます。
具体的には、一般的な左から右へ、上から下へ文字が流れる書字モード（例：英語や日本語の横書き）では、ブロック方向は上から下への垂直方向を指します。この場合、padding-block-endは要素の下側のパディングとして機能します。一方、書字モードが縦書き（例：日本語の縦書き）に設定されている場合、ブロック方向は右から左への水平方向を指し、padding-block-endは要素の左側のパディングに相当するようになります。
このようにpadding-block-endを使用することで、書字方向が異なる多言語対応のウェブサイトや、デザインの都合で書字方向を変更するレイアウトにおいても、常にコンテンツのブロック方向の「終わり」に一貫した余白を適用することが可能になります。これにより、物理的なpadding-bottomやpadding-leftといったプロパティを個別に調整する必要がなくなり、CSSコードの保守性と再利用性が向上します。
設定できる値としては、pxやem、remなどの長さの単位、または要素の包含ブロックに対するパーセンテージ値などが利用可能です。このプロパティは、padding-blockというショートハンドプロパティの一部でもあり、padding-block-start、padding-inline-start、padding-inline-endといった他の論理プロパティと組み合わせて使用することで、より柔軟なレイアウト制御を実現できます。
構文(syntax)
1selector { 2 padding-block-end: <length> | <percentage>; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
<length-percentage>
padding-block-end プロパティは、要素のブロック終端側（論理的な下辺）のパディングを指定します。指定できる値は、長さ（px、em など）または親要素に対するパーセンテージ（%）です。