- 締切済み
《初心者》HTMLテーブル/フレームについて
現在HPを作成中です。下記内容のページを 作成したいのですが、方法をご教授下さい。 希望《テーブル処理》 テーブルにて領域を3つに分けます。 [A][B][C]それぞれの役割は下記の通りです。 [A]：[C]領域の表示指定メニュー [B]：ランダムサイト表示 ランダムにページorサイトを表示します。 [C]：[A]のメニューによって選択されたページor サイトを[C]領域に表示 《例》 [A]：YAHOO/Goo/infoseekのリンクを作成 [B]：YAHOO/Goo/infoseekをランダムに表示 [C]：初期はGooを表示その後、[A]の指定の サイトを表示 【現在理解しているところ】 (1)フレームで指定サイトを開く (2)テーブルでサイトを開く。 （指定で開けない。開いたらそのまま。） 出来ればテーブルで作りたいです。 また、現在ランダムにサイトを表示させることが できません。何か方法がございましたらご教授 下さい。 （もし、フレームでしか方法が無い場合、 スクロールバーを消す手段もご教授頂き たいです。）
- najima-jun
- お礼率82% (19/23)
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- cyokokichi
- ベストアンサー率21% (32/152)
こんなのはいかがですか？ 動作も確認しておりません。 あまり小難しい能書きは解りませんが、質問の内容を手っ取り早く書いて見ました。 特にテーブルを使う必要はないと思いますが、一応使っておきました。 テーブルのセル内にHPを直接表示する術は私は持ち合わせておりませんのでフレームを使いました。 一応ランダムにテーブル内のフレームにホームページが表示され、リンクをクリックするとフレーム内にページが表示される予定です。 IE6対応予定 <html> <body> <head> <title>ランダム表示？</title> <script type="text/javascript"> <!-- link=new Array() link[0]=new Array("goo.html","グー"); link[1]=new Array("yahoo.html","ヤフー"); link[2]=new Array("google.html","グーグル"); linkTimer = setTimeout("r()",5000); function r(){ clearTimeout(linkTimer); linkNo = Math.floor(Math.random() * 3); document.getElementById("hpr").setAttribute('src',link[linkNo][0]); linkTimer = setTimeout("r()",5000); } function w(n){ document.getElementById("hp").setAttribute('src',link[n][0]); } //--> </script> <body> <table> <tr><td rowspan="2"> <a href="javascript:w(0)">グー</a><br> <a href="javascript:w(1)">yahoo</a><br> <a href="javascript:w(2)">google</a><br> </td></tr> <tr><td> <iframe src="goo.html" id="hpr"> pcでご覧ください。 </iframe> </tr></td> <tr><td> <iframe src="goo.html" id="hp"> pcでご覧ください。 </iframe> </td></tr> </table> </body> </html>
- uuing
- ベストアンサー率25% (53/206)
やっぱり良く分かりません。 スクロールさせたいのにスクロールバーは表示したくないとか，「リンクバナー」の意味が今ひとつ・・・。 ウェブで「バナー」とは，広告のことを指します。 例えば企業広告そのものもはもちろんですが，お友達のサイトのリンク用画像も一種の「広告」ですから，「バナー」と呼びます。 それをフレームBに縦に並べてスクロールさせる，ということでしょうか？ しかしそれでは最初の説明の >[B]：ランダムサイト表示 >ランダムにページorサイトを表示します。 と違うので，よくわかりません。 そもそも，なぜランダムに表示するのかがわかりません。 リンク集に限らず，選択用のオブジェクトは，ユーザビリティを考えると順番は固定するべきです。 さっき1番上にあったものが今度は3番目にある，というのは，良いとは言えません。 少々デザインが先走りしすぎているような気がします。 HTMLは，「これは大見出し」とか，「ここから本文」「ここで1段落」などの，あくまで文書の構造を示すためのもので，デザインをするためのものではありません。 少々難しいかもしれませんが，HTML4の仕様書を日本語訳したサイトがありますので，紹介しておきます。 先に紹介したサイトとあわせてご覧になると，HTMLの書き方への理解が深まるかと思います。
お礼
ご指摘ありがとうございます。 まだまだ初心者で、そこまで深く考えていない ところが現状です。 cyokokichiさんのご回答がイメージに近いので 参考にしてファイルを作成してみます。 最終的なレイアウト、見せ方は再度考案致します。 スタイルシートも含め再度勉強したいと思います。 ありがとうございます。
- negoro
- ベストアンサー率33% (1/3)
フレームでしかできないと思います。 No.１の方と同じ意見ですが、自分のページの中に他のサイトを読み込んでしまうのは良くない事だと思います。 現にそういう動きをしているサイトもあるかもしれませんが、大体はフレームにおける表示領域の初歩的な指定ミスだと私は思ってます(^^; テーブルというのは「枠」だけの事であって、HTMLの中で指定した内容の物を表示するだけなので動的な事はできないかと。 初心者という事なので、あえてテーブルでレイアウトする行動は止めませんが、将来的にはスタイルシートというものを使ってページデザインが出きる様になった方がお得ですよ。 あとスクロールバーを消す方法も、フレームならば可能ですが、消す場合には必ず、「スクロールをする」、「ページを自由に動ける」事と同じ機能を持つナビゲーションを用意してください。 それがなければ、スクロールバーは消さないで下さい。 <frame src="***.html" scrolling="no"> で消えるはずです。
- uuing
- ベストアンサー率25% (53/206)
いまひとつ状況がよくわかりませんが，気をつけるべき点をいくつか書きます。 まず，テーブル要素は，あくまで表を作るために用いるべきで，文書や画像等のレイアウトなどに使うべきではありません。 視覚障害者の方むけの音声読み上げ式ブラウザなどで読むと，何のことやらわけのわからないことになってしまったりしますし，携帯端末などで見た場合も，表示が崩れて別けの分からないことになってしまいます。 どうしてもレイアウトを取りたいときは，スタイルシートを使いましょう。 #ウェブデザイナーを名乗りながら，画像や文章のレイアウトの質問にテーブル使った回答をしている方をみかけるたびに，「なんだかなぁ」と思ってしまいます。 つぎに，フレーム内に別サイトを表示するのは，著作権法に触れる恐れがあります。 今一度ページの設計を見直された方が良いように思います。 スクロールバーを消すことは出来ません，というか，消してはいけません。 ウインドウサイズを変更したりしたときに，スクロールバーが出ないのは，ウェブページの設計としては非常に不便で不親切です。 出来るだけ，閲覧者のことを考えたデザインにするように心がけましょう。 リンク先をランダムに変更するには，Javaスクリプトを使えば出来ます。 ↓このあたりが分かりやすく，参考になると思います。
- 参考URL：
- http://www.tohoho-web.com/
お礼
ご返信ありがとうございます。 説明に不足がございましたのでもう少し 補足させて頂きます。 今回のお問い合わせのページは 私個人HPのリンク集の見せ方で考察しております。 [A]メニュー領域（[C]領域を変更） [B]リンクバナー表示（縦スクロール使用予定） ※スクロールバー無。 [C]リンクバナー表示 ※スクロールバー有。 （[B]と同じものを使用 ※[C]領域は全体を表示可能。） 表示イメージは下記の通りです。 [A][A][B][B][B] [A][A][B][B][B] [A][A][C][C][C] [A][A][C][C][C] [A][A][C][C][C] [A][A][C][C][C] [B]領域は補足のような領域となります。 [リンクバナー内容]： 様々なカテゴリ毎にhtmlで分類。 《例（もちろんリンクフリーのものです。）》 (1)検索HP (2)旅行関係 (3)個人HP（お友達） (4)音楽関連 [B]領域では小さくランダムで「上記html(1)～(4)」 を表示しスクロールさせて全体を表示。 このときスクロールバーは消去したいです。 [C]領域では閲覧者が見たい「上記html(1)～(4)」 を[A]領域で指定して[C]領域に表示。 このときスクロールバーは存在します。 ※著作権等の問題は考慮しておりませんでした。 ご指摘ありがとうございます。 しかしながら実際に使用する場合はあくまで 自身のHPのリンク集をランダム表示させます ので問題ないと考えております。 ※携帯モバイル向けに関しては最終的に 別途モバイル対応のHP作成を考えて おります。まだまだ、初心者でそこまで まわっておりません。ご指摘ありがとう ございます。 ありがとうございます。 JavaScriptがかなりの初心者ですので 少し勉強致します。
お礼
ありがとうございます！！ イメージに近い動作を確認致しました。 ちなみに最終段の『pcでご覧ください。』の すぐ上の</tr></td>は逆ですよね？ 度々申し訳ございませんが、現在この プログラムは時間での更新となっておりますが、 『更新ボタン』を押した時（リンク等）に 更新されるようにするにはどのように設定を すれば良いでしょうか？ （時間を長くするだけでもOKなのですが、 知っておきたいので） 初歩的な質問かもしれませんが宜しく お願い致します。 ※例の『goo.html』『yahoo.html』『google.html』 のファイルにリンク集を作成する為、スクロール させた場合に全体を表示しきる前にランダム ジャンプしてしまうので。 現在試行錯誤中ですが、スクロールについても質問 させていただくかもしれません・・・