CSS

この記事では「CSS」について、基本の意味と使い方を初心者向けにやさしく説明します。

Sets how far an element sits from the block-end side of the text flow (the bottom in horizontal writing), letting you pin buttons or badges neatly to the edge.

inset-block-end

• まず一言で
• いつ使う？
• 使い方のコツ
• ミニ実例（横書きサイトの右下ボタン）
• もう一歩だけ正確に

まず一言で

inset-block-end は、ページの「段落が進む向き」の終わり側（横書きなら“下側”）から、要素までの距離を決めるプロパティです。ざっくり言うと、bottom の“書字方向に強い版”。

いつ使う？

• ボタンやバッジを端っこ（下・右/左など）にピタッと置きたいとき
  （例：右下の「問い合わせ」ボタン）
• position: sticky で「ここまで来たらくっつく」下側のしきい値を決めたいとき
• 文字が縦書き/横書きでも自然に配置が変わってほしいとき

使い方のコツ

1. まず要素に position を付ける（static以外）
2. 横書きなら “下から◯px” のイメージ。縦書きなら“ブロック終端側”が左右に切り替わる
3. 数値は px / rem / % / auto が使える（% はブロック軸サイズに対する割合）

ミニ実例（横書きサイトの右下ボタン）

<div class="wrap">
	<button class="fab">Help</button>
</div>

.wrap {
	position: relative;
	min-height: 240px;
}

.fab {
	position: absolute;
	inset-block-end: 12px;  /* 横書きなら「下から12px」 */
	inset-inline-end: 12px; /* 横書きなら「右から12px」 */
}

もう一歩だけ正確に

「ブロック軸」は段落が進む向き。横書き（writing-mode: horizontal-tb）なら上下方向、縦書きなら左右方向。

inset-block-end はその軸の「終端側」からのオフセット。横書きでは bottom と同じ意味。

効くのは position が relative/absolute/fixed/sticky のとき。static だと無効。

inset-block-start と両方を固定すると、要素のサイズ（ブロック軸方向）が決まることがある。

まとめ指定は inset-block（start end の順）、四辺まとめは inset。