HTML スクロール ボックス
CSS と HTML を使用してテキストをスクロールするボックスを作成する
アン HTML スクロール ボックスは、ボックスの内容がボックスの寸法よりも大きい場合に、右側と下部にスクロール バーを追加するボックスです。つまり、ボックスに約 50 語を収めることができ、200 語のテキストがある場合、HTML スクロール ボックスを使用するとスクロール バーが表示され、追加の 150 語が表示されます。標準の HTML では、余分なテキストをボックスの外に押し出すだけです。
HTML スクロールの作成はかなり簡単です。幅を設定するだけで済みます 身長 スクロールしたい要素の CSS オーバーフロー プロパティを使用して、スクロールの発生方法を設定します。
ハムザ・タルコル/ゲッティイメージズ
余分なテキストをどうするか?
レイアウトのスペースに収まりきらないほど多くのテキストがある場合、いくつかのオプションがあります。
- テキストを短くして収まるように書き直します。
- テキストが境界を越えて流れることを許可し、レイアウトがそれをサポートするために柔軟に対応できることを願っています。
- はみ出した箇所のテキストを切り取ります。
- スクロール バー (通常はテキストに対して垂直) を追加して、余分なテキストが表示されるようにスペースをスクロールします。
最適なオプションは通常、最後のオプションです。スクロールするテキスト ボックスを作成します。その後、余分なテキストは引き続き読み取ることができますが、デザインが損なわれることはありません。
このための HTML と CSS は次のようになります。
|_+_| |_+_| |_+_|の オーバーフロー: 自動; テキストがdivの境界からはみ出さないようにするために必要な場合は、スクロールバーを追加するようブラウザに指示します。ただし、これを機能させるには、div に幅と高さのスタイル プロパティを設定して、境界がオーバーフローするようにする必要もあります。
また、overflow: auto; を変更してテキストを切り取ることもできます。に オーバーフロー: 非表示; オーバーフロー プロパティを省略した場合、テキストは div の境界を越えてはみ出します。
テキスト以外にもスクロールバーを追加できます
小さなスペースに表示したい大きな画像がある場合は、テキストの場合と同じようにスクロール バーを画像の周りに追加できます。
|_+_| |_+_|
この例では、400x509 の画像が 300x300 の段落内にあります。
テーブルはスクロール バーの恩恵を受けることができます
情報の長い表はすぐに読み取るのが非常に困難になる可能性がありますが、サイズが制限された div 内にそれらを配置し、オーバーフロー プロパティを追加することで、ページの極端なスペースを占有しない大量のデータを含む表を生成できます。
最も簡単な方法は、画像やテキストと同じように、テーブルの周りに div を追加し、その div の幅と高さを設定し、overflow プロパティを追加するだけです:
|_+_| |_+_|これを行うと、通常は水平スクロール バーが表示されます。これは、ブラウザーがスクロール バーのクロムがテーブルに重なっていると想定するためです。テーブルの幅を変更するなど、これを修正する方法はたくさんあります。しかし、私たちのお気に入りは、CSS 3 プロパティで水平スクロールをオフにすることです。 オーバーフロー-X
追加するだけ オーバーフロー-x: 非表示; divに追加すると、水平スクロールバーが削除されます。消えるコンテンツがあるかもしれないので、必ずこれをテストしてください。
|_+_|Firefox がオーバーフロー用の TBODY タグの使用をサポート
Firefox ブラウザーの非常に優れた機能の 1 つは、tbody や thead、tfoot などの内部テーブル タグでオーバーフロー プロパティを使用できることです。これは、テーブルのコンテンツにスクロール バーを設定でき、ヘッダー セルがその上に固定されたままになることを意味します。これは Firefox でしか機能しないため、残念ですが、読者が Firefox しか使用していない場合は便利な機能です。 Firefox でこの例を参照して、私の言いたいことを確認してください。
|_+_| |_+_||_+_|