h1やpなどブロック要素にボーダーや背景をつけると、通常はその要素のコンテナボックスいっぱいに適用されます。要素やコンテナのサイズに関係なく、ボーダーや背景を拡張させるCSSのテクニックを紹介します。 入れ子で実装? と思いましたが、全然違いました。h1要素は1つだけ、他の要素はなし、疑似要素もなし、複数行になっても問題なし、CSSのプロパティ1つで実装できます。しかもすべてのブラウザにサポートされています。 下記のようにボーダーや背景をボックスからはみ出して配置できます。
![CSSでこんなことができるの知ってた? 要素・コンテナのサイズに関係なく、ボーダーや背景をはみ出して配置するテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/8940d63114dbcecb88686328383ad5718a98b97e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202203%2F2022071001%402x.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く