HTMLでテキストとスクロールバーを表示する方法

2024-02-09 22:58 HTML スクロールバー テキスト表示 
<textarea style="width: 300px; height: 200px; overflow: auto;">
ここにテキストを入力します。
</textarea>

上記の例では、テキストエリアの幅は300ピクセル、高さは200ピクセルと指定されています。overflow: auto;スタイルプロパティは、テキストが指定された領域を超えた場合にスクロールバーを表示するようにします。

<div style="width: 300px; height: 200px; overflow: auto;">
ここにテキストを入力します。
</div>
  1. CSSのみを使用する方法: CSSを使用して、既存の要素にスクロールバーを追加することもできます。以下は例です。

HTML:

<div class="scrollable-text">
ここにテキストを入力します。
</div>

CSS:

.scrollable-text {
  width: 300px;
  height: 200px;
  overflow: auto;
}

上記の例では、\

要素にscrollable-textというクラスを付け、CSSでそのクラスに対して幅と高さ、overflow: auto;を指定しています。

これらはHTMLでテキストとスクロールバーを表示する一部の方法です。必要に応じて、上記のコードをカスタマイズして使用してください。