プロが教える店舗＆オフィスのセキュリティ対策術

フレームを使わずに右側だけを切り替える

解決済

  • 質問者：okowa58
  • 質問日時：
  • 回答数：8件

個人で絵のサイトを作ろうとしています。
HTMLとCSSで作り、画面を半分に分けて左側がメニューで右側に絵が表示されるというよくある形が目標です。
フレームを使わずに、overflowでスクロールできるようにしたのですが、問題はメニューで右側に絵を表示させる際にこのままだとメニューを切り替えるたびにリンクがページごと切り替わる点です。
メニューの数がある程度限られていれば、左側が同じページをいくつもつくり右側だけ変えるようにできますが、絵の数が増えればそのたびメニューの項目がいくつと増えていきます。
そのたび今まで作ったページたちの左側をいちいち編集しなければいけませんよね？それはめんどくさい…
今目指すレイアウトでフレームを使わずに右側だけ切り替える、もしくは絵を更新するたびにひとつひとつ書き換えにいかなくても済む方法はありますでしょうか？
同じような質問はいくつもあるのですがなかなか解決にたどり着かないので質問させていただきました。
以上の内容でよろしければ回答お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (8件)

No.8ベストアンサー

  • 回答者： fujillin
  • 回答日時：

#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/imgfadezo …
http://myisland.jp/template/gallery/gallery04.html
    • good
    • 0
    • 件
通報する
この回答へのお礼

お礼遅れました；ありがとうございます！

通報する
お礼日時：2011/12/18 21:35

No.7

  • 回答者： ORUKA1951
  • 回答日時：

No.2です。

その後、反応がないのですが・・。
望まれている形と、現状の説明がないと、あなたの希望に沿う適切な対策は得られません。

　CGIなどサーバー側でのプログラムを使用せずに、HTMLとCSSだけで行おうとすると、すべてのページを書き直さなければなりませんが、HTMLの工夫でその負担は大きく軽減できます。
[例]
・画像の数が月に10枚程度でしたら、月ごとにひとつのHTMLを作成する。
　そのページに目次と画像を置く。
　　・前の月
　　・年間リスト
　　・アルバムのトップへのリンク
　　・および次の月へのリンク
　こうすると、書き直すのは前月のHTMLと、アルバムトップ、その年の年間リストだけですみます。
　2011_nov.html　ができたときに
　　アルバムトップへのリンク
　　今年のリストへのリンク
　　先月へのリンク

　2011_oct.html　の書き直しは
　　アルバムトップへのリンク
　　今年のリストへのリンク
　　先月へのリンク
　　来月へのリンク--追加★だけ

　それぞれのページの目次は、fixedで固定すると、画像はスクロールして見れます。

　将来、CGIなりで自動化するにしても、最低限これだけのことをしておけば、これらのファイルは書き直す必要がありません。

　　
　　

この回答への補足

回答ありがとうございます。
伝わりにくい質問内容の上、質問した時点でとりあえず作っていたものがちゃんと機能していないことが後からわかりました。すいません。
overflowですが、フレームを使わずにメニューとメインを別々にスクロールできるようにするのを目指して使いました。形はできたもののメニューをクリックして右側に表示することができずそこで力尽きました。
なるほど月ごとに分けるという考え方もあるのですね！
そのやり方でちょっと試してみます。

補足日時：2011/12/01 17:49
通報する
    • good
    • 0
    • 件
通報する

No.6

  • 回答者： fujillin
  • 回答日時：

ご質問の意味が把握できていないので、よくわかりませんが想像で…




スクリプトで対応している例が多いとは思いますが、こんな方法でも可能ではないでしょうか？
（以下、原理のみです。）

<!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

補足日時：2011/12/01 18:01
通報する
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： fujillin
  • 回答日時：

ご質問の意味が把握できていませんが、想像で…




スクリプトで対応しているものが多いとは思いますが、こんなのでも可能では？
（以下、原理のみです。）

<!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>
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： naokita
  • 回答日時：

フレームセットのように


１ページ内で絵だけ切り替わるように見せるのでしたら、
JavaScriptで絵だけを切り替わるよう出来ますし、

ページが切り替わるだけなら
テンプレートとして固定してCMSで作ると管理が簡単です。
例：ブログでは管理画面でメニューを追加すると全ページに反映します。

静的ページだと、
高機能エディタなどの置換え機能で
全ファイルのメニュー部分だけを一括置換してから全ページを更新。

iframeでも可能だし、サーバサイドで固定する事も可能です。


絵のみが切り替わるだけのページなら、
JavaScriptで切り替える方が良いと思いますが、
ページ単位にこだわらずに、
jQeryなどでギャラリーっぽくサムネイル表示にした方がユーザーには優しいのでは？
    • good
    • 0
    • 件
通報する
この回答へのお礼

サムネイル表示もいいですね
やはりJavaScriptを使ったほうがいろいろできますよね。
もっと勉強したいと思います。
回答ありがとうございました！

通報する
お礼日時：2011/12/01 17:35

No.3

  • 回答者： tracer
  • 回答日時：

webサイト統一のメニューを各ページに置くとき、メニューがフレームの場合は一括でメニュー内容を更新出来るのに対し、フレームを使わない場合は、全ページをいちいち更新しなければならないのがめんどくさい。

という意味ですよね？

一般的には以下のいずれかの方法で一括管理します。

・JavaScriptを使う。(ただしSEOには不利です)
・PHPなどのサーバースクリプトを使う(サーバーサイドの知識が必要です)
・ページ作成ソフトにあるテンプレート機能を使う。(DreamWeaverにはあるようです)


確かに、質問内容にある「メニュー以外の内容(コンテンツ)だけを切り替えていく」という方法もありますが、ちょっと難易度は上がりますよ。ご興味があれればAjaxなどのキーワードで調べてみてください。
    • good
    • 0
    • 件
通報する
この回答へのお礼

JavaやPHPですか・・・まだ勉強不足なので身に着けたいです。
回答ありがとうございました！

通報する
お礼日時：2011/12/01 17:31

No.2

  • 回答者： ORUKA1951
  • 回答日時：

フレームを使う限り必然的に生じる問題ですが、質問の意味がわからない部分があります。


「overflowでスクロールできるようにしたのですが、」
　overflow:auto;ないしscrolleでスライダーがあるということでしょうが、

「メニューで右側に絵を表示させる際にこのままだとメニューを切り替えるたびにリンクがページごと切り替わる」
「左側が同じページをいくつもつくり右側だけ変えるようにできますが、絵の数が増えればそのたびメニューの項目がいくつと増えていきます。」

　他のページにリンクしてしまうということですか？

　
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： luminous3
  • 回答日時：

メニューのリンク元から右ページにリンクする際、targetを右フレームページ用のアドレスを指定してやればメニューフレームページは１つでできます。



<A href="リンクしたい絵のページのアドレス" target="右フレームページの名前">メニューページのリンクしたい文字</A>
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます！
その方法でやりましたがなかなか上手くいきませんorz
もっと修行します。

通報する
お礼日時：2011/12/01 18:04

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報