【CSS Modules】padding-block-startプロパティの使い方

padding-block-startプロパティは、要素のブロック軸における開始側の内側余白（パディング）の値を保持するプロパティです。これはCSSの論理プロパティの一つで、テキストの書字方向（writing-modeやdirectionプロパティ）に応じて、パディングの物理的な位置が自動的に調整されます。

具体的には、通常の横書き言語（日本語や英語など）ではpadding-topと同じ効果を発揮しますが、縦書きの言語や右から左へ書く言語（アラビア語など）の場合には、書字方向に応じた適切な辺にパディングが適用されます。この機能は、多言語対応ウェブサイト構築において非常に有用で、物理的なパディングを都度調整する必要なく、一貫したレイアウトを効率的に実現し、高い保守性を提供します。

パディングにはpx、emなどの単位を持つ数値や、親要素に対する割合を示す%で指定可能です。また、initial、inherit、unsetといったCSSグローバルキーワードも利用できます。システムエンジニアを目指す上で、このpadding-block-startのような論理CSSプロパティの理解は、将来的に国際化対応システムを開発する際の重要な基礎知識となります。

Copy
1selector {
2  padding-block-start: 10px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません