このページではスクロールを作ってみましょう。
スタイルシートを利用することで擬似インラインフレームが作れます。
サンプルは以下のようになります。
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
や ゆ よ
らりるれろ
わ を ん
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
や ゆ よ
らりるれろ
わ を ん
↓<head>〜</head>又は外部CSSに↓
↓<body>〜</body>に↓
↓HTMLタグに直接付加する場合は(インライン)↓
◎スタイルシートのポイント◎
(サンプルスタイルシートと照らし合わせながら変更して下さい)
- font-size:数字px;[文字の大きさ(数字の大小)]
- color:カラー;[文字の色(カラーコード参照)]
- border:数字px 形式 カラー;
[数字px(枠の太さ)]
[枠の形式none(枠なし) - solid(実線) - double(二重線) - dotted(点線) - dashed(破線) - groove(へこみ線) - ridge(立体線)]
[枠の色(カラーコード参照)] - margin-top:数字px;[リスト外上側の間隔]
- margin-bottom:数字px;[リスト外下側の間隔]
- background-color:カラー;[背景の色(カラーコード参照)]
- text-align:位置;[枠内文字の位置center(中央) - left(左側) - right(右側)]
- width:数字;[枠の横幅]
- height:数字;[枠の縦幅]
- overflow:auto;[枠の縦幅の範囲をこえるとスクロール]
- スクロールバーのカラー設定については姉妹サイトの説明をご覧下さい
●スクロールバーの各部配色 ●装飾スクロールバー集
もうお気づきかもしれませんがこのホームページにも使用しています♪
