- ベストアンサー
CSSでの擬似インラインフレームとは？
- CSSでの擬似インラインフレームを使用して、サイトを作成する方法について説明します。
- 特定のサイズのページ全体枠を作成し、ナビゲーションとコンテンツを配置する方法について解説します。
- JavaScriptを使用してスムーズなスクロール効果を実現する方法について詳しく説明します。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (3)
- yyr446
- ベストアンサー率65% (870/1330)
＜＜右側のコンテンツ部分は400px×500pxのみ表示して 残りの部分はoverflow:hiddenを指定して表示しないようにしました。 左側のナビゲーションは位置を固定にし、ボタンをクリックすると 右側のコンテンツ枠に各項目の内容が入れ替わり表示するように しました。＞＞ とありますね。もしかして大きく勘違いしているのでは？ 「tyny-scrolling」も「Smooth Scrolling」基本的には、 ターゲットのwindow上の座標を取得して、その位置までwindow.scrollTo(x, y) のメソッドで画面をスクロールさせるという機能ですよ。 「tyny-scrolling」の方はY座標しか計算しないし、windows.onload の時座標取得するだけで、「Smooth Scrolling」の方は イベントドリブンでターゲットのXY座標の取得とスクロールをします。 ボタンをクリックすると右側のコンテンツ枠に各項目の内容が入れ替わ る機能を作られたんですよね。それじゃ何をクリックしてスクロール させようとしているのですか。そのボタンに入れ替えとスクロールの 両方の機能をもたせるのですか？それとも表示されたコンテンツ部分 のリンクをクリックした時、表示されて無い部分にまでスクロール させたいという事なのでしょうか？何か両方とも簡単には出来なそうな気がします。
補足
yyr446さま 早速すみません。。。 ＜＜右側のコンテンツ部分は400px×500pxのみ表示して 残りの部分はoverflow:hiddenを指定して表示しないようにしました。 左側のナビゲーションは位置を固定にし、ボタンをクリックすると 右側のコンテンツ枠に各項目の内容が入れ替わり表示するように しました。＞＞ <<<とありますね。もしかして大きく勘違いしているのでは？ 「tyny-scrolling」も「Smooth Scrolling」基本的には、 ターゲットのwindow上の座標を取得して、その位置までwindow.scrollTo(x, y) のメソッドで画面をスクロールさせるという機能ですよ。>>> すみません。。。勘違いしております。 aというポイントを指定して、そこへのアンカーリンクのようなイメージでした。そういうものではないのですね。。 左側のボタンは何も変わらずに 右側のコンテンツ部分がするする入れ替わったらなぁという 希望をもって取り組んでいたんです。。。 すみません。。 こんなサイトを見て作ってみたい！と思ったのですが http://uncover.jp/（これがめちゃくちゃ理想なんですけど、ソースを拝見してもさっぱりで。。。） http://digital-sculpture.org/contents/forum.cgi?navimode=frview&pno=7&start=13のサイトにも同じような形があるのですが こちらもわからなくて。。 無知すぎてすみません
- yyr446
- ベストアンサー率65% (870/1330)
後は、実物のコードを見てみないと何ともわからないですね。
補足
YYR446さま ご回答本当にありがとうございます。 実際にレイアウトしてみました。 下記URLをご覧頂けますでしょうか。 http://guidedbyvoices.web.fc2.com/ 自分ではさっぱりで困り果てています。。。 よろしくお願いいたします。
- yyr446
- ベストアンサー率65% (870/1330)
どうしても「tyny-scrolling」にこだわらないなら、 こっちの方「Smooth Scrolling」 http://www.kryogenix.org/code/browser/smoothscroll/ のsmoothscroll.jsの方が確実。 「tyny-scrolling」は今ひとつで、問題ありげな...（私の感想）
補足
yyr446さま こんにちは。 早速ご回答いただき本当にありがとうございます！！ お教えいただいたsmoothscrollをダウンロードさせていただいて 設置してみたのですが。。。。 やはり動いてくれません。。。
お礼
yyr446さま お返事が大変遅くなり本当に申し訳ありません。 yyr446さまのご意見、参考サイトを参照させて頂き なんとか無事制作することができました。 教えて頂いたサイトや、関連キーワードで調べると大変勉強になり 今後に役立てることが出来そうです。 正直jQueryのanimate()については、なかなか難しく理解するのには まだまだ時間がかかりそうですが、頑張ってみたく思います。 この度はお世話になり誠にありがとうございました。 失礼いたします。
補足
yyr446さま こんにちは。 早速お返事いただいて本当にありがとうございます。 そしてさすがです。 私ではさっぱりの内容に解説ページまでご紹介いただき 本当にありがとうございます！ やはり説明に問題がありました。 スミマセン。。。 思っていることを人に伝えるのは難しいですね。。。 次に活かしたいと思います。 Mootoolsというライブラリーを調べて一度チャレンジしてみます！！！