CSSでこんなことができるの知ってた? 要素・コンテナのサイズに関係なく、ボーダーや背景をはみ出して配置するテクニック

h1pなどブロック要素にボーダーや背景をつけると、通常はその要素のコンテナボックスいっぱいに適用されます。要素やコンテナのサイズに関係なく、ボーダーや背景を拡張させるCSSのテクニックを紹介します。

入れ子で実装? と思いましたが、全然違いました。h1要素は1つだけ、他の要素はなし、疑似要素もなし、複数行になっても問題なし、CSSのプロパティ1つで実装できます。しかもすべてのブラウザにサポートされています。

下記のようにボーダーや背景をボックスからはみ出して配置できます。

要素やコンテナのサイズに関係なく、ボーダーや背景を拡張させるCSSのテクニック

ボーダーと背景の2種類があるので、まずはボーダーから見てましょう。

サイトのキャプチャ

デモページ

HTMLは非常にシンプルです。
ラッパーのsection要素があり、h1の見出しとpのパラグラフがあります。その下のコンテンツも同じ感じで実装されています。

h1要素をデベロッパーツールで確認してみると、下記のようになります。h1要素はブロックなので、通常であればボーダーはブロック内のみに表示されますが、ここで紹介するテクニックを使用するとボーダーを拡張できます。

サイトのキャプチャ

デモページ

ボーダーを拡張するCSSは、下記の通りです。

spanなど余分な要素を追加することなく、疑似要素もなし、オーバーフローの心配もなく、border-imageプロパティ1つだけでボーダーを拡張できます。

border-imageはショートハンドで、下記の3つの値がまとめられています。

  • border-image-source
  • border-image-slice
  • border-image-outset

グラデーションで5pxのボーダーを作成し、使用範囲を指定し、ボックスからはみ出すサイズを設定します。ボーダーを拡張する方向とサイズは、0 100vw 0 0で設定されています。左側に拡張する場合は、0 0 0 100vwとなります。

サイトのキャプチャ

すべてのブラウザにサポートされています(IE11も)。

実際の動作は、デモページでご覧ください。

See the Pen
CSS only extended underline
by Temani Afif (@t_afif)
on CodePen.

そして、ボーダーを拡張するテクニックにインスパイアされたのが、背景を拡張するテクニックです。

サイトのキャプチャ

デモページ

こちらもHTMLは同じで、非常にシンプルです。

同様にデベロッパーツールで確認してみます。
通常であれば背景はブロック内のみに表示されますが、背景は拡張されています。

サイトのキャプチャ

デモページ

背景を拡張するCSSは、下記の通りです。

spanなど余分な要素を追加することなく、疑似要素もなし、オーバーフローの心配もありません。border-imageのショートハンドを個別に設定しています。

p要素も同様に背景を拡張できます。

サイトのキャプチャ

デモページ

背景を拡張するCSSは、下記の通りです。

実際の動作は、デモページでご覧ください。

See the Pen
CSS only extended element bg color
by Mathieu (@mathieualphamosa)
on CodePen.

元ネタは下記ツイートより。

sponsors

top of page

©2022 coliss