制作者の活動(PR)。

サイト表紙
しらぎくのウェブサイト作成入門
CSSの小技集
内容をスクロール出来るブロックレヴェル要素

内容をスクロール出来るブロックレヴェル要素。

CSSに於ける基本的なCSSの小技として、内容をスクロール出来るブロックレヴェル要素の作り方をご紹介します。

サイト表紙に置かれる更新案内などに利用すると良いでしょう。

ここでは、具体例としてサイト表紙に置かれる更新案内でのやり方を解説しておりますが、他の用途でももちろん同様のスタイルを用いる事が出来ます。
この方法は携帯端末では利用出来ません。

内容をスクロール出来るブロックレヴェル要素・目次。

▲記事先頭
▽次項目

具体的なサンプル
注意したい事
- オペラ 6.xでの問題
この記事のまとめ

まず、内容をスクロール出来るブロックレヴェル要素を実現させるための具体的なサンプルとして好ましくないマークアップを行っているHTMLを挙げましょう。

この記事では正しいマークアップに直した上で適切なスタイルをあてるという方針を採ります。

好ましくないマークアップのHTML。

▲記事先頭
△前項目
▽次項目

結構多くのサイトで見かけるのですが、サイトの更新案内を<textarea>要素としてマークアップしているものがあります。

例えば以下のようなものです。

好ましくないマークアップのHTMLを読み飛ばす

<textarea rows="4" cols="32">平成19年 9月 6日
　△△を更新しました。
平成19年 9月 1日
　××のコーナに□□を追加しました。
平成19年 8月25日
　××のコーナに◇◇を追加しました。
平成19年 8月17日
　新コンテンツ・△△を追加しました。
  (以下略)
</textarea>

好ましくないマークアップのHTMLはここまで

確かに、ファイヤーフォックスやインターネットエクスプローラなどのグラフィカルなウェブブラウザでは、<textarea>要素の内容は領域がcols属性及びrows属性で定められ、それを超えた内容の場合にはスクロールするように出来ております。

ですが、それはあくまでも多くのウェブブラウザがそのように実装しているだけに過ぎないのです。

そもそも、<textarea>要素はテキスト入力欄(しかも置換インライン要素)であり、内容をスクロール出来るブロックレヴェル要素ではありません。

また、<textarea>要素はその定義上内容にアンカーを降ろす事が出来ません。更新案内であれば、更新されたページへ素早くアクセス出来るアンカーは是非用意したいものです。もちろんその他の用途であっても、<textarea>要素にしなければならない理由はありません。

表示効果を期待するのであれば、希望の表示効果が出る要素としてマークアップせず、その内容に相応しい要素としてマークアップし、スタイルシート言語を用いるのが順当です。

ここでは、その方法を考えて見ましょう。

本頁の目次

好ましいマークアップに直しましょう。

▲記事先頭
△前項目
▽次項目

まず、件の更新案内を好ましいマークアップに直しましょう。

この例で言えば、更新日と更新内容を組とした定義リスト(<dl>要素)としてマークアップするのが順当でしょう。

更に言えば、<textarea>要素と違って<dl>要素ではアンカーが自由に降ろせますので、更新されたコンテンツに素早くアクセス出来るようにしておくと便利になるでしょう。

そこで、以下のようにマークアップし直しましょう。

<a>要素・href属性の値は該当するページへの相対パスとしております。

改善されたHTMLマークアップを読み飛ばす

<dl id="history">
    <dt>平成19年 9月 6日</dt>
    <dd><a href="triangle.html">△△</a>を更新しました。</dd>
    <dt>平成19年 9月 1日</dt>
    <dd><a href="cross.html">××</a>のコーナに<a href="square.html">□□</a>を追加しました。</dd>
    <dt>平成19年 8月25日</dt>
    <dd><a href="cross.html">××</a>のコーナに<a href="diamond.html">◇◇</a>を追加しました。</dd>
    <dt>平成19年 8月17日</dt>
    <dd>新コンテンツ・<a href="triangle.html">△△</a>を追加しました。</dd>
  (以下略)
    </dl>

改善されたHTMLマークアップはここまで

本頁の目次

続いて、スタイルシートを作ります。

▲記事先頭
△前項目
▽次項目

適切なマークアップが出来たなら、今度はこれに対して内容がスクロール出来る適切なスタイルをCSSで記述します。

CSSでのスタイル指定を読み飛ばす

dl#history {
    width: 16em;
    height: 4.8em;
    margin: 1em 0 0;
    padding: 0.5em;
    font-size: 100%;
    line-height: 1.2em;
    border: #0bb solid 1px;
    overflow: auto;
    }

dl#history dt {
    margin: 0;
    padding: 0;
    }

dl#history dd {
    margin: 0;
    padding: 0 0 0 1em;
    }

CSSでのスタイル指定はここまで

本頁の目次

ここで重要なのは初めの dl#history セレクタで指定される要素のスタイル定義です。

それ以外のセレクタは、<dt>要素及び<dd>要素のスタイル調整であり、この記事の目的を果たすために特に必要と言う訳ではありません。

先ず、widthプロパティとheightプロパティで表示領域の横幅と高さを指定します。

高さについては、一行の高さ(line-heightプロパティ)も絡んできますので、line-heightプロパティで一行の高さを指定しておくと正確なデザインが出来ます。
- 上記では一行の高さをline-height: 1.2em;プロパティで1.2文字分としておりますので、要素の高さを4.8文字分とする事で四行入るようにしております。
続いて、overflow: auto;プロパティを指定します。

このプロパティは内容が入り切らない場合にスクロール出来るようにします。
- 仕様としてはブラウザに依存するものとしておりますが、多くのブラウザでは内容が入り切らない場合のみにスクロールバーを発生させてスクロール可能にしているようです。
- 同様に内容が入り切らない場合にスクロール出来るようにするプロパティとしてoverflow: scroll;プロパティもありますが、こちらは多くのブラウザでは内容が入り切る場合でも縦横双方にスクロールバーを表示させるようです。また、オペラ6.xでは入り切らない内容がクリップされて読めなくなります。
以上の指定の上で、余白, パディング及び枠線などを適宜設定する事で読み易くします(ここでは枠線を青緑色にしております)。
- インターネットエクスプローラでは、パディングや枠線が高さ及び幅に算入される場合がありますので注意しましょう。