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
で「ここまで来たらくっつく」下側のしきい値を決めたいとき
文字が縦書き/横書きでも自然に配置が変わってほしいとき
使い方のコツ
まず要素に position
を付ける(static
以外)
横書きなら “下から◯px” のイメージ。縦書きなら“ブロック終端側”が左右に切り替わる
数値は 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
。
Home
サイトのトップページ
HTML (HyperText Markup Language)
ウェブページの基本的な構造を作成します。見出し、段落、リンク、画像などの要素を定義します。
button 要素
ユーザーがクリックすることで何らかのアクションを実行するためのボタンを作成する。
class 属性
要素に CSSでスタイルを適用するためのクラス名を付ける際によく使われる。
div 要素
特定の意味(セマンティクス)を持たない汎用的なブロック要素で、ページのレイアウトやコンテンツのグループ化に利用される「区切りの箱」のような存在です。
CSS (Cascading Style Sheets)
ウェブページのデザインやレイアウトを設定します。色、フォント、レイアウトなどのスタイルを指定します。
bottom
要素の下端を基準にして、指定された距離分だけ上に位置を調整するプロパティです。
inset
要素の上下左右の位置をまとめて指定できるプロパティです。
inset-block
段の並ぶ向き(ブロック方向)への位置ズレを、書字方向に合わせて上下または左右として自動で解釈し、inset-block-start
/inset-block-end
をひとまとめに指定できるショートハンド。
inset-block-start
ページの書き方に合わせて、要素を“段落が始まる側”からどれだけ離すかを決める指定で、横書きなら〈上からの距離〉、縦書きなら〈右や左からの距離〉として自然に切り替わる、top
の言語対応版です。
inset-inline-end
文字の流れで見た「終わり側」からの距離を指定して、要素をその側に寄せたり固定したりできるプロパティで、右/左や上下が書字方向に合わせて自動で切り替わる。
min-height
高さの最小値を指定する。
position
ボックスの配置方法(基準位置)が、相対位置か絶対位置かを指定する。
writing-mode
縦書き・横書きの別と行ブロックを並べる方向を指定します。
JavaScript
ウェブページにインタラクティブな動作を追加します。フォームの検証、アニメーション、リアルタイムのデータ処理などを行います。
PHP (Hypertext Preprocessor)
サーバー上で動作してデータベースと連携し、動的なWebページを簡単に作成できるスクリプト言語です。