CSSの「inset-block-start」プロパティ：詳細解説と応用例

プロパティのしくみ

アニメーションの種類：計算値の種類による
計算値：対応する top プロパティと同じ
パーセンテージ：対応する物理プロパティと同じ
継承：いいえ
初期値：auto
対象要素：配置された要素のみ

inset-block-start は、以下のプロパティと連動して機能します。

text-orientation：要素内のテキストの方向を設定します。upright（直立）や sideways（横向き）などが指定できます。
direction：要素の方向を設定します。ltr（左から右）や rtl（右から左）などが指定できます。
writing-mode：要素の書記モードを設定します。横書き（horizontal）や縦書き（vertical）などが指定できます。

これらのプロパティの設定によって、inset-block-start が物理的にどの位置にオフセットされるかが決まります。

例

.box {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  inset-block-start: 50px;
}

この例では、.box クラスを持つ要素は、縦書きで右から左に書かれ、テキストは横向きになります。inset-block-start プロパティによって、要素は上部から50pxオフセットされます。

inset-block-start は、柔軟なレイアウトを作成する際に役立ちます。特に、縦書きや双方向のテキストを使用する場合は、要素の位置をより精密に制御できます。

古いブラウザとの互換性を考慮する場合は、ベンダープレフィックスを付加することを検討してください。
inset-block-start は比較的新しいプロパティであり、すべてのブラウザで完全にサポートされているわけではありません。

上記以外にも、inset-block-end、inset-inline-start、inset-inline-end などのプロパティが用意されています。これらのプロパティは、それぞれ要素のブロック方向の終了位置、インライン方向の開始位置、インライン方向の終了位置をオフセットします。

例1：要素を内側からマージン

この例では、.box クラスを持つ要素に、上下左右から 20px の内部マージンを設定します。

.box {
  inset-block-start: 20px;
  inset-block-end: 20px;
  inset-inline-start: 20px;
  inset-inline-end: 20px;
}

例2：縦書きの要素を中央揃え

この例では、縦書きの .box クラスを持つ要素を、親要素の中央に揃えます。

.box {
  writing-mode: vertical-rl;
  text-orientation: upright;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}

例3：双方向テキストを含む要素を適切に配置

この例では、双方向テキストを含む .box クラスを持つ要素を、適切な方向に配置します。

.box {
  direction: rtl;
  inset-block-start: 20px;
  inset-inline-start: 40px;
  inset-block-end: 20px;
  inset-inline-end: 20px;
}

例4：要素を斜めに配置

この例では、.box クラスを持つ要素を、45度の角度で配置します。

.box {
  transform: rotate(45deg);
  inset-block-start: 50px;
  inset-inline-start: 50px;
}

これらの例は、inset-block-start プロパティの多様性を示しています。創造性を発揮し、このプロパティを使用して、ユニークで魅力的なレイアウトを作成することができます。

常に最新のブラウザ互換性情報を参照してください。
複雑なレイアウトを作成する場合は、ベンダープレフィックスやフォールバック値の使用を検討する必要があります。
上記の例はあくまで基本的な使用方法を示したものです。

従来の「top」プロパティと「position」プロパティを組み合わせる

古いブラウザでは、inset-block-start プロパティの代わりに、top プロパティと position プロパティを組み合わせて使用することができます。

.box {
  position: absolute;
  top: 20px; /* 要素の上部から 20px オフセット */
}

この例では、.box クラスを持つ要素は、親要素の上部から 20px の位置に配置されます。

ベンダープレフィックスを使用する

主要なブラウザベンダーは、それぞれ独自のベンダープレフィックス付きの inset-block-start プロパティを提供しています。これらのプレフィックスを使用して、特定のブラウザをターゲティングすることができます。

.box {
  -webkit-inset-block-start: 20px; /* Chrome、Safari */
  -moz-inset-block-start: 20px;   /* Firefox */
  -o-inset-block-start: 20px;    /* Opera */
  inset-block-start: 20px;       /* 標準プロパティ */
}

JavaScript を使用する

JavaScript を使用して、動的に要素の位置を調整することもできます。この方法は、より柔軟な制御が可能ですが、複雑さも増します。

const element = document.querySelector('.box');
element.style.top = '20px';

注意点

JavaScript を使用する場合は、パフォーマンスとアクセシビリティを考慮する必要があります。
ベンダープレフィックスを使用する場合は、すべての主要なブラウザベンダーを網羅するようにする必要があります。
代替方法を使用する場合は、inset-block-start プロパティと同じ視覚効果が得られない場合があります。

inset-block-start は、新しい CSS プロパティであり、多くの利点があります。しかし、古いブラウザとの互換性を考慮する場合は、代替方法を検討する必要があります。