[HTML]ページ全体を細い線で囲む

公開: 2025.11.29

HTML・CSSだけでページ全体を線（細い線or太い線）で囲むコードです。
細い線で囲むのは5年くらい前に流行っていた印象がありますが、今でもおしゃれな素材配布サイトなどで時折見かけますね。

■サンプル

実際にこのページを灰色の細い線で囲んでみました。
ほかにテンプレート：囲みでも似たようなコードを使っています。

■HTML

 
  <!-- どこに配置しても良いですが、コードの一番上に置くのが分かりやすいと思います。-->
  <div class="all-border"></div>

■CSS

 
.all-border{
position:fixed;
right:5vw;
top:1vh;
width:90vw;
height:97vh;
border:1px solid #999;
z-index:-1;}

/** スマホ表示用 **/
 @media screen and (max-width: 500px){
.all-border{
right:3vw;
top:0.5vh;
width:94vw;
height:98vh;}
  }

■補足

・このページの線は上部メニューと被らないようにするために上の余白（top:の数値）を大きめに設定しています（PCは10vh、スマホは12vh）。

・ナノの無料版で使用する場合、下部に広告が表示されるのでその分だけ下の余白を大きめにするなど調整するとより見栄えが良くなるかもしれません。

■利用時の注意事項

・線の配置を調整したい場合、上下についてはtop:とheight:の数値を、左右についてはright:とwidth:の数値を修正してみてください。

・線（all-border）でz-index:-1の「-1」を0以上の数字にすると、線に囲まれた内側にあるリンクがクリックできなくなる場合があります。また線に囲まれた内側のリンクをクリックできない場合は、要素の重なり合いを確認ください。
（z-indexは数字が小さいほど下側に、数字が大きいほど上に配置されます）