HTML応用編 擬似フレーム

tableセルの結合 | 文字の回り込み | 情報・外部リンクタグ | 
付加説明タグ | リンクの効果表現 | 擬似フレーム

擬似フレーム

スタイルシート用いて擬似フレームを作成することができます。
表示のコンパクト化が可能になります。
IFrameと違い他ページへのアクセスはありません。

【スタイルシートの記述】
overflow:scroll(auto)
 scroll:スクロールバーをつける
 auto:表示幅が超えた時にスクロールバーをつける

【サンプルコード】
<div style="overflow:scroll;height:120px;width:150px;">表示文章</div>
<div style="overflow:auto;height:120px;width:150px;">表示文章</div>

【表示】
これはscrollの表示です。
周囲にスクロールバーがついているのが分かるでしょうか?
overflowは表示のコンパクト化に役立ちます。
テスト
テスト
テスト
これはautoの表示です。
周囲にスクロールバーがついているのが分かるでしょうか?
overflowは表示のコンパクト化に役立ちます。
テスト
テスト
テスト

高さ・横幅を指定することで、それを超える表示がある時は、スクロールバーが表示されます。
基本的には、縦へのスクロールが伸びていきます。
overflow内の文章はタグが使えるので、自由な表示が可能です。


おまけ:スクロールバーの色を変える
IE5.5以降での表示ですが、スタイルシートでスクロールバーの色を指定することが出来ます。
scrollbar-base-color スクロールバーの全体の色を一括指定。
scrollbar-track-color スクロールバーの下バーの色を指定。
scrollbar-face-color スクロールバーの色を指定。
scrollbar-arrow-color 矢印(▲▼)の色を指定。
scrollbar-3dlight-color 矢印を囲む外枠の左・左上の色を指定。
scrollbar-darkshadow-color 矢印を囲む外枠の右・右下の色を指定。
scrollbar-highlight-color 矢印を囲む内枠の左・左上の色を指定。
scrollbar-shadow-color 矢印を囲む内枠の右・右下の色を指定。

inserted by FC2 system