人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

インラインフレーム(のようなもの?)を探しています。
ホームページを見ていて、ときどき散見するのですが、インラインフレームのような
限定された領域に更新履歴などのコンテンツをスクロールさせて見るもので、
通常のインラインフレームと違うのはスクロールのための矢印がかっこよくて非常に
小さいものだった気がするのです。インラインフレームを単にCSSでデザインを制御
させているだけだったのか分かりませんが、フレーム枠のようなものはなく、
シームレスに背景に溶け込んでスクロールのための矢印が二つだけが配置されている
ようなシンプルなデザインだったと思います。
今ざっと探しても見つかりません。
多分Flashではなかった気がするのですが、CSSでそのようなことを実現できる方法は
ありますでしょうか。

●質問者: kurokumi
●カテゴリ:ウェブ制作
✍キーワード:CSS Flash いもの けが インラインフレーム
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● fzs1000
●40ポイント

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>

◎質問者からの返答

わざわざお作りいただきましてありがとうございます。早速ためしたところ、かつて見たような

動作に似ています。矢印を画像に変えればうまくいきそうです。


2 ● NAGOMIN
●40ポイント

http://www.tohoho-web.com/css/reference.htm#scrollbar-base-color

とほほのスタイルシート入門

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

とほほのスタイルシート入門

◎質問者からの返答

なるほど、インラインフレームを使わなくても簡単に作れるんですね。

使ってみたいと思います。

皆さん、ありがとうございました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ