フレームを使わずに右側だけを切り替える方法
- 個人で絵のサイトを作る際に、フレームを使わずに右側だけを切り替える方法について教えてください。
- HTMLとCSSで作成し、画面を半分に分けて左側にメニュー、右側に絵が表示される形を目指していますが、メニューを切り替えるたびにリンクがページごと切り替わってしまいます。
- フレームを使わずに右側だけを切り替える方法や、絵を更新する際にすべてのページを編集しなくても済む方法があれば教えてください。
- ベストアンサー
フレームを使わずに右側だけを切り替える
個人で絵のサイトを作ろうとしています。 HTMLとCSSで作り、画面を半分に分けて左側がメニューで右側に絵が表示されるというよくある形が目標です。 フレームを使わずに、overflowでスクロールできるようにしたのですが、問題はメニューで右側に絵を表示させる際にこのままだとメニューを切り替えるたびにリンクがページごと切り替わる点です。 メニューの数がある程度限られていれば、左側が同じページをいくつもつくり右側だけ変えるようにできますが、絵の数が増えればそのたびメニューの項目がいくつと増えていきます。 そのたび今まで作ったページたちの左側をいちいち編集しなければいけませんよね？それはめんどくさい… 今目指すレイアウトでフレームを使わずに右側だけ切り替える、もしくは絵を更新するたびにひとつひとつ書き換えにいかなくても済む方法はありますでしょうか？ 同じような質問はいくつもあるのですがなかなか解決にたどり着かないので質問させていただきました。 以上の内容でよろしければ回答お願いします。
- okowa58
- お礼率48% (48/98)
- HTML
- 回答数8
- ありがとう数5
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
#5、#6です。（前回、間違って連投してしまいました。失礼。） ＞載せたい画像の大きさはそれぞれ違うので一括指定できません。 どこをいじられたのかわかりませんが、別に画像サイズを固定する必要はありません。 表示部分のサイズを固定してもよければ、画像の枠（にあたるli要素）のサイズを」固定しておけば、画像のサイズは自由に出来るのではないでしょうか。 表示部分のサイズも可変とかいろいろになると、スクリプトを使ってしまった方が簡単そう。 前回とほとんど同じですが、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <style type="text/css"> <!-- #navi, #images { float:left; } ul, li { list-style-type:none; padding:0; margin:0; } #navi { width:10em; } #navi img { width:4em; height:2em; border-width:0px; } #images { width:600px; height:300px; overflow:hidden; } #images li { width:600px; height:300px; text-align:center; overflow:auto; } //--> </style> </head> <body> <div> <ul id="navi"> <li><a href="#img1"><img src="img/photo01.jpg" alt="photo1">photo1</a></li> <li><a href="#img2"><img src="img/photo02.jpg" alt="photo2">photo2</a></li> <li><a href="#img3"><img src="img/photo03.jpg" alt="photo3">photo3</a></li> <li><a href="#img4"><img src="img/photo04.jpg" alt="photo4">photo4</a></li> <li><a href="#img5"><img src="img/photo05.jpg" alt="photo5">photo5</a></li> <li><a href="#img6"><img src="img/photo06.jpg" alt="photo6">photo6</a></li> </ul> <ul id="images"> <li><a name="img1"><img src="img/photo01.jpg" alt="photo1" style="width:400px; heigth:200px"></a></li> <li><a name="img2"><img src="img/photo02.jpg" alt="photo2" style="width:300px; height:100px;"></a></li> <li><a name="img3"><img src="img/photo03.jpg" alt="photo3" style="width:800px; height500px;"></a></li> <li><a name="img4"><img src="img/photo04.jpg" alt="photo4"></a></li> <li><a name="img5"><img src="img/photo05.jpg" alt="photo5"></a></li> <li><a name="img6"><img src="img/photo06.jpg" alt="photo6"></a></li> </ul> </div> *スクリプトを使ってもよいのであれば、たくさんのものがライブラリ化されているので、探せばいろいろ見つかると思います。 ＜以下一例＞ http://sandbox.scriptiny.com/javascript-slideshow/ http://www.fabulant.com/downloadcenter/imgfadezoom/imgfadezoom.html http://myisland.jp/template/gallery/gallery04.html
その他の回答 (7)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.2です。その後、反応がないのですが・・。 望まれている形と、現状の説明がないと、あなたの希望に沿う適切な対策は得られません。 CGIなどサーバー側でのプログラムを使用せずに、HTMLとCSSだけで行おうとすると、すべてのページを書き直さなければなりませんが、HTMLの工夫でその負担は大きく軽減できます。 [例] ・画像の数が月に10枚程度でしたら、月ごとにひとつのHTMLを作成する。 そのページに目次と画像を置く。 ・前の月 ・年間リスト ・アルバムのトップへのリンク ・および次の月へのリンク こうすると、書き直すのは前月のHTMLと、アルバムトップ、その年の年間リストだけですみます。 2011_nov.html ができたときに アルバムトップへのリンク 今年のリストへのリンク 先月へのリンク 2011_oct.html の書き直しは アルバムトップへのリンク 今年のリストへのリンク 先月へのリンク 来月へのリンク--追加★だけ それぞれのページの目次は、fixedで固定すると、画像はスクロールして見れます。 将来、CGIなりで自動化するにしても、最低限これだけのことをしておけば、これらのファイルは書き直す必要がありません。
補足
回答ありがとうございます。 伝わりにくい質問内容の上、質問した時点でとりあえず作っていたものがちゃんと機能していないことが後からわかりました。すいません。 overflowですが、フレームを使わずにメニューとメインを別々にスクロールできるようにするのを目指して使いました。形はできたもののメニューをクリックして右側に表示することができずそこで力尽きました。 なるほど月ごとに分けるという考え方もあるのですね！ そのやり方でちょっと試してみます。
- fujillin
- ベストアンサー率61% (1594/2576)
ご質問の意味が把握できていないので、よくわかりませんが想像で… スクリプトで対応している例が多いとは思いますが、こんな方法でも可能ではないでしょうか？ （以下、原理のみです。） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- #navi, #images { float:left; } ul, li { list-style-type:none; padding:0; margin:0; } #navi { width:10em; } #navi img { width:4em; height:2em; border-width:0px; } #images, #images img { width:600px; height:300px; } #images { overflow:hidden; } //--> </style> </head> <body> <div> <ul id="navi"> <li><a href="#img1"><img src="img/photo01.jpg" alt="photo1">photo1</a></li> <li><a href="#img2"><img src="img/photo02.jpg" alt="photo2">photo2</a></li> <li><a href="#img3"><img src="img/photo03.jpg" alt="photo3">photo3</a></li> <li><a href="#img4"><img src="img/photo04.jpg" alt="photo4">photo4</a></li> <li><a href="#img5"><img src="img/photo05.jpg" alt="photo5">photo5</a></li> <li><a href="#img6"><img src="img/photo06.jpg" alt="photo6">photo6</a></li> </ul> <ul id="images"> <li><a name="img1"><img src="img/photo01.jpg" alt="photo1"></a></li> <li><a name="img2"><img src="img/photo02.jpg" alt="photo2"></a></li> <li><a name="img3"><img src="img/photo03.jpg" alt="photo3"></a></li> <li><a name="img4"><img src="img/photo04.jpg" alt="photo4"></a></li> <li><a name="img5"><img src="img/photo05.jpg" alt="photo5"></a></li> <li><a name="img6"><img src="img/photo06.jpg" alt="photo6"></a></li> </ul> </div> </body> </html>
補足
回答ありがとうございます！ その形はとても理想に近いものですが、メニューをクリックして表示される画像を基本一つずつにしたいのです。 記載していただいた通りにやると一つずつになったのですが、 11行目で画像の大きさをいじってしまうと画像が上から下に全部だーっと一気に表示されスクロールして見ることになってしまいました。 載せたい画像の大きさはそれぞれ違うので一括指定できません。 勉強不足ですいません・・・頭パンクしそうですorz
- fujillin
- ベストアンサー率61% (1594/2576)
ご質問の意味が把握できていませんが、想像で… スクリプトで対応しているものが多いとは思いますが、こんなのでも可能では？ （以下、原理のみです。） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- #navi, #images { float:left; } ul, li { list-style-type:none; padding:0; margin:0; } #navi { width:10em; } #navi img { width:4em; height:2em; border-width:0px; } #images, #images img { width:600px; height:300px; } #images { overflow:hidden; } //--> </style> </head> <body> <div> <ul id="navi"> <li><a href="#img1"><img src="img/photo01.jpg" alt="photo1">photo1</a></li> <li><a href="#img2"><img src="img/photo02.jpg" alt="photo2">photo2</a></li> <li><a href="#img3"><img src="img/photo03.jpg" alt="photo3">photo3</a></li> <li><a href="#img4"><img src="img/photo04.jpg" alt="photo4">photo4</a></li> <li><a href="#img5"><img src="img/photo05.jpg" alt="photo5">photo5</a></li> <li><a href="#img6"><img src="img/photo06.jpg" alt="photo6">photo6</a></li> </ul> <ul id="images"> <li><a name="img1"><img src="img/photo01.jpg" alt="photo1"></a></li> <li><a name="img2"><img src="img/photo02.jpg" alt="photo2"></a></li> <li><a name="img3"><img src="img/photo03.jpg" alt="photo3"></a></li> <li><a name="img4"><img src="img/photo04.jpg" alt="photo4"></a></li> <li><a name="img5"><img src="img/photo05.jpg" alt="photo5"></a></li> <li><a name="img6"><img src="img/photo06.jpg" alt="photo6"></a></li> </ul> </div> </body> </html>
- naokita
- ベストアンサー率57% (1008/1745)
フレームセットのように １ページ内で絵だけ切り替わるように見せるのでしたら、 JavaScriptで絵だけを切り替わるよう出来ますし、 ページが切り替わるだけなら テンプレートとして固定してCMSで作ると管理が簡単です。 例：ブログでは管理画面でメニューを追加すると全ページに反映します。 静的ページだと、 高機能エディタなどの置換え機能で 全ファイルのメニュー部分だけを一括置換してから全ページを更新。 iframeでも可能だし、サーバサイドで固定する事も可能です。 絵のみが切り替わるだけのページなら、 JavaScriptで切り替える方が良いと思いますが、 ページ単位にこだわらずに、 jQeryなどでギャラリーっぽくサムネイル表示にした方がユーザーには優しいのでは？
お礼
サムネイル表示もいいですね やはりJavaScriptを使ったほうがいろいろできますよね。 もっと勉強したいと思います。 回答ありがとうございました！
- tracer
- ベストアンサー率41% (255/621)
webサイト統一のメニューを各ページに置くとき、メニューがフレームの場合は一括でメニュー内容を更新出来るのに対し、フレームを使わない場合は、全ページをいちいち更新しなければならないのがめんどくさい。という意味ですよね？ 一般的には以下のいずれかの方法で一括管理します。 ・JavaScriptを使う。(ただしSEOには不利です) ・PHPなどのサーバースクリプトを使う(サーバーサイドの知識が必要です) ・ページ作成ソフトにあるテンプレート機能を使う。(DreamWeaverにはあるようです) 確かに、質問内容にある「メニュー以外の内容(コンテンツ)だけを切り替えていく」という方法もありますが、ちょっと難易度は上がりますよ。ご興味があれればAjaxなどのキーワードで調べてみてください。
お礼
JavaやPHPですか・・・まだ勉強不足なので身に着けたいです。 回答ありがとうございました！
- ORUKA1951
- ベストアンサー率45% (5062/11036)
フレームを使う限り必然的に生じる問題ですが、質問の意味がわからない部分があります。 「overflowでスクロールできるようにしたのですが、」 overflow:auto;ないしscrolleでスライダーがあるということでしょうが、 「メニューで右側に絵を表示させる際にこのままだとメニューを切り替えるたびにリンクがページごと切り替わる」 「左側が同じページをいくつもつくり右側だけ変えるようにできますが、絵の数が増えればそのたびメニューの項目がいくつと増えていきます。」 他のページにリンクしてしまうということですか？
- luminous3
- ベストアンサー率33% (46/139)
メニューのリンク元から右ページにリンクする際、targetを右フレームページ用のアドレスを指定してやればメニューフレームページは１つでできます。 <A href="リンクしたい絵のページのアドレス" target="右フレームページの名前">メニューページのリンクしたい文字</A>
お礼
回答ありがとうございます！ その方法でやりましたがなかなか上手くいきませんorz もっと修行します。
関連するQ&A
- フレームを使わないページの移動方法
http://park16.wakwak.com/~html-css/tag_dictionary/dic_page.html 上記のサイトのように、左側にある「ページ」「テキスト」「スクロール」というリンクをクリックすると右側に各ページが表示されます。しかし「ページ」「テキスト」「スクロール」は変わっていません。フレーム、アイフレームも使ってないみたいですが、どのように右側のページだけを変更しているんでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- CSSで擬似的にフレームを作りたい
CSSのoverflow:scrollを利用した、 フレームのように一部分をスクロールできるページを考えております。 画面左側をメニューにするには <body> <div class="menu"></div> <div class="content"></div> </body> のようなHTMLに *{margin:0px;padding:0px;} html{height:100%;} body{height:100%;} .menu{height:100%;float:left;width:100px;overflow:scroll;} .content{height:100%;margin:0 0 0 100px;overflow:scroll;} のようなスタイルシートという形で可能ですが、 上側をメニューにするにはどのようにすれば良いでしょうか？
- ベストアンサー
- HTML
- フレームの右側に設置したカウンターの働きについて
こんばんは。 今HPを作っているのですが、 全部のページにカウンターを設置して、どのページに何人が入ったのか どのページが一番人気があるのかということを知りたいと思っているのです。 しかし、フレームを作って左側にメニューとしてリンクを貼り、 右側に表示させるというページを作った場合、カウンターはどういう働きをするのでしょうか？ カウンターは貼りつけた全ページ共有タイプで(全ページの合計カウント数が表示される)、 設置したいページのHTMLソースに＜IMG src=ここにCGIのURL height=30 width=70＞と貼りつけるタイプのものです。 １、左側フレームにあるリンクをクリックすれば、全てカウントされる。 例えば左側フレームに10個リンクが貼って、全てクリックした場合、最初に入ったときも数えて11個カウントされる。 ２、最初にそのフレームページに入ったときと更新したときしかしかカウントされない。 例えば左側フレームに10個リンクが貼って、全てクリックした場合、最初に入ったときも数えて1個しかカウントされない。 ３、その他 上記のどの働きをするのか教えて頂きたいのです。 やっぱり全てカウントされる１が理想なのですが・・。 また、１にする方法があったら教えていただきたいです。 ちなみにDLしてきたフリーCGIのフレーム付きの日記帳では ２で、最初と更新したときしかカウントされませんでした。 分かりにくい説明で申し訳ないのですが、 どなたかご存知でしたら回答をお願い致しますm(_ _)m
- 締切済み
- HTML
- フレームページへのリンク
トップページ(フレームなし)から、フレームページへのリンクがうまく表示されません。 トップページのリンクボタンをクリックすると、左側フレームのメニューは表示されますが、右側の内容のページが「Not Found」で表示されません。 が、表示されたフレーム左側のメニューをクリックすると表示されます。 トップページから、左右両方表示させるのにはどうすればよいのでしょうか？ よろしくお願いいたします。
- ベストアンサー
- HTML
- 左フレーム内のリンクを右側に表示させたい
http://www.rakuten.ne.jp/gold/hotclothing/ HPを作成中でして上記ページのように、左側のメニュー部分を別ページで作ってメニューをクリックすると右側部分に表示されるように作るにはどうしたらよいでしょうか？ 試しにテーブルを作って左セルにiframeをセット。呼び出すページはiframeを設定したセルに表示されてしまいます。 あくまでも左にはメニューを置き、ページ右側が切り替わる様に作りたいのですが方法が分かりません。 ソフトはHPビルダー10を使っています。ちなみに「リンクの設定」の「ターゲット」をいじってみたのですが、右側に表示されませんでした。色々調べてみたところ、親フレームに表示させれば・・・という所迄調べたのですが設定の仕方もそれが合ってい るかも分かりません。どなたかご存知の方がいらっしゃいましたらお教え下さい。 説明がへたくそですみません。
- ベストアンサー
- ホームページ作成ソフト
- IEでフレームの表示ができない。
フレームを利用し、画面の左側にメニューを配置したページを見ようとしたのですが、その右側に表示されるべき内容が真っ白になってしまいます。 今までは普通に左側のメニューを選択すると、その内容が右側に表示されていたのですが、いつの間にかこのような現象になってしまいました。 インターネットオプションの設定を一度デフォルトに戻したところ、一度は正常に表示されるのですが、一度IEを終了させて、再度同じページを見ると、また右側だけ真っ白になってしまいます。 色々試したところ、インターネットオプションで何も変更せずに「OK」を押してページを更新すると正常に表示はされることは分かっています。ただ、なぜか一度IEを終了させるとまた表示できないのです。 不可解な現象ではありますが、何かお分かりの方がいらっしゃいましたら、ご教授願います。
- 締切済み
- ブラウザ
- フレームを使わないでフレームっぽくみせるには？
ホームページを製作しようと思っています。 そこで３カラム型の感じのデザインにしたいと思っているのですが、 ページ数を結構つくらなければいけないので、左側にメニュー、右側に広告を張って、真ん中はメインの内容にしようとすると、やはりフレームを使うのが便利なのです。 広告の関係上、広告をインラインフレーム内などに入れることができないので非常に悩んでいます。 フレームを使わないで３カラム型のようなホームページを作るとなると、すべてのページを１個ずつひらいて更新するしかないでしょうか。 メニューをふやしたり、サーバー移動となると気が遠くなりそうで・・・ よろしくお願いいたします！
- 締切済み
- HTML
- フレームの右側に表示。
フレームの右側に表示。 フレームを使ったHPを作っているのですが、左右に分けたフレームの 左側にリンクを貼って右側に表示したいのですが、 どうしても上手く出来ません。 フレームのやり方を検索してその通りにやってみたのですが、 いつもなぜか新窓がでます。 新窓が出ないようにしたいのですが、出来るでしょうか？ HPを作るのも初めてなのでこういった作業はしたことのない初心者です。 初心者にも分かりやすく教えていただけるととても助かります。
- 締切済み
- HTML
- フレーム
alphaEDITというソフトでホームページを作って、フレームページが出来たのですが、スクロールバーとボード非表示に設定すると、スクロールが出来なくなってしまいます。 http://wing2.jp/~catmoon/ ↑の左側のメニューが書いてあるところなのですが、カウンターが隠れてしまって困っています。 なにか解決方法はないでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- フレームが表示されない
と言っても、HPを作っている者ではありません。 ネットをしていると、時々フレーム表示ができないサイトがあります。 つまり、基本のフレーム表示（左側にメニュー、右側に初期内容）はできるのですが、左側のメニューを押下しても、右側のフレームが切り替わらないのです。 全てのサイトでフレーム表示が出来ない訳ではありません。 こちらのサイトだと、左側のメニューを押下すると右側に正しく表示されます。 http://www2.csc.ne.jp/~eiya/1a/ta1.htm しかし、例えば2chのトップページで左側のメニューを押下しても、右側のフレームが切り替わりません。 無反応です。 ステータスバーに進行状況表示もされません。 サイトを最新の情報に更新した後に押下しても状況は変わりません。 http://www2.2ch.net/2ch.html ちなみに、2chの左側に表示されているメニューを右クリック→新しいウィンドウで開くを選択すると、右側のフレームに表示される内容が新しいウィンドウで表示されます（だからネットができないという訳ではないです）。 右クリック→開くだと無反応で、上記と同じ現象です。 どういった理由が考えられるでしょうか？ もしくは上記２つのフレームを使ったサイトに何か違いがあるのでしょうか？ ＩＥのＶｅｒ．６．０ ＷｉｎｄｏｗｓＸＰ ウイルスバスター２００６ よろしくお願いします。
- ベストアンサー
- その他（インターネット接続・通信）
お礼
お礼遅れました；ありがとうございます！