かぎしっぽにゃんこの備忘録

社内のパソコン管理+雑用一切を無理無理押し付けられて、途方にくれている男の記録。 販売用中古パソコンの整備もしろって(ー_ー#) だれか他にできるやつはいないのか。

 
HOMEメモCSSによる縦スクロールバー付きテキストボックス
◆2015.06.18(木)◆
メモ│posted at 20:44:26
スレッド:プログラミング  ジャンル:コンピュータ
Webサイトの更新履歴や、ちょっとしたメニュー等を書くのに便利なボックスです。

フォームによるテキストボックスとは異なり、ボックス内にHTMLを記述できるのが特徴です。
マウスの「右クリック-全て選択を行うと」ページ全体が選択されてしまう不都合があります。
scrollbarによる色や形の指定はIE専用です。
Firefoxなどではブラウザ標準のバーが出ますので不要な場合は省いてもよい。
この辺りの問題はIEの独自仕様に由来するものでいまだに解決されていません。

似たようなものとしてはiframe使う方法もありますが、SEO的に不利なので使わない方が良い。
ボックス内の内容が検索に引っかかりません。

今回のDIVとCSSの組み合わせによるものは、ボックス内の内容も検索に引っかかるのでSEO的に有利です。

<!-- div style="overflow:hidden; width:300px; height:200px; overflow:auto; 横幅固定はコチラ -->
<div style="height:200px; overflow:auto;
border:1px solid #8490C0; background-color:#FFFFFF; color:#000000; padding:1px;
scrollbar-track-color:#F5F5DC;
scrollbar-face-color:#8490C0;
scrollbar-shadow-color:#FFFFFF;
scrollbar-darkshadow-color:#000000;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#8490C0;
scrollbar-arrow-color:#8490C0;">
●→ここから~<br>
スタイルシートを応用した縦スクロールバー付きテキストボックスです。<br>
フォームによるテキストボックスとは異なり、ボックス内にHTMLを記述できます。<br>
テキストがボックスの縦サイズをオーバーするとスクロールバーが現れます。<br>
基本的にIE5.5以降専用です。(IE8は未確認)<br>
scrollbarはIE専用です。<br>
また、半角英数字だけを入れるとボックス内で折り返さないというバグがあります。<br>
NEとFireFoxは意図しない横スクロールバーが現れる場合があります。<br>
これは仕様です。<br>
<br>
・色指定の解説<br>
div style="height:200px; overflow:auto; ボックスの高さ<br>
border:1px solid #8490C0; 枠の太さと色<br>
background-color:#FFFFFF; 背景色<br>
color:#000000;文字色<br>
padding:2px;<br>
scrollbar-track-color:#F5F5DC; バーの背景<br>
scrollbar-face-color:#8490C0; バーの色<br>
scrollbar-shadow-color:#FFFFFF; バーの右と下(内側)<br>
scrollbar-darkshadow-color:#000000; バーの右と下(外側)<br>
scrollbar-highlight-color:#FFFFFF; バーの上と左(内側)<br>
scrollbar-3dlight-color:#8490C0; バーの上と左(外側)<br>
scrollbar-arrow-color:#8490C0; ▲▼の色<br>
<br>
~ここまでテキストを置く←●<br>
</div>

スポンサーサイト

コメントを書く

* コメントを編集・削除する場合には、暗証番号の入力が必要です。
* 「秘密」にチェックを入れると管理者のみその内容を読めますが、編集・削除はできません。
* 質問にはURLを記入お願いします(なるべく症状の分かるもの)。
:
:
:
:
:
:  削除や編集のときに必要です。
:  管理者にだけが読むことができるようにします。

コメント♪

トラックバックURL・リンクURL

* TB用のURLとテキストリンク用のタグです。必要に応じてお使いください。
* ブログの環境設定によりTBは一旦承認してからの表示になります。
* 関連性が低いものなどは、管理人の判断で公開を控える場合があります。

トラックバックURL

リンクタグ

トラックバック♪

プロフィール

kagishipponyanko

Author:kagishipponyanko
社内の雑用一切を無理無理やらされている器用貧乏なやつです。

上の写真は家の猫です。
こいつは
「金目の黒猫、かぎしっぽ、エンジェルマーク」
幸運の条件が三つも揃っている運がいいやつです。
ブログタイトルの由来でもあります。

最新トラックバック

グーバーウォーキング

黒ねこ時計くろック

Windows XP 延長サポート

マイクロソフト プロダクト サポート ライフサイクル

Windows Vista 延長サポート

マイクロソフト プロダクト サポート ライフサイクル

Windows 7 延長サポート

マイクロソフト プロダクト サポート ライフサイクル

よく使うツール

高機能HTML/XHTML/スタイルシート対応エディタ(Web Frontier)
Created by ez-HTML

高機能HTML/XHTML/スタイルシート対応エディタ(Web Frontier)

よく使うツール(解説は無し)
ビットレート計算機

ブロとも申請フォーム

QRコード

QRコード

検索フォーム

FC2カウンター

 copyright © 2005-2006 かぎしっぽにゃんこの備忘録 All Rights Reserved.
 Template Desain by bluenight.