10
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

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

最近よく見る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;
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
10
Help us understand the problem. What are the problem?