ホームページビルダー作成報告

HPB作成報告 前掲示板 ツリー表示 トピック表示 検索 過去ログ

[ 最新記事及び返信フォームをトピックトップへ ]

[トピック内全13記事(1-10 表示)] 全ページ数 / [0] [1]

■17140 /inTopicNo.1)  スクロールバーをボタンで代替
    □投稿者/ 鴉 -(2004/12/31(Fri) 02:43:14)

      作成モード(v6以上の方):[通常] 
      バージョン:[v7] 

      通常、フレームページなどをスクロールさせるにはスクロールバーを使うわけですが、こちらのサイトのように(↓)
      http://www5.mediagalaxy.co.jp/p-givenchy/skincare/wash/top.html
      ほぼそれと同様の働きをボタンで代用しているケースも見かけます。
      どうやらJavaScriptを使っているようなのですが、この方法を教えていただければと思って投稿しました。
      日ごろ頼りにしているノウハウサイトを回っても、どうもそれらしい技術が見つからずに困っています。
      どうぞよろしくお願いします。


    →親記事 / 引用返信 / チェック-

■17141 /inTopicNo.2)  Re[1]: スクロールバーをボタンで代替
    □投稿者/ yamaV1.02β -(2005/01/01(Sat) 00:07:00)


      バージョン:[v6.5] 

      No17140に返信(鴉さんの記事)
      > 通常、フレームページなどをスクロールさせるにはスクロールバーを使うわけですが、こちらのサイトのように(↓)
      > http://www5.mediagalaxy.co.jp/p-givenchy/skincare/wash/top.html
      > ほぼそれと同様の働きをボタンで代用しているケースも見かけます。
      > どうやらJavaScriptを使っているようなのですが、この方法を教えていただければと思って投稿しました。
      > 日ごろ頼りにしているノウハウサイトを回っても、どうもそれらしい技術が見つからずに困っています。
      > どうぞよろしくお願いします。

      http://www2.ocn.ne.jp/~yoochan/decoration/JavaScript/sample/DHTML_samp12a.htm

      比較的似たようなサンプルかと思います。
      こちらを改造すればある程度のところまでは
      持って行けそうに思います。

      提示されたページのふわ〜と移動する
      感じはありませんね。
      移動速度と座標の計算がより複雑に出来ています。

      ビルダーの機能で書けるような代物ではありません。

      単純なスクロールではなくdivのtopの座標を
      変化させつつスタイルシートのclipプロパティで
      部分的に表示させているようです。

      ページのスクリプトをパクッてしまえば
      まんま再現できますが、
      著作権を侵害する事になるのかな…
      http://okweb.jp/kotaeru.php3?q=1125398
      よく判りませんが気がひけます。

      自分で仕組みを理解したいのであれば
      スクリプトを勉強しつつスクリプト色の強い
      板でご質問された方が有益な回答を期待できると
      思われますが、まるまる「教えてください」で
      は恐らく回答はつかないかと思います。

      意地悪をしているわけではなくて、
      「どうやらJavaScriptを使っているようなのですが」
      というレベルでは説明しても理解してもらえるとは
      思えないので、誰も説明をしようとはしないでしょう。

      JAVASCRIPTの習得はわりかし「極めて容易」とか
      一週間あれば使えるようになるとか言われたり書かれたり
      していますが、多分こういった記述は1つ以上の言語を
      習得し終えた人たちの感覚での言葉です。

      自分では書けない、けれどすぐ使いたいという場合は
      配布されているサンプルを見つけてそのまま使うか
      改造してみて使うか、どうしても納得行かなければ
      地道に勉強するかの何れかになる
      のではないかと思っています。



    引用返信 / チェック-

■17146 /inTopicNo.3)  Re[2]: スクロールバーをボタンで代替
    □投稿者/ 鴉 -(2005/01/01(Sat) 19:53:54)
    □U R L/ http://www.ismusic.ne.jp/karas1221/songs.html

      作成モード(v6以上の方):[通常] 
      バージョン:[v7] 

      レスありがとうございます。
      ご指摘の通り、教えていただいたサンプルはたしかに僕には難しすぎるようです。
      ほかのJavaScriptの小技には、「Tips」などという扱いで広く配布されているものも多いように思うのですが、これはそれらよりはずっと難しい技術ということになってしまうんでしょうか。
      いちおう、一縷の希望を託して、いま検討している使用法を以下に具体的に書いてみます。
      それを踏まえて何か新たなアドバイスなどあれば、教えていただければ幸いです。

      http://www.ismusic.ne.jp/karas1221/songs_test_scr.html
      上述のページは、僕のサイトで使っている、曲を聴いてもらうためのプレイヤーのようなからくり(?)を少しだけいじってみたものです。
      (一応、いじる前のもののアドレスもURL記入欄に書き込んでおきます。)
      このページの右寄りに、曲名を並べた縦長のテーブルがあり、上端と下端にそれぞれ▲▼というマークが出ています。
      この三角をクリックすることにより、間の曲名を並べたスペース(←テーブル内で別個に動けるように可動性は確保してありますが、スクロールバーはhiddenにしてあります)が上下動するようにできないか、ということなんですが。

      yamaさんはじめ、どなたか僕でもわかりそうなアドバイスを思いつく方がいたらぜひ。
      せめて、より使いやすいサンプルの出ているページだけでもご紹介いただければ助かります。
      一から勉強するのももちろん一法でしょうが、これだけを目的にJavasScript全般の勉強をするのはちょっと難儀なので。
      またもし、ここよりもアドバイスの集まりやすそうな掲示板をご存知の方がいらっしゃればそれもぜひ教えてください。
      よろしくお願いします。

      > > 提示されたページのふわ〜と移動する感じはありませんね。

      ああ・・・すみません。
      例示できるページがなかなか思い当たらなくてしょうがなく選んだんですが、ふわ〜と移動はしなくてもいいです。
      単純に、スクロールバーを表示せずにボタンで代替できれば充分です。


    引用返信 / チェック-

■17156 /inTopicNo.4)  Re[3]: スクロールバーをボタンで代替
    □投稿者/ yamaV1.02β -(2005/01/03(Mon) 18:23:13)


      バージョン:[v6.5] 

      > ご指摘の通り、教えていただいたサンプルはたしかに僕には難しすぎるようです。

      サンプルあるんだから何とかなるんじゃ
      、と思ってましたが、
      試してみたら訳解からなくなりました。

      > ほかのJavaScriptの小技には、「Tips」などという扱いで広く配布されているものも多いように思うのですが、これはそれらよりはずっと難しい技術ということになってしまうんでしょうか。

      少なくとも私には難解で手におえませんでした。

      <中略>

      > それを踏まえて何か新たなアドバイスなどあれば、教えていただければ幸いです。
      >
      アドバイスにもなりませんが、
      理解している範囲で作れるのは
      http://www2.tba.t-com.ne.jp/yamazaki/htm_file/a/Songs.htm
      これでいっぱいいっぱいです。
      スクリプトオフ対策は施しておりません。

      > yamaさんはじめ、どなたか僕でもわかりそうなアドバイスを思いつく方がいたらぜひ。
      > せめて、より使いやすいサンプルの出ているページだけでもご紹介いただければ助かります。
      > 一から勉強するのももちろん一法でしょうが、これだけを目的にJavasScript全般の勉強をするのはちょっと難儀なので。
      > またもし、ここよりもアドバイスの集まりやすそうな掲示板をご存知の方がいらっしゃればそれもぜひ教えてください。
      > よろしくお願いします。
      >
      スクリプト系の板はたまにROMるのですが、
      理解がついていけません…
      たぶん自分は質問するレベルにすらないのだろう
      とショゲています(ToT)

      一週間あれば充分と仰る人もいますが
      うらやましい限りです。
      行きつけの板があるわけではないので紹介できません。
      ググればいくらでも見つかりますけど。
      http://www.google.co.jp/search?q=javascript+%8Cf%8E%A6%94%C2&hl=ja&ie=Shift_JIS&lr=Shift_JIS


    引用返信 / チェック-

■17159 /inTopicNo.5)  Re[4]: スクロールバーをボタンで代替
    □投稿者/ -(2005/01/03(Mon) 23:15:00)
    □U R L/ http://www.ismusic.ne.jp/karas1221/

      作成モード(v6以上の方):[通常] 
      バージョン:[v7] 

      yamaさんどうもありがとうございます。
      まさか僕自身のファイルをいじってみてくれるとは思っていなかったので、うれしい驚きでした。
      この機会に少しは勉強してみようと思って、僕自身のsongs_test_scr.htmlと照合しながら、行単位で移植していきました。
      そこからさらに、ほんのわずかに見栄え上の小細工をして、ひとまず現状がこんな感じになりました。(↓)
      http://www.ismusic.ne.jp/karas1221/songs_test_scr2.html
      ほとんどyamaさんにやっていただいたそのままなんですけど。(笑)

      あとは泣き所としては、スクロールの動作が重い(実際の待ち時間が長いというより、印象として重いのかも・・・ジバンシーのサイトみたいな効果を付加できると、待ち時間も気にならなくなるんでしょうけど)ということと、可動領域が文字も改行も何もないところまで果てしなくスクロールできてしまう、という点でしょうか。
      でも、現状でもどうにか実用レベルまでは来ているような気がします。
      前回ご紹介いただいたサンプルページや、僕が例として挙げたジバンシーのサイトのソースとも改めて見比べてみましたが、素人目にはほとんど共通点すら見つからず、改めて難しいものなんだなあと思いました。

      いろいろ検索してみたところ、「イヌでもわかるJavaScript」という入門ページがちょっとわかりよさそうだったので、そのあたりから僕も勉強を始めてみるかもしれません。
      わかるにつれて、少しずつ改良を試みていくことにすれば、叩き台としては現状でも充分すぎるくらいかと思います。
      まあ、早手回しにほかの板でさらに質問してみるにしても、おかげさまでずっと状況説明もしやすくなりましたし。(笑)
      しかし、思いがけず期待をはるかに超えてお世話になってしまいました。
      本当にどうもありがとうございました。



      補足。
      ひょっとしたら、まだ追加で教えていただけることがあるかもしれないので(汗)、ひとまず「解決済み」チェックは保留にしておくことにしました。
      もちろん、よその掲示板で質問する際にはちゃんと解決済みにしますのでご了承ください。>皆様


    引用返信 / チェック-

■17165 /inTopicNo.6)  Re[5]: スクロールバーをボタンで代替
    □投稿者/ yamaV1.02β -(2005/01/04(Tue) 20:58:28)


      バージョン:[v6.5] 

      ジェバンシーのサイトで使用しているCLIPプロパティは
      POSITIONをABSOLUTEにしないと動作しないので
      大きさや位置が可変であるテキストに対しての設定は
      不向きかと思います。
      画像だからこそできる技かなと疑っています。

      DIVのTOPである y に定数を都度加算して
      指定しているわけですが、yを変化させつつ
      繰り返し処理させれば、ふわ〜と連続して
      動かす事も可能だと思っています。
      とりあえず、for文・while文辺りは基礎の基礎
      です。
      (創作意欲が無いわけでもないのですが
      それどころじゃないので余裕ができたら
      チャレンジしてみます)

      本当言えば単にOVERFLOW:AUTOで素直に
      スクロールバー表示させる方がユーザーには
      優しいページだと思います。
      IEをお使いでしたらインターネットオプションで
      セキュリティを「高」にしてみましょう。
      ページが利用不能になるのが実感できます。
      <noscript></noscript>の間にhtmlを
      書いておくとスクリプトオフ時の対策が出来ます。

      スクリプトは面白いと言えば面白いですが
      往々にしてページ利用の障害になりますし
      鬱陶しい側面があります。

      けれど、それはそれ。
      ぼちぼち一緒に勉強していきましょう。
      本業で追い詰めつられつつあるのでこの辺で。

      ちょっといいかなと思っているJS解説サイト↓
      http://www5a.biglobe.ne.jp/~n_rieko/javascript/index.htm

      /*犬でも…サルでも…小学生でも…虫けらでも…
      ってネーミングにちょっと疑問*/

      > 補足。
      > ひょっとしたら、まだ追加で教えていただけることがあるかもしれないので(汗)、ひとまず「解決済み」チェックは保留にしておくことにしました。
      > もちろん、よその掲示板で質問する際にはちゃんと解決済みにしますのでご了承ください。>皆様


    引用返信 / チェック-

■17168 /inTopicNo.7)  Re[6]: スクロールバーをボタンで代替
    □投稿者/ -(2005/01/05(Wed) 23:39:44)
    □U R L/ http://www.ismusic.ne.jp/karas1221/

      作成モード(v6以上の方):[通常] 
      バージョン:[v7] 

      > DIVのTOPである y に定数を都度加算して指定
      > とりあえず、for文・while文辺りは基礎の基礎

      このあたりの説明がすらすらわかるようになるころには、打開策も見つかるのかもしれないですね。
      純粋に機能的な意味ではJSにこだわる理由もなさそうなんですが、なにしろえらく見栄えに凝って作ってしまったカラクリなので、今さらあそこにスクロールバーを表示させるのが嫌で。(笑)
      なので、折をみて勉強を始める、という方針でいこうと思います。
      でも、もし万一、時間ができてお気も向いて、これぞ、っていうのができてしまったらぜひとも教えてください。

      ひとつには、スクロールの仕掛けは、なかなか「そのもの」を解説しているサイトがないようで。
      教えていただいたサイトでイチから勉強したとしても、一体どの時点でそれができるようになるのかが見えない、というのが少し辛いところです。

      > IEをお使いでしたらインターネットオプションで
      > セキュリティを「高」にしてみましょう。

      ご指摘ありがとうございます。
      ちゃんと確認しました。

      > <noscript></noscript>の間にhtmlを
      > 書いておくとスクリプトオフ時の対策が出来ます。

      これは折をみて試してみます。
      しっかり設定をやっておけば、セキュリティ「高」にするととたんにスクロールバーが出る、という仕組みですよね、たぶん。

      > > ちょっといいかなと思っているJS解説サイト↓
      > http://www5a.biglobe.ne.jp/~n_rieko/javascript/index.htm

      イヌでも〜は、実例主義でとっつきやすそうかと思ったんですが、yamaさんは文法的な切り口から徐々に進めたほうがいいというお考えなんですね。
      たしかに、文法から入るサイトとしては僕が検索で見つけたほかのサイトよりよさそうです。
      まずはそれでやってみて、実例が見えなくて五里霧中になるようならイヌで試してみようと思います。
      問題の「イヌでも〜」は、カタカナであるというところに冗談半分の愛情を感じて、僕はそこまでは気になりませんでした。(笑)

      重ね重ねどうもありがとうございました。
      また機会があればよろしくお願いします。



      > >>補足。
      >>ひょっとしたら、まだ追加で教えていただけることがあるかもしれないので(汗)、ひとまず「解決済み」チェックは保留にしておくことにしました。
      >>もちろん、よその掲示板で質問する際にはちゃんと解決済みにしますのでご了承ください。>皆様


    引用返信 / チェック-

■17173 /inTopicNo.8)  noscriptの使い方一案
    □投稿者/ yamaV1.02β -(2005/01/06(Thu) 22:31:55)


      バージョン:[v6.5] 

      >><noscript></noscript>の間にhtmlを
      >>書いておくとスクリプトオフ時の対策が出来ます。
      >
      > これは折をみて試してみます。
      > しっかり設定をやっておけば、セキュリティ「高」にするととたんにスクロールバーが出る、という仕組みですよね、たぶん。
      >
      そういう風にも作れます、という程度のものです。
      良し悪しはわかりませんがスクリプトON時OFF時
      で表示を切り替える方法を考えてみました。
      IEとNNのみ動作確認しています。

      noscriptの実用的な例と言うものは探したことも
      無いのですが知らないです。
      <NOSCRIPT>
      このページはスクリプト対応のブラウザでご覧下さい
      </NOSCRIPT>
      みたいなサンプルしか記憶にない…
      。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
      <html lang="ja">
      <head>
      <title>test</title>
      <style type="text/css">
      <!--
      /*スクリプトONで表示される個所は
      スタイルシートで見えなくしておく*/
      #Novisi{
      display:none;
      /*visibility:hidden;←見えなくなるだけでレイアウトに影響は残る*/
      }
      -->
      </style>
      <script type="text/JavaScript">
      <!--
      /*スクリプトONの時スクリプトの
      力で強引に表示*/
      window.onload=function(){VISI()};
      function VISI(){
      if(!document.getElementById)return;
      document.getElementById('Novisi').style.visibility = 'visible';
      }
      //-->
      </script>
      </head>
      <body>

      <noscript>
      <!--スクリプトOFFの時はここが表示-->
      <p>
      スクリプトOFFです
      <br>
      スクリプト無しで動作するhtmlをここに書く。
      </p>
      </noscript>

      <div id =" Novisi">
      <!--スクリプトON時CSSの指定を跳ね除けて表示される-->
      <p>
      スクリプトONです
      <br>
      スクリプトOFFでは動かないhtmlをここに書く。
      </p>
      </div>

      </body>
      </html>。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
      >>>>補足。
      > >>ひょっとしたら、まだ追加で教えていただけることがあるかもしれないので(汗)、ひとまず「解決済み」チェックは保留にしておくことにしました。
      > >>もちろん、よその掲示板で質問する際にはちゃんと解決済みにしますのでご了承ください。>皆様


    引用返信 / チェック-

■17198 /inTopicNo.9)  Re[8]: noscriptの使い方一案
    □投稿者/ -(2005/01/10(Mon) 01:03:53)
    □U R L/ http://www.ismusic.ne.jp/karas1221/

      作成モード(v6以上の方):[通常] 
      バージョン:[v7] 

      またもご丁寧な返信、どうもありがとうございます。
      すごく助かっています。
      いきなりものすごく細かいことで恐縮なんですが、のちのち検索して見る方のために書くと、ここ(↓)
      <div id =" Novisi">
      半角スペースが入ってしまってますけど、試行錯誤してみたところでは、どうやら不要ってことでいいんですよね?
      念のため。(笑)

      教えていただいた技術を精一杯活用してみたところ、下のようになりました。
      http://www.ismusic.ne.jp/karas1221/songs_test_scr1.html
      目論見としては、JS有効なら従来通りにプレーヤーのからくりが機能し、JS無効のブラウザならMP3ファイルを直接呼び出すことにより、外部プレーヤーが開くようにしたいわけですが。
      現時点での問題は明らかで、JS無効で見た場合、Novisiの領域が空欄となって残ってしまって、noscriptの曲名リストがずっと下の方に押し下げられてしまうんですよね。
      自分でもいろいろ調べてみて、visibility="collapse"とか目に付いた技術を多少パクりつつ試行錯誤してみたんですが、思うようにはなりませんでした。
      これを克服するすべはないものでしょうか?

      もしおわかりでしたら、また折を見て教えていただけたらうれしいです。
      よろしくお願いします。


      >>>>補足。
      > >>ひょっとしたら、まだ追加で教えていただけることがあるかもしれないので(汗)、ひとまず「解決済み」チェックは保留にしておくことにしました。
      > >>もちろん、よその掲示板で質問する際にはちゃんと解決済みにしますのでご了承ください。>皆様


    引用返信 / チェック-

■17200 /inTopicNo.10)  Re[9]: noscriptの使い方一案
    □投稿者/ yamaV1.02β -(2005/01/10(Mon) 15:18:18)


      バージョン:[v6.5] 

      > <div id =" Novisi">
      > 半角スペースが入ってしまってますけど、試行錯誤してみたところでは、どうやら不要ってことでいいんですよね?

      はいまちがえました。
      >
      > 教えていただいた技術を精一杯活用してみたところ、下のようになりました。
      > http://www.ismusic.ne.jp/karas1221/songs_test_scr1.html
      > 目論見としては、JS有効なら従来通りにプレーヤーのからくりが機能し、JS無効のブラウザならMP3ファイルを直接呼び出すことにより、外部プレーヤーが開くようにしたいわけですが。
      > 現時点での問題は明らかで、JS無効で見た場合、Novisiの領域が空欄となって残ってしまって、noscriptの曲名リストがずっと下の方に押し下げられてしまうんですよね。
      > 自分でもいろいろ調べてみて、visibility="collapse"とか目に付いた技術を多少パクりつつ試行錯誤してみたんですが、思うようにはなりませんでした。
      > これを克服するすべはないものでしょうか?
      >
      collapseは

      thead、tfoot、tbody、colgroup、col要素などに指定すると表の空間が詰められて表示されます。他の要素に指定するとhiddenと同じになります。
      http://www.eris.ais.ne.jp/~haza/css/visual#visibility

      だそうです。ので、displayプロパティに変更してみました。
      あと、クリックの回数制限をつけてみました。

      http://www2.tba.t-com.ne.jp/yamazaki/htm_file/a/Songs.htm

      for文・while文は処理が終了するまで
      画面描写を更新しないようです。
      連続して動かすためには新しい知識を仕入れないと
      無理っぽいです。。。

      >
      > >>>>補足。
      >>>>ひょっとしたら、まだ追加で教えていただけることがあるかもしれないので(汗)、ひとまず「解決済み」チェックは保留にしておくことにしました。
      >>>>もちろん、よその掲示板で質問する際にはちゃんと解決済みにしますのでご了承ください。>皆様


    引用返信 / チェック-


次のトピック内容10件>

このトピック内容の全ページ数 / [0] [1]

解決済み! / 返信不可

HPB作成報告 前掲示板 ツリー表示 トピック表示 検索 過去ログ

- Child Tree -