builder Top
HTML/CSS
- Firefox
- Safari
- CSS
- Webデザイン
- Photoshop
- ...

CSSを使ってコンテンツボックスにスクロールバーを表示させる方法教えます

文：John Lee（Special to TechRepublic）
翻訳校正：村上雅章・野崎裕子

2008/04/28 08:00

一定の幅と高さのブロックの中にコンテンツを格納し、スクロールバーを用いてそれをスクロールできるようにするCSSマークアップの記述について、段階を踏んで解説する。

　このままのスタイルでは、ウェブブラウザで閲覧した時にコンテンツボックス内の文字とスクロールバーが近すぎて見にくくなる。そういったことを避けるために、コンテンツボックス枠の内側にパディング（間隙）を設けるコードを追加する（リストH）。

リストH

<html>
<head>
<title>スクロールバーの付いたコンテンツボックス</title>
<style type="text/css">
<!--
.scrollBox {
      font-family: "Hiragino Kaku Gothic Std", "ＭＳ ゴシック";
      font-size: 10px;
      line-height: 12px;
      height: 150px;
      width: 200px;
      padding: 5px;
}
-->
</style>
</head>
<body>
<div class="scrollBox">
「ドアは船窓のように真ん丸である。そして、緑色に塗られたこのドアのど真ん中には金色に輝く真鍮製のノブがついている。ドアを開けると、そこはトンネルのように細長いホールになっている。煙のない、とても居心地の良いトンネルのようなホールだ。壁には羽目板が貼られ、タイル敷きの床の上にはカーペットが敷かれている。また、磨き抜かれた椅子が何脚か置かれており、帽子やコートを掛けるためのフックもたくさんたくさん用意されている。ホビットはお客さん好きなのだ。このトンネルは延々と続き、ほぼ真っ直ぐに丘の斜面へと向かっている。この丘--辺り一帯に住む人々からただ単に『丘』と呼ばれている--には、数多くの小さな丸いドアが、その斜面に沿ってずっと続いている。ホビットの家には2階がない。寝室や浴室、貯蔵室、（数多くの）食料品庫、衣装部屋（彼は衣装を収納するためだけに幾部屋も使っていた）、台所、食堂といったすべての部屋が同じ階にあり、しかも同じ廊下で結ばれている。良い部屋はすべてこの廊下の左側（家の奥へと進んでいく場合）にある。左側にある部屋だけに窓があり、その深くはめ込まれた丸い窓からは庭を望むことができ、その向こう側には、川に向かって下っていく牧草地が広がっているからだ」（J.R.R. Tolkien『The Hobbit or There and Back Again』より）
</div>
</body>
</html>

　スクロール機能を追加する前に、見栄えを良くするためのデザインを追加することにしよう。ここでは背景色をライトブルー（lightblue）にするコードを追加している（リストI）。

リストI

<html>
<head>
<title>スクロールバーの付いたコンテンツボックス</title>
<style type="text/css">
<!--
.scrollBox {
      font-family: "Hiragino Kaku Gothic Std", "ＭＳ ゴシック";
      font-size: 10px;
      line-height: 12px;
      height: 150px;
      width: 200px;
      padding: 5px;
      background-color: lightblue;
}
-->
</style>
</head>
<body>
<div class="scrollBox">
「ドアは船窓のように真ん丸である。そして、緑色に塗られたこのドアのど真ん中には金色に輝く真鍮製のノブがついている。ドアを開けると、そこはトンネルのように細長いホールになっている。煙のない、とても居心地の良いトンネルのようなホールだ。壁には羽目板が貼られ、タイル敷きの床の上にはカーペットが敷かれている。また、磨き抜かれた椅子が何脚か置かれており、帽子やコートを掛けるためのフックもたくさんたくさん用意されている。ホビットはお客さん好きなのだ。このトンネルは延々と続き、ほぼ真っ直ぐに丘の斜面へと向かっている。この丘--辺り一帯に住む人々からただ単に『丘』と呼ばれている--には、数多くの小さな丸いドアが、その斜面に沿ってずっと続いている。ホビットの家には2階がない。寝室や浴室、貯蔵室、（数多くの）食料品庫、衣装部屋（彼は衣装を収納するためだけに幾部屋も使っていた）、台所、食堂といったすべての部屋が同じ階にあり、しかも同じ廊下で結ばれている。良い部屋はすべてこの廊下の左側（家の奥へと進んでいく場合）にある。左側にある部屋だけに窓があり、その深くはめ込まれた丸い窓からは庭を望むことができ、その向こう側には、川に向かって下っていく牧草地が広がっているからだ」（J.R.R. Tolkien『The Hobbit or There and Back Again』より）
</div>
</body>
</html>

　ここまでのコードをウェブブラウザで確認すると、ライトブルーの領域内でテキストが表示されているものの、テキストがその領域内で収まりきらず、途中で途切れてしまっていることに気付くはずだ（訳注：ブラウザによっては、このコントロールのオーバーフロー時におけるデフォルト属性がvisibleになっているため、すべてのテキストが表示される場合もある）。これは、このコントロールに高さ属性を指定している（そしてこのコントロールのオーバーフロー時の属性がhiddenとなっている）ためである。このため、指定した高さまでで収まりきらなかったテキストを表示させるためのコードが必要となる。この場合、コントロールのオーバーフロー属性をautoに設定することで、必要に応じてスクロールバーが表示されるようになる（コードJ）。

リストJ

<html>
<head>
<title>スクロールバーの付いたコンテンツボックス</title>
<style type="text/css">
<!--
.scrollBox {
      font-family: "Hiragino Kaku Gothic Std", "ＭＳ ゴシック";
      font-size: 10px;
      line-height: 12px;
      height: 150px;
      width: 200px;
      padding: 5px;
      background-color: lightblue;
      overflow: auto;
}
-->
</style>
</head>
<body>
<div class="scrollBox">
「ドアは船窓のように真ん丸である。そして、緑色に塗られたこのドアのど真ん中には金色に輝く真鍮製のノブがついている。ドアを開けると、そこはトンネルのように細長いホールになっている。煙のない、とても居心地の良いトンネルのようなホールだ。壁には羽目板が貼られ、タイル敷きの床の上にはカーペットが敷かれている。また、磨き抜かれた椅子が何脚か置かれており、帽子やコートを掛けるためのフックもたくさんたくさん用意されている。ホビットはお客さん好きなのだ。このトンネルは延々と続き、ほぼ真っ直ぐに丘の斜面へと向かっている。この丘--辺り一帯に住む人々からただ単に『丘』と呼ばれている--には、数多くの小さな丸いドアが、その斜面に沿ってずっと続いている。ホビットの家には2階がない。寝室や浴室、貯蔵室、（数多くの）食料品庫、衣装部屋（彼は衣装を収納するためだけに幾部屋も使っていた）、台所、食堂といったすべての部屋が同じ階にあり、しかも同じ廊下で結ばれている。良い部屋はすべてこの廊下の左側（家の奥へと進んでいく場合）にある。左側にある部屋だけに窓があり、その深くはめ込まれた丸い窓からは庭を望むことができ、その向こう側には、川に向かって下っていく牧草地が広がっているからだ」（J.R.R. Tolkien『The Hobbit or There and Back Again』より）
</div>
</body>
</html>

　さまざまなOS上のさまざまなブラウザでこのファイルを閲覧し、これらのマークアップによってどのようにスクロールバーが表示されるのかを確認してほしい。

　scrollBoxはCSSのクラスであり、上記と同様にしてより詳細なスタイル設定を行うことも可能である。こういった設定は、単なるテキスト要素だけではなく、どのようなHTML要素にも適用することができる。例えば、こういったテクニックを<img>タグに適用することで、解像度のより高いイメージをスクロールボックスに収めることも可能になる。

この記事は海外CNET Networks発のニュースをシーネットネットワークスジャパン編集部が日本向けに編集したものです。海外CNET Networksの記事へ