HTMLタグのオーバーフロー処理は
CSSでスクロールバーを変更する
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 スクロールバーの影の色
上記7つのプロパティで設定される値は、すべて色値であり、スタイルシートで定義された様々な表現で使用することができる。
スタイルプロパティの第1グループは、セットオブジェクトにスクロールバーを表示するかどうかを設定するために使用し、スタイルプロパティの第2グループは、スクロールバーの色を設定するために使用しますので、この記事に関わるスタイルプロパティはieのみ、スタイルプロパティの第2グループは、ie5.5版のみ対応していることに注意してください。というわけで、デバッグの際にはご注意ください。
上記のスタイル属性について、いくつかの例を挙げて説明しましょう。
1. ブラウザウィンドウにスクロールバーを表示しないようにする
水平スクロールバーがない
<body style= "overflow-x:hidden ">
縦スクロールバーがない
<body style= "overflow-y:hidden ">
スクロールバーなし
<body style= "overflow-x:hidden;overflow-y:hidden "> または <body style= "overflow:hidden ">
2. 複数行のテキストボックスのスクロールバーを設定する
水平スクロールバーなし
縦スクロールバーなし
スクロールバーなし
または
3. ウィンドウスクロールバーの色を設定する
ウィンドウのスクロールバーの色を赤に設定する <body style= "scrollbar-base-color:red ">
scrollbar-base-color は基本色を設定します。一般に、スクロールバーの色を変更する目的で設定する必要があるのは、このプロパティだけです。
ちょっとした特殊効果を加える
4. 他の要素を設定する場合も、基本的には同じです。スタイルシート・ファイルに良いクラスを定義して、再利用できるようにした方がよいでしょう。
.coolscrollbar
{
scrollbar-arrow-color:yellow;
scrollbar-base-color:lightsalmon;
}
上記の記述をスタイルシートファイルまたはhtmlヘッダー内の<style> </style>に追加し
<textarea class= "coolscrollbar "> </textarea>
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン