デバイスに合わせて変化する！ border-block-start-width とメディアクエリの組み合わせ

CSS Miscellaneous: border-block-start-width プロパティ

border-block-start-width プロパティは、要素のブロック方向の開始位置における境界線の幅を指定します。これは、要素の書き込みモード、方向性、およびテキスト方向によって、物理的な境界線の幅にマッピングされます。

用途

このプロパティは、以下の場合に使用できます。

• 要素の開始位置に装飾的な境界線を追加したい場合
• 要素の開始位置を強調したい場合
• 要素の開始位置と他の要素との間隔を調整したい場合

値

border-block-start-width プロパティには、以下の値を指定できます。

• <border-width>: 境界線の幅をピクセル、em、またはその他の単位で指定します。
• thin, medium, thick: 境界線の幅を相対的な値で指定します。
• inherit: 親要素から境界線の幅を継承します。
• initial: 初期値である medium を設定します。
• revert: 要素のスタイル計算における 'border-block-start-width' プロパティの適用を元に戻します。
• revert-layer: 要素のスタイル計算における 'border-block-start-width' プロパティの適用を、その親要素のスタイル計算における値に戻します。
• unset: 'border-block-start-width' プロパティを未設定状態に戻します。

例

以下の例は、要素の開始位置に 1px の赤い境界線を設定する方法を示しています。

.element {
  border-block-start-width: 1px;
  border-block-start-color: red;
}

補足

• border-block-start-width プロパティは、border-top-width, border-right-width, border-bottom-width, border-left-width プロパティと似ていますが、ブロック方向によって異なります。
• 関連する CSS プロパティとして、border-block-end-width, border-inline-start-width, border-inline-end-width があります。

• 本解説は、CSS Miscellaneous の一部である border-block-start-width プロパティについてのみ説明しています。
• CSS の詳細については、以下の参考資料を参照してください。

CSS border-block-start-width サンプルコード

.element {
  border-block-start-width: 1px;
  border-block-start-color: red;
}

要素の開始位置に 20px の青い境界線を設定し、その境界線を二重にする

.element {
  border-block-start-width: 20px;
  border-block-start-color: blue;
  border-block-start-style: double;
}

要素の開始位置に 10px の太線と 5px の点線で構成される複合境界線を設定する

.element {
  border-block-start-width: 10px;
  border-block-start-style: solid;
  border-block-start-color: black;
  border-block-start-width: 5px;
  border-block-start-style: dotted;
  border-block-start-color: gray;
}

要素の開始位置に、要素の幅の 10% の太さの境界線を設定する

.element {
  border-block-start-width: 10%;
  border-block-start-style: solid;
  border-block-start-color: black;
}

要素の開始位置に、要素の幅の 10% の太さの点線と、その内側に 5px の太さの赤い実線の境界線を設定する

.element {
  border-block-start-width: 10%;
  border-block-start-style: dotted;
  border-block-start-color: black;
  border-block-start-width: 5px;
  border-block-start-style: solid;
  border-block-start-color: red;
}

要素の開始位置に、要素の幅の 10% の太さの境界線を設定し、その境界線を丸くする

.element {
  border-block-start-width: 10%;
  border-block-start-style: solid;
  border-block-start-color: black;
  border-block-start-radius: 10px;
}

要素の開始位置に、要素の幅の 10% の太さの境界線を設定し、その境界線の角を丸くする

.element {
  border-block-start-width: 10%;
  border-block-start-style: solid;
  border-block-start-color: black;
  border-block-start-radius: 10px 10px 0 0;
}

要素の開始位置に、要素の幅の 10% の太さの斜線と、その内側に 5px の太さの赤い実線の境界線を設定する

.element {
  border-block-start-width: 10%;
  border-block-start-style:

CSS border-block-start-width を利用する他の方法

border-block-start-width プロパティは、border-width プロパティと組み合わせて、複数の境界線を設定することができます。

.element {
  border-block-start-width: 10px solid black;
  border-block-start-width: 5px dotted red;
}

このコードは、要素の開始位置に、10px の太さの黒い実線と、その内側に 5px の太さの赤い点線の境界線を設定します。

境界線の位置を調整する

border-block-start-position プロパティを使用して、境界線の位置を調整することができます。

.element {
  border-block-start-width: 10px;
  border-block-start-style: solid;
  border-block-start-color: black;
  border-block-start-position: 5px;
}

このコードは、要素の開始位置から 5px 離れた位置に、10px の太さの黒い実線の境界線を設定します。

境界線の角丸を調整する

border-block-start-radius プロパティを使用して、境界線の角丸を調整することができます。

.element {
  border-block-start-width: 10px;
  border-block-start-style: solid;
  border-block-start-color: black;
  border-block-start-radius: 10px;
}

このコードは、要素の開始位置の境界線を、10px の角丸で描画します。

疑似要素と組み合わせて使用する

border-block-start-width プロパティは、疑似要素と組み合わせて使用することで、より複雑なデザインを作成することができます。

.element::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-block-start-width: 10px;
  border-block-start-style: solid;
  border-block-start-color: black;
}

このコードは、要素の開始位置の前に、10px の太さの黒い実線の境界線を持つ 10px x 10px のボックスを追加します。

アニメーションと組み合わせて使用する

border-block-start-width プロパティは、アニメーションと組み合わせて使用することで、動的なデザインを作成することができます。

.element {
  border-block-start-width: 10px;
  border-block-start-style: solid;
  border-block-start-color: black;
  animation: border-width 2s infinite;
}

@keyframes border-width {
  0% {
    border-block-start-width: 10px;
  }
  50% {
    border-block-start-width: 20px;
  }
  100% {
    border-block-start-width: 10px;
  }
}

このコードは、要素の開始位置の境界線の幅を、2秒間隔で 10px から 20px にアニメーションします。

メディアクエリと組み合わせて使用する

border-block-start-width プロパティは、メディアクエリと組み合わせて使用することで、デバイスや画面サイズに応じてデザインを変更することができます。

@media (max-width: 768px) {
  .element {
    border-block-start-width: 5px;