スクロールバーを無くす

IEの場合、ページの長さに関わらずスクロールバーは表示されています。 今回はそれをなくしてちょっと変わったデザインを実現するテクニックです。

テクニック使用後

使用後のページ

スクロールバーがなくなっているのが分かったでしょうか？

やり方

サンプルのスタイルシートはこんな感じになります。

html{
    overflow:hidden;
    margin:0%;
    padding:0%;
    height:100%;
    background-image:url(../../img/back.gif);
}
body{
    margin:10% 5%;
    overflow:auto;
    height:80%;
    width:90%;
    position:relative;
    padding:0%;
    background-image:url(../../img/sub-back.jpg);
}

背景の2重指定も同時に使用しています。 HTMLは通常と変わりません。bodyタグの中をいつも通り書いていくだけです。

htmlタグにoverflow:hiddenを指定するとスクロールバーが消えます。 今回はそれを利用しました。

大事なのはhtml、bodyそれぞれに指定したheight,widthの値です。 htmlは必ず100%、bodyは必ず%で指定してください。pxだと状況により見えない部分が生じ、どうにもできなくなります。

もう1つbodyのoverflow:auto;も大事です。本文が長くなった場合、これがないとはみ出したり読めなくなったりします。

---

使いこなすための＋α

このテクニックも標準準拠モードで書く必要があります。
詳しくは標準準拠と過去互換モードを参照。

そのため古いブラウザーでは効果がありません。あとOperaでも効きませんが、読めなくなるほど破綻することは無いので、特に気にする必要はありません。

---