builder Top
HTML/CSS
- Safari
- Photoshop
- Safari
- Firefox
- HTML
- ...

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

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

2008/04/28 08:00

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

　私は以前の記事（TechRepublic Programming and Development）で、今では使われなくなった（そして悪名高い）<marquee>タグの機能をFlashで実現する方法について解説した。その記事において私は、<marquee>タグの機能をCSSで実現することも可能であるが、ややこしいJavaScriptを数行記述しなければならないとも書いた。

　しかし、大量のコンテンツを限られたスペース内に表示する方法はこれだけではない。一定の幅と高さのブロックの中にコンテンツを格納し、スクロールバーを用いてそれをスクロールできるようにするCSSマークアップがあるのだ。これを用いることで、コンテンツをスクロールバーの付いたフレーム（一定枠）内で閲覧できるようにしながら、それをページ内の好きな位置に配置できるようになる。これによって、あなたとあなたのクライアントは、該当ページの見た目をより細かく制御できるようになる。私のクライアントは皆、このソリューションを気に入っており、あなたのクライアントも気に入ってくれるはずだ。

　まず、好きなHTMLエディタをオープンし、新たなページを作成する。そして、手始めにリストAのコードを入力する。

リストA

<html>
<head>
<title>スクロールバーの付いたコンテンツボックス</title>
</head>
<body>
</body>
</html>

　続いて、今回記述するCSSコードの効果を判りやすくするために、HTMLドキュメントの本体部分にテキストを記述する（リストB）。効果が判るようにするには、それなりの量のテキストを記述する必要がある。つまり、ページ完成時にスクロールできるだけの分量になっていなければならないというわけである。

リストB

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

　テキストを記述できたのであれば、CSSのクラスをそれに割り当てておくことにしよう。CSSマークアップのコーディングはまだ行っていないものの、テキストとスタイルを関連付けておくことで、コーディング作業の進捗とともにどのようなスタイルが出来上がっていくのかを、ウェブブラウザからいつでも確認できるようになるのである。

　この記事で使用するスタイルのクラス（何度かに分割して作成していくことにする）には、「scrollBox」（スクロールボックス）という判りやすい名前を付けることにしよう。こういったクラス名をテキストに割り当てるには、<div>タグを使用することになる（リストC）。

リストC

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

リストD

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