ホームページを見ていて、ときどき散見するのですが、インラインフレームのような
限定された領域に更新履歴などのコンテンツをスクロールさせて見るもので、
通常のインラインフレームと違うのはスクロールのための矢印がかっこよくて非常に
小さいものだった気がするのです。インラインフレームを単にCSSでデザインを制御
させているだけだったのか分かりませんが、フレーム枠のようなものはなく、
シームレスに背景に溶け込んでスクロールのための矢印が二つだけが配置されている
ようなシンプルなデザインだったと思います。
今ざっと探しても見つかりません。
多分Flashではなかった気がするのですが、CSSでそのようなことを実現できる方法は
ありますでしょうか。
No.1
63
0
40pt
CSSではできませんが、JavaScriptなら可能です。簡単なものを作ってみました。
●test1.htm
<html>
<head>
<script language=”javascript”>
function up(){
fm1.window.scrollBy(0, 5);
}
function down(){
fm1.window.scrollBy(0, -5);
}
</script>
</head>
<body bgcolor=”#eeeeee”>
<table>
<tr><td width=”300” height=”60”>
<iframe name=”fm1” src=”test2.htm” height=”60” width=”300” frameborder=”0” scrolling=”no”></iframe>
</td>
<td width=”20”>
<span onmousedown=”up();”>↑</span><br><br><br><br><span onmousedown=”down();”>↓</span>
</td></tr>
</body>
</html>
●test2.htm
<html>
<body>
2006/1/1更新<br>
2006/1/2更新<br>
2006/1/3更新<br>
2006/1/4更新<br>
2006/1/5更新<br>
2006/1/6更新<br>
</body>
</html>
No.2
10
40pt
scrollbar-base-color, scrollbar-track-color, scrollbar-face-color, scrollbar-shadow-color, scrollbar-darkshadow-color, scrollbar-highlight-color, scrollbar-3dlight-colorを背景色と同じ色にして、scrollbar-arrow-colorにスクロールの矢印の色を指定しているのだと思います。
”インラインフレームのようなもの”はwidthとheightを指定してoverflowをscrollにしているのでしょう。
http://www.tohoho-web.com/css/reference.htm#overflow
とほほのスタイルシート入門
なるほど、インラインフレームを使わなくても簡単に作れるんですね。
使ってみたいと思います。
皆さん、ありがとうございました。
54
53
1
1
1
わざわざお作りいただきましてありがとうございます。早速ためしたところ、かつて見たような
動作に似ています。矢印を画像に変えればうまくいきそうです。