検索サーチエンジンと動画リンク集byねっとねこ

タグとスタイルシートで、スクロールできるテキスト枠を作る

スクロールバー付きのテキストの枠を作って表示させるタグとスタイルシート

ここで使用するスタイルシートは、WINDOWSの IE 6.0 7.0 にて
表示確認をしています。古いバージョンの IE や MAC専用の
ブラウザでの表示確認は しておりませんので、正しく表示され
るか?おかしな表示になるか?は ご自身で確認してください!

スクロールのできるテキスト枠を作るスタイルシート

スクロールのできるテキスト枠と言うのは、勝手につけた言葉です。
ページの好きな部分に、スクロールバー付きの枠を作ります。
サンプルは、このページの右のメニューリンクがそうです。

これは、狭くて サイズの指定した場所に サイズ以上のテキストなど
を入れたい時に使うと便利です。 スタイルシートでできます。

こんなかんじです。スクロールの枠は
任意の大きさで指定できます。


枠内では、フォントタグやリンク
イメージなど、ほとんどのタグが
使えますよ。


使い方によっては、便利です。
いろんなアイデアを使いましょう

この上のスクロール枠のタグとスタイルシートです。
エリア内で 右クリック→ コピー

style= スタイルシートは いろんなタグに使えますが
ここでは、<div> タグに使っています。
説明するため、あえて 多くの style を使っています。

width:250; height:100; は スクロール枠の横幅と縦幅の数値です。

font-size:10pt; color:#222222; は フォントサイズと色です。
枠内でフォントタグを使うとその色が反映されます。

background-color:#ffeeee; は 枠内のバックカラーです。
この部分を削除すると、HPのバックが反映されます。

text-align:left; は 右寄せです。center right と指定 OK。
削除しても 右寄せは 変わりません。

padding:10,5,5,15; は 枠内のマージンを指定しています。
左から top 10 right 5 bottom 5 left 15 としてます。
枠内のマージン(余白)を指定しないと、窮屈になります。

overflow-x:hidden; は 横のスクロールは しないという指定です。
overflow-y:scroll; は 縦は スクロールするという指定です。

scrollbar-base-color:#ffeeee; は スクロールバーの色指定です。
細かく指定するのは、面倒なので これだけにしてます。

line-height:130%; は 行間隔の指定です。ノーマルは 100%です。
ノーマルだと窮屈なので、130%にしてます。

ここに入れた、style は、個別でも いろんな用途に使えますので
できるだけ、これは 何の指定なのか? 覚えるようにしましょう
そうすれば、いずれ いろんな スタイルシートが使いこなせます。

おしまい。。。








Copyright © 2008 - 2009 ねっとねこ Net-NekoProduction. All Rights Reserved.アクセスランキング