CSSとHTMLを使用してスクロールテキストを含むボックスを作成する
HTMLスクロールボックスは、ボックスの内容がボックスの大きさより大きい場合、右側と下にスクロールバーを追加するボックスです。 言い換えれば、約50語に収まるボックスがあり、200語のテキストがある場合、HTMLスクロールボックスはスクロールバーを上にして、追加の150語を見ることができます。 標準HTMLでは、余分なテキストをボックスの外に押し出すだけです。
HTMLスクロールの作成はかなり簡単です。 スクロールしたい要素の幅と高さを設定してから、 CSSオーバーフロープロパティを使用してスクロールをどのように行うかを設定するだけです。
余分なテキストをどうすればいいですか？
レイアウト上のスペースに収まらないテキストが多い場合は、いくつかの選択肢があります：
- 短くてフィットするようにテキストを書き換えます。
- テキストが境界を越えて流れるようにし、レイアウトがそれをサポートするようにフレキシブルになることを望みます。
- オーバーフローするテキストを切り取ってください。
- スペースがスクロールして余分なテキストを表示するように、スクロールバー（通常はテキストの垂直）を追加します。
最も良い選択肢は、通常、最後のオプションです：スクロールするテキストボックスを作成します。 余分なテキストは引き続き読み取ることができますが、デザインは損なわれません。
これにはHTMLとCSSがあります：
オーバーフロー：自動; divの境界がオーバーフローするのを防ぐためにスクロールバーを追加するようにブラウザに指示します。 しかし、これを機能させるには、オーバーフローする境界が存在するように、divに設定されている幅と高さのスタイルプロパティも必要です。
オーバーフローを変更することでテキストを切り取ることもできます：auto; オーバーフローする：隠れた; オーバーフロープロパティを省略すると、テキストがdivの境界線の上にこぼれることになります。
スクロールバーをテキスト以外のものに追加することができます
より小さなスペースに表示したい大きな画像がある場合、テキストと同じ方法でスクロールバーを追加することができます。
width = "400" height = "509" />
この例では、400x509イメージは300x300段落内にあります。
テーブルはスクロールバーから利益を得ることができます
長い情報テーブルは非常に読みにくいものですが、制限されたサイズのdiv内に配置し、オーバーフロープロパティを追加することで、ページ上の極端なスペースを占めない多くのデータを含むテーブルを生成することができます。
最も簡単な方法は、画像とテキストのようなものです。divをテーブルの周りに追加し、そのdivの幅と高さを設定し、overflowプロパティを追加します：
ブラウザでは、スクロールバーのクロムがテーブルと重なっていると仮定しているため、水平スクロールバーが通常表示されます。 これをテーブルの幅などを変更することから修正する方法はたくさんあります。 しかし、私が気に入っているのは、CSS 3のプロパティoverflow-xで横スクロールを単にオフにすることです。 overflow-x：hiddenを追加するだけです。 divに移動すると、水平スクロールバーが削除されます。 消えるコンテンツがあるかもしれないので、これをテストしてください。
FirefoxはオーバーフローのためのTBODYタグの使用をサポートしています
Firefoxブラウザの本当に素晴らしい機能の1つは、tbodyやtheadやtfootのような内部テーブルタグにoverflowプロパティを使用できることです。 つまり、テーブルの内容にスクロールバーを設定することができ、ヘッダーセルはそれらの上に固定されたままになります。 これはFirefoxでのみ機能しますが、これはあまりにも悪いですが、読者だけがFirefoxを使用するのは素晴らしい機能です。 Firefoxのこの例を参照して、私が何を意味するのか見てみましょう。
| Jennifer | 502-5366 ...
|