Webデザイナー必見！inset-block-end プロパティで実現する高度なレイアウト

CSS Miscellaneous - inset-block-end プロパティ

inset-block-end は、以下の要素に適用できます。

• 絶対配置された要素
• グリッドレイアウトのアイテム
• フレックスボックスのアイテム

inset-block-end の値は、以下のいずれかになります。

• 長さ (px、em、remなど)
• パーセンテージ
• auto

長さ の場合、要素は親要素のブロック方向の終端から指定された距離だけ離れます。

パーセンテージ の場合、要素は親要素のブロック方向の終端から指定された割合だけ離れます。

auto の場合、要素は親要素のブロック方向の終端に配置されます。

inset-block-end の使用例:

.element {
  position: absolute;
  bottom: 10px;
  inset-block-end: 20px;
}

このコードは、要素を親要素の 下端 から 10px 離し、ブロック方向の終端 から 20px 離します。

inset-block-end は、以下のプロパティと組み合わせて使用できます。

• inset-block-start
• inset-inline-start
• inset-inline-end

これらのプロパティを使用して、要素の すべての辺 からの距離を設定できます。

inset-block-end は、要素の 垂直方向 の位置を調整する便利なプロパティです。

補足

• inset-block-end は、writing-mode プロパティの影響を受けます。
• inset-block-end は、direction プロパティの影響を受けます。
• inset-block-end は、text-orientation プロパティの影響を受けます。

さまざまな inset-block-end サンプルコード

要素を親要素の底部から 20px 離す

.element {
  position: absolute;
  bottom: 20px;
  inset-block-end: 20px;
}

要素を親要素の底部に配置し、上端から 10px 離す

.element {
  position: absolute;
  bottom: 0;
  inset-block-end: 10px;
}

要素を親要素の高さの 50% から 10px 離す

.element {
  position: absolute;
  top: 50%;
  inset-block-end: 10px;
  transform: translateY(-50%);
}

要素を親要素の高さの 25% から 50% の間に配置する

.element {
  position: absolute;
  top: 25%;
  bottom: 25%;
  inset-block-end: 50%;
}

要素をグリッドレイアウトのアイテムの中央に配置する

.grid {
  display: grid;
}

.element {
  grid-area: 1 / 1;
  inset-block-end: 50%;
}

フレックスボックスのアイテムを底部に配置する

.container {
  display: flex;
  flex-direction: column;
}

.element {
  flex: 1 1 auto;
  margin-top: auto;
  inset-block-end: 0;
}

要素を画面の底部に配置する

.element {
  position: fixed;
  bottom: 0;
  inset-block-end: 0;
  width: 100%;
}

要素をスクロールに応じて追従させる

.element {
  position: sticky;
  bottom: 0;
  inset-block-end: 0;
}

要素をアニメーションさせる

.element {
  position: absolute;
  bottom: 0;
  inset-block-end: 20px;
  transition: inset-block-end 0.5s ease-in-out;
}

.element:hover {
  inset-block-end: 50px;
}

これらのサンプルコードは、inset-block-end プロパティのさまざまな使い方を示しています。これらのコードを参考に、さまざまなレイアウトを作成してみてください。

inset-block-end の代替方法

margin プロパティを使用して、要素の上下左右の余白を設定できます。

.element {
  margin-bottom: 20px;
}

position プロパティと top または bottom プロパティ

position プロパティを absolute または relative に設定し、top または bottom プロパティを使用して、要素の上下方向の位置を設定できます。

.element {
  position: absolute;
  bottom: 20px;
}

flexbox を使用して、要素を垂直方向に配置できます。

.container {
  display: flex;
  flex-direction: column;
}

.element {
  flex: 1 1 auto;
  margin-top: auto;
}

grid layout を使用して、要素を垂直方向に配置できます。

.grid {
  display: grid;
}

.element {
  grid-area: 1 / 1;
  align-self: end;
}

CSS calc() 関数

calc() 関数を使用して、要素の位置を動的に計算できます。

.element {
  bottom: calc(50% - 10px);
}

これらの方法は、それぞれ異なる利点と欠点があります。使用方法は、作成するレイアウトによって異なります。

inset-block-end プロパティを使用する利点は、以下のとおりです。

• 簡潔に記述できる
• すべてのブラウザでサポートされている

inset-block-end プロパティを使用する欠点は、以下のとおりです。

• 他の方法と比べて柔軟性に欠ける
• 複雑なレイアウトを作成するには不向き

その他の方法を使用する利点は、以下のとおりです。

• より柔軟なレイアウトを作成できる
• 複雑なレイアウトにも対応できる

その他の方法を使用する欠点は、以下のとおりです。

• 記述が複雑になる場合がある
• 古いブラウザではサポートされていない場合がある

どの方法を使用するかは、作成するレイアウトとブラウザのサポート状況によって決定する必要があります。