このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
inset-inline
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2021年4月.
* Some parts of this feature may have varying levels of support.
inset-inline はCSS のプロパティで、要素におけるインライン方向の先頭および末尾からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。top とbottom、またはright とleft のいずれかのプロパティに、writing-mode,direction,text-orientation で定義された値に従って対応します。
このインセットプロパティは、位置指定されていない要素には効果がありません。
試してみましょう
inset-inline: 5% 10%;writing-mode: horizontal-tb;inset-inline: 10px 40px;writing-mode: vertical-rl;inset-inline: 5% 10%;writing-mode: horizontal-tb;direction: rtl;<section> <div> <div>これは絶対位置指定されています。</div> <p> まるで地球の表面から水が引き始めたかのように、通りは泥だらけで、ホルボーン通りを象のようなトカゲのようによちよち歩く、体長 12 メートルほどのメガロサウルスに出会っても不思議ではないでしょう。 </p> </div></section>.example-container { border: 0.75em solid #ad1457; padding: 0.75em; text-align: left; position: relative; width: 100%; min-height: 200px;}#example-element { background-color: #07136c; border: 6px solid #ffa000; color: white; position: absolute; inset: 0;}構成要素のプロパティ
このプロパティは、以下の CSS プロパティの一括指定です。
構文
css
/* <length> 値 */inset-inline: 3px 10px;inset-inline: 2.4em 3em;inset-inline: 10px; /* 値が先頭と末尾の両方に適用される */inset-inline: auto calc(anchor(self-start) + 20px);inset-inline: 400px anchor-size(--my-anchor height, 100px);/* 包含ブロックの幅または高さに対する <percentage> 値 */inset-inline: 10% 5%;/* キーワード値 */inset-inline: auto;/* グローバル値 */inset-inline: inherit;inset-inline: initial;inset-inline: revert;inset-inline: revert-layer;inset-inline: unset;値
inset-inline プロパティはleft プロパティと同じ値を取ります。
公式定義
| 初期値 | 一括指定の次の各プロパティとして
|
|---|---|
| 適用対象 | 位置指定要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの論理的な幅 |
| 計算値 | 一括指定の次の各プロパティとして
|
| アニメーションの種類 | length またはパーセント値, calc(); |
形式文法
inset-inline =
<'top'>{1,2}
<top> =
auto|
<length-percentage>|
<anchor()>|
<anchor-size()>
<length-percentage> =
<length>|
<percentage>
<anchor()> =
anchor(<anchor-name>?&&
<anchor-side> ,<length-percentage>?)
<anchor-size()> =
anchor-size([<anchor-name>||<anchor-size>]? ,<length-percentage>?)
<anchor-name> =
<dashed-ident>
<anchor-side> =
inside|
outside|
top|
left|
right|
bottom|
start|
end|
self-start|
self-end|
<percentage>|
center
<anchor-size> =
width|
height|
block|
inline|
self-block|
self-inline
例
インライン方向の先頭と末尾のオフセットの設定
HTML
html
<div> <p>テキストの例</p></div>CSS
css
div { background-color: yellow; width: 120px; height: 120px;}.exampleText { writing-mode: vertical-lr; position: relative; inset-inline: 20px 50px; background-color: #c8c800;}結果
仕様書
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-inset-inline |
| CSS Positioned Layout Module Level 3 # propdef-inset-inline |
ブラウザーの互換性
関連情報
- 対応する物理的プロパティ:
top,right,bottom,left - 対応する物理的な一括指定:
inset - 対応するブロック方向の一括指定:
inset-block writing-mode,direction,text-orientation