【CSS】border-imageを使って、子要素を親要素からはみ出して画面幅いっぱいに表示する

2024年1月17日

URLをコピーしました！

border-imageを使って、子要素を親要素からはみ出して画面幅いっぱいに表示する方法について学びました。

以下のような指定できます↓

  border-image:linear-gradient( #333,#333 ) fill 0 //  0 100vw;
/*   
  個別の指定↓
  border-image-source: linear-gradient( #333,#333 );
  border-image-slice: fill 0; 
  border-image-width: 1; 「//」の部分 スラッシュ間に値を指定できる
  border-image-outset: 0 100vw;
  border-image-repeat: stretch; 省略
  */

サンプル

「0.5×」を押すと見やすいです。

See the Pen Untitled by ユイト (@mikiprogram) on CodePen.

border-imageの場合、100vwを指定してもスクロールバーが表示されないため便利です↓

境界画像のうち、 border-image-outset によって要素の境界ボックスの外に表示された部分は、はみ出した際にスクロールバーを表示させたり、マウスイベントを受け取ったりすることはありません。
https://developer.mozilla.org/ja/docs/Web/CSS/border-image-outset

デメリットはborder-imageで背景色を敷いているため、このプロパティについて理解していないと可読性が悪いことや、印刷時に不具合が起きるらしいです。

参考記事

Smashing Magazine

The Complex But Awesome CSS border-image Property — Smashing Magazine The CSS `border-image` property is one of those properties you undoubtedly know exists but may not have ever reached for. In this article, Temani Afif demonstra…

あわせて読みたい