Mill's Note
  1. HOME
  2. CSS
  3. CSS-rules
  4. inset, inset-inline, inset-outline

【CSS-rules】inset, inset-inline, inset-outline

/

position:の位置指定を、上下左右、上下、左右で一括指定。自身を position: relative; にしても使える position用のプロパティです。

width, heightも指定できますが、基本的に親要素からの上下左右の間隔を指定するので、中央揃えにしたい場合や位置をずらしたい場合などに効果的。
指定方法によってちょっと面白い表現が簡単にできたりします^^

ただ、「ボタンを左上に置く」など、サイズと位置を固定するなど top,right,bottom,left の方が指定しやすい事もあります。

inset, inset-inline, inset-outline 共通css

個別の部分以外は以下のcssで設定しています。
利用される際は、class を２重掛けにした上で。共通css の下にそれぞれのcssを追加してください。

共通CSSを見る
CSS code
.t7 {
  width: 250px;
  padding: 10px;
  margin-bottom: 1.5em;
  background-color: #333;
}
.t7 div {
  padding: 10px;
  background-color: aqua;
}
.t7 p {
  margin: 0 0 15px;
  color: #fff;
}

親要素に position: relative; 、自身をposition: absolute; にした場合

親要素内の position: absolute; になりますが、それぞれ位置や振る舞いが異なります。

テキストテキストテキストテキストテキストテキストテキスト

inset は上下左右の一括指定。
上下中央揃え、左右中央揃えも簡単です

下側テキスト下側テキスト下側テキスト下側テキスト下側テキスト

テキストテキストテキストテキストテキストテキストテキスト

inset-inlineは左右の位置指定。高さは内容量次第、左右サイズも変えられます

下側テキスト下側テキスト下側テキスト下側テキスト下側テキスト

テキストテキストテキストテキストテキストテキストテキスト

inset-outlineは上下の位置指定
幅はinline-block と同じ振る舞い(内容量次第)、上下サイズも変えられます

下側テキスト下側テキスト下側テキスト下側テキスト下側テキスト

position: absolute; の設定を見る
CSS code
.t7-absolute {
  position: relative;
}
.t7-absolute .inset {
  position: absolute;
  inset:  25px 35px;
}
.t7-absolute .inset-inline {
  position: absolute;
  inset-inline: 35px;
}
.t7-absolute .inset-block {
  position: absolute;
  inset-block: 25px;
}
HTML code
/* inset ------------------------------- */
<div class="t7 t7-absolute">
  <p>テキストテキストテキストテキストテキストテキストテキスト</p>
  <div class="inset">inset は上下左右の一括指定。<br>上下中央揃え、左右中央揃えも簡単です</div>
  <p>下側テキスト下側テキスト下側テキスト下側テキスト下側テキスト</p>
</div>
/* inset-inline ------------------------- */
<div class="t7 t7-absolute">
  <p>テキストテキストテキストテキストテキストテキストテキスト</p>
  <div class="inset-inline">inset-inlineは左右の位置指定。高さは内容量次第、左右サイズも変えられます</div>
  <p>下側テキスト下側テキスト下側テキスト下側テキスト下側テキスト</p>
</div>
/* inset-outline ------------------------- */
<div class="t7 t7-absolute">
  <p>テキストテキストテキストテキストテキストテキストテキスト</p>
  <div class="inset-block">inset-outlineは上下の位置指定<br>幅はinline-block と同じ振る舞い(内容量次第)、上下サイズも変えられます</div>
  <p>下側テキスト下側テキスト下側テキスト下側テキスト下側テキスト</p>
</div>
プロパティ指定方法他要素からの影響説明
inset上 左 下 右
(margin等と同じ) 		親要素の幅と高さ・top,right,bottom,left の指定と同じ
・最大幅は親に準じ、width指定のない限り親からはみ出ない
・テキストが自身より多い場合はBOXからはみ出る
inset-inline左 右親要素の幅のみ
上側要素の下に配置		・上側要素に対しては通常のblock要素
・下側要素に対してposition: absolute; となる
・高さは内容量に応じる。
・親より高くなる場合はBOX自体がはみ出す
inset-outline上 下親要素の幅と高さ+左padding
上下右paddingは無視		・親の左コンテンツ位置に配置。
・幅はinline-block と同じ(内容に合わせる)
・最大幅は親に準じ、width指定のない限り親からはみ出ない
・テキストが自身より多い場合はBOXからはみ出る
  • width, height 指定可。指定が親より大きい場合、下・右の指定は無視される
  • width, height指定のない場合、inset-inline 以外は「親要素 – 指定値」サイズになる(内容に準じない)
  • 文字方向( writing-mode:/ 縦書き・横書き) により間隔の方向が変わります。縦書きの際はご注意を。
  • インラインレベルの場合は、display: block 等で強制的にブロックレベルへの変更推奨。

自身を position: relative; にした場合

普通のブロック同様、幅は親要素のコンテンツ幅になり、高さは内容に従います。

ブロックに transform: translate() を掛けたような動きですが、移動分は position: absolute; と同じように他の要素に影響を与えません。

テキストテキストテキストテキストテキストテキスト

inset は上左の一括指定。
inset のコンテンツサイズのまま transform: translate()を掛けたように移動。移動した分が、隣や下の要素に重なります

下側テキスト下側テキスト下側テキスト下側テキスト下側テキスト

テキストテキストテキストテキストテキストテキスト

inset-inlineは右を指定
コンテンツサイズのまま transform: translateX()を掛けたように移動。移動した分が、隣の要素に重なります

下側テキスト下側テキスト下側テキスト下側テキスト下側テキスト

テキストテキストテキストテキストテキストテキスト

inset-outlineは上を指定
コンテンツサイズのまま transform: translateY()を掛けたように移動。移動した分が、下の要素に重なります

下側テキスト下側テキスト下側テキスト下側テキスト下側テキスト

position: relative; の設定を見る
CSS code
.t7-relative .inset {
  position: relative;
  inset:  25px 35px;
}
.t7-relative .inset-inline {
  position: relative;
  inset-inline: 30px;
}
.t7-relative .inset-block {
  position: relative;
  inset-block: 25px;
}
HTML code
/* inset ------------------------------- */
<div class="t7 t7-relative">
  <p>テキストテキストテキストテキストテキストテキストテキスト</p>
  <div class="inset">
    inset は上左の一括指定。<br>
    inset のコンテンツサイズのまま transform: translate()を掛けたように移動。移動した分が、隣や下の要素に重なります
  </div>
  <p>下側テキスト下側テキスト下側テキスト下側テキスト下側テキスト</p>
</div>
/* inset-inline ------------------------- */
<div class="t7 t7-relative">
  <p>テキストテキストテキストテキストテキストテキストテキスト</p>
  <div class="inset-inline">inset-inlineは右を指定<br>コンテンツサイズのまま transform: translateX()を掛けたように移動。移動した分が、隣の要素に重なります</div>
  <p>下側テキスト下側テキスト下側テキスト下側テキスト下側テキスト</p>
</div>
/* inset-outline ------------------------- */
<div class="t7 t7-relative">
  <p>テキストテキストテキストテキストテキストテキストテキスト</p>
  <div class="inset-block">inset-outlineは上を指定<br>コンテンツサイズのまま transform: translateY()を掛けたように移動。移動した分が、下の要素に重なります</div>
  <p>下側テキスト下側テキスト下側テキスト下側テキスト下側テキスト</p>
</div>
プロパティ指定方法他要素からの影響説明
inset上 左親のコンテンツ幅になる
(親要素の幅 – 左右padding)		・右・下は指定不可
・移動した分が、右や下の要素に重なる
inset-inline左親のコンテンツ幅になる
(親要素の幅 – 左右padding)		・右は指定不可
・移動した分が、右の要素に重なる
inset-outline上親のコンテンツ幅になる
(親要素の幅 – 左右padding)		・下は指定不可
・移動した分が、下の要素に重なる
  • width, height 指定可。通常通り指定サイズのブロックになる。
  • margin 指定可。下の重なりを無くしたい場合は margin-bottom:で調整可能。
  • 文字方向( writing-mode:/ 縦書き・横書き) により間隔の方向が変わります。縦書きの際はご注意を。
  • インラインレベルの場合は、display: block 等で強制的にブロックレベルへの変更推奨。