Help us understand the problem. What is going on with this article?

【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;
}
cheez921
フロントエンドエンジニアになりたい新卒2年生
a-hikkoshi
当社は、親会社である株式会社エイチームの経営理念をそのままに、引越しの比較サービス開始以降、大切にしてきた「三方よし」の理念を基本として、世の中に求められるサービスの創造を目指します。 一緒に働けるエンジニアを募集しております。下記URLよりご応募ください。 https://bit.ly/3lwf7QJ
https://hikkoshi.a-tm.co.jp/
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