BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

htmlスクロールバー・テキストエリアのプロパティ設定

2022-01-27 04:43:34
1. オーバーフローコンテンツがオーバーフローした場合の設定（設定されたオブジェクトがスクロールバーを表示するかどうかを設定する）
overflow-x 水平方向のコンテンツのオーバーフローに関する設定
overflow-y 垂直方向のコンテンツのオーバーフローに関する設定
上記3つのプロパティには、visible（デフォルト）、scroll、hidden、autoの値が設定されています。
2. scrollbar-3d-light-color ステレオスクロールバーの明るい縁の色（スクロールバーの色を設定する）。
scrollbar-arrow-color 上下ボタンにある三角矢印の色
scrollbar-base-color スクロールバーのベース色
scrollbar-dark-shadow-color 立体スクロールバーの強い影の色
scrollbar-face-colorスクロールバーの盛り上がり部分の色
scrollbar-highlight-color スクロールバーの空白部分の色
scrollbar-shadow-color スクロールバーの影の色
上記のスタイル・プロパティを、いくつかの例で見ていきましょう。
1. ブラウザウィンドウにスクロールバーを表示しないようにする
水平スクロールバーがない
コピーコード
コードは以下の通りです。

<body style="overflow-x:hidden">

縦スクロールバーなし
コピーコード
コードは以下の通りです。

<body style="overflow-y:hidden">

スクロールバーなし
コピーコード
コードは以下の通りです。

<body style="overflow-x:hidden;overflow-y:hidden"> or <body style="overflow:hidden">

2. 複数行のテキストボックスにスクロールバーを設定する
水平スクロールバーがない
コピーコード
コードは以下の通りです。

<textarea style="overflow-x:hidden">< /textarea>

縦スクロールバーなし
コピーコード
コードは以下の通りです。

< textarea style="overflow-y:hidden">< /textarea>

スクロールバーなし
コピーコード
コードは以下の通りです。

<textarea style="overflow-x:hidden;overflow-y:hidden">< /textarea>
or < textarea style="overflow:hidden">< /textarea>

3. ウィンドウスクロールバーの色を設定する
ウィンドウスクロールバーの色を赤に設定します<body style="scrollbar-base-color:red">
scrollbar-base-color は基本色を設定します。一般に、スクロールバーの色を変更する目的で設定する必要があるのは、このプロパティだけです。
ちょっとした特殊効果を加える
コピーコード
コードは以下の通りです。

<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">

4. スタイルシートファイル内にスタイルシートを呼び出すクラスを定義する
コピーコード
コードは以下の通りです。

<style>
.coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}
</style>

このように呼び出されます。
コピーコード
コードは以下の通りです。

<textarea class="coolscrollbar">< /textarea>

テキストエリアの色と枠線の設定。
コピーコード
コードは以下の通りです。

<textarea style="border:red solid;border-width:1 1 1 1;color:#CCCCCC;">< /textarea>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します