CSSでこんなことができるの知ってた? 要素・コンテナのサイズに関係なく、ボーダーや背景をはみ出して配置するテクニック
Post on:2022年7月13日
h1
やp
などブロック要素にボーダーや背景をつけると、通常はその要素のコンテナボックスいっぱいに適用されます。要素やコンテナのサイズに関係なく、ボーダーや背景を拡張させるCSSのテクニックを紹介します。
入れ子で実装? と思いましたが、全然違いました。h1
要素は1つだけ、他の要素はなし、疑似要素もなし、複数行になっても問題なし、CSSのプロパティ1つで実装できます。しかもすべてのブラウザにサポートされています。
下記のようにボーダーや背景をボックスからはみ出して配置できます。
ボーダーと背景の2種類があるので、まずはボーダーから見てましょう。
HTMLは非常にシンプルです。
ラッパーのsection
要素があり、h1
の見出しとp
のパラグラフがあります。その下のコンテンツも同じ感じで実装されています。
1 2 3 4 |
<section> <h1 class="full-line">Main title</h1> <p>Dragée powder bear claw tiramisu pudding gummi bears wafer. Macaroon chocolate cake cake marzipan icing carrot cake macaroon sweet. Lemon drops </p> </section> |
h1
要素をデベロッパーツールで確認してみると、下記のようになります。h1
要素はブロックなので、通常であればボーダーはブロック内のみに表示されますが、ここで紹介するテクニックを使用するとボーダーを拡張できます。
ボーダーを拡張するCSSは、下記の通りです。
1 2 3 4 |
.full-line { border-image: linear-gradient(0deg,#1095c1 5px,#0000 0) fill 0//0 100vw 0 0; padding: 10px 0; } |
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は同じで、非常にシンプルです。
1 2 3 4 |
<section> <h1 class="full-line">Main title</h1> <p>Dragée powder bear claw tiramisu pudding gummi bears wafer. Macaroon chocolate cake cake marzipan icing carrot cake macaroon sweet. Lemon drops </p> </section> |
同様にデベロッパーツールで確認してみます。
通常であれば背景はブロック内のみに表示されますが、背景は拡張されています。
背景を拡張するCSSは、下記の通りです。
1 2 3 4 5 6 |
.full-line { padding: 1rem 0; border-image-source: linear-gradient(#10a1da,#10a1da); border-image-slice: 0 fill; border-image-outset: 0 100vw 0 50px; } |
span
など余分な要素を追加することなく、疑似要素もなし、オーバーフローの心配もありません。border-image
のショートハンドを個別に設定しています。
p
要素も同様に背景を拡張できます。
背景を拡張するCSSは、下記の通りです。
1 2 3 4 5 6 |
p { padding: 1.5rem 0; font-size: 1.5rem; text-align: justify; border-image: linear-gradient(#fcddd0,#fcddd0) fill 0//0 50px 0 100vw; } |
実際の動作は、デモページでご覧ください。
See the Pen
CSS only extended element bg color by Mathieu (@mathieualphamosa)
on CodePen.
元ネタは下記ツイートより。
💡 CSS Tip!
Add an underline to your title and extend it to the right edge of the screen whatever the element/container size
✅ No extra element
✅ No pseudo-element
✅ No overflow issue
✅ Only 1 CSS propertyDemo: https://t.co/GXSqFPrdrm via @CodePen#CSS pic.twitter.com/8e46bm8Bc9
— T. Afif @ CSS Challenges (@ChallengesCss) June 16, 2022
sponsors