スポンサーサイト

--/--/-- --:-- | カテゴリ:スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

html 擬似フレーム

2006/09/11 21:45 | カテゴリ:htmlタグ | コメント (0) | トラックバック (0)

ページを作成する中で、一部すっきりとした表示にしたいなどと考えることがありませんか?
そんな時はスクロールバーのついたボックスが便利です。

FC2ブログでは、共有プラグインに該当するものがありますが、タグを理解した方が自由な使い方が出来ると思います。

スタイルシート用いて擬似フレームを作成することができます。
表示のコンパクト化が可能になります。
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以降での表示ですが、スタイルシートでスクロールバーの色を指定することが出来ます。
説明は追加コンテンツで確認して下さい。

追加コンテンツ:HTML応用編 擬似フレーム
スポンサーサイト

<< SEO対策でアクセスアップ① 意味と意義 | ホーム | リンク文字の効果的表現 >>


コメント

コメントの投稿


管理者にだけ表示を許可する

 BLOG TOP 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。