Edited at

【css】web全体を枠(フレーム)で囲う方法

More than 1 year has passed since last update.

最近よく見るweb全体をフレームで囲うデザインを実装するときに、わりと迷ったので記事にしました。


課題


  • 枠はスクロールしても位置が変わらない

  • bodyはスクロールさせたい(bodyの子要素にボーダーをつけてoverflowを設定するのは嫌)


解決策


  • body / htmlタグ自体に::before,::after擬似要素を追加

  • position: fixedの四角を上下左右に配置


実際のコード


style.css

/* 枠の太さ = 10px */

/* 枠の色 = #f08d24*/

html:before,
html:after,
body:before,
body:after {
content: "";
background: #f08d24;
position: fixed;
display: block;
z-index: 1;
}

/* 上 */
html:before {
height: 10px;
width: 100vw;
left: 0;
top: 0;
}

/* 右 */
html:after {
width: 10px;
height: 100vh;
right: 0;
top: 0;
}

/* 下 */
body:before {
height: 10px;
width: 100vw;
bottom: 0;
left: 0;
}

/* 左 */
body:after {
width: 10px;
height: 100vh;
top: 0;
left: 0;
}