- ベストアンサー
iframe内のメニューをクリックで変更したい
ホームページビルダーでHPを作成しています。 ２カラムのページで、左側のカラムにメニューがあります。 複数ページ作成するので、メニューは手間を省けるiframeで表示させようと思っています。 iframeのメニューは基本的には日本語ですが、ボタンを押すと 英語と中国語にメニューに入れ替わるようにしたいと思っています。 どのようにすれば、上記が実現できるでしょうか？ ※Javascriptを使用しないと実現できないでしょうか？できれば、Javascript無しで実現したいと考えています。 どうぞ、アドバイスをよろしくお願い致します。 m（＿ ＿）m
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- sora1tora2
- ベストアンサー率69% (27/39)
こんにちは Javascript無しで実現するとなるとこんな感じでしょうか <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-16" /> <meta http-equiv="content-Language" content="ja" /> <meta http-equiv="content-style-type" content="text/css" /> <title>title</title> <meta name="keywords" content="キーワード1,キーワード2,キーワード3" /> <meta name="discription" content="コンテンツの概要" /> <meta name="author" content="名前" /> <meta name="copyright" content="著作権" /> <style> *{ margin: 0; padding: 0; font-family:Microsoft Yahei; } body,html { margin:0; padding:0; } #wrap { margin: 0px; padding: 0px; width: 150px; } #navi { margin: 0px; padding: 0px; width: 150px; height: 40px; } #navi ul { margin: 0px; padding: 0px; } #navi ul li { margin: 0px; padding: 0px; height: 20px; width: 150px; list-style-type: none; } #navi ul li a { margin: 0px auto; padding: 0px; text-decoration: none; font-weight: bold; font-size: 14px; line-height: 20px; color: #ff0000; outline: none; } #navi ul li a:hover { color: #0000ff; } #main { margin: 0px; padding: 0px; width: 150px; height: 180px; overflow: hidden; } #main .menu { margin: 0px; padding: 0px; height: 180px; width: 150px; } #main .menu ul { margin: 0px; padding: 0px; } #main .menu ul li { margin: 0px; padding: 0px; height: 30px; width: 150px; } #main .menu ul li a { margin: 0px; padding: 0px; height: 30px; width: 150px; display: block; color: #000000; line-height: 30px; outline: none; } #main .menu ul li a:hover { color: #ff0000; } </style> </head> <body> <div id="wrap"> <div id="main"> <div class="menu"> <ul> <li><a href="#" name="jp">トップ</a></li> <li><a href="#">ホーム</a></li> <li><a href="#">メイン</a></li> <li><a href="#">コンエンツ</a></li> <li><a href="#">メール</a></li> <li><a href="#">サイトマップ</a></li> </ul> <!--//日本語用メニュー--></div> <div class="menu"> <ul> <li><a href="#" name="en">TOP</a></li> <li><a href="#">HOME</a></li> <li><a href="#">MAIN</a></li> <li><a href="#">CONTENTS</a></li> <li><a href="#">MAIL</a></li> <li><a href="#">SITE MAP</a></li> </ul> <!--//英語用メニュー--></div> <!--//main--></div> <div id="navi"> <ul> <li><a href="#jp">日本語</a></li> <li><a href="#en">English</a></li> </ul> <!--//navi--></div> <!--//wrap--></div> </body> </html> 古いバージョンのブラウザによってはＣＳＳハックが必要ですが、 参考になればいいのですが。
お礼
sora1tora2さま 大変具体的、且つ、詳細なご説明ありがとうございました。 書いて頂いたコードは、そのまま使わせて頂ければと思います。 iframeで実現するのと比較して、自分にあった方法でページを作れればと思います。 それにしても、これだけの内容をスラスラと書けてしまうsora1tora2さまは、かなり高度な知識をお持ちになっているんだなーと、とても驚いています。 私も、もっと勉強して頑張りたいと思います。
- abacabu
- ベストアンサー率37% (250/663)
独学でＷＥＢサイトを作成している者です。 どうせiframeでメニュ―を表示するならtarget属性で、3種類のメニューを用意してクリックで変更するようにするしかないのでは？と思います。３言語分ぺージ作るのも大変でしょうが頑張って下さい。
お礼
ご回答ありがとうございました！ はい、target属性でやろうと思います。 具体的には、最初の回答者様の内容で良く分かりました。 アドバイスありがとうございました。
関連するQ&A
- iframe内MENU
ほんと色々お世話になります。 iframeの件でご質問申し上げます。 iframe内に別ページで作成しました。 メニューページを表示させています。 （別ページ作成したｃｓｓmenuを丸投げしている感じです。 <iframe src="css_tatoeba.html"frameborder="0" height="40" scrolling="no" width="554"></iframe> こんな感じです。） 別ページでリンクを貼り親ページで試してみるとiframe内にリンク先が 一部表示されてしまいます。（レイアウト崩れのような感じで） iframe内ではなく、新たなページに表示させたいのですがどうすればよろしいのでしょうか？ 色々試したのですが上手くいきません。 教えて頂ければ幸いです。
- ベストアンサー
- HTML
- フレームを使用しないフレームのようなページ
ホームページを制作しています。フレームは使用していません。 コラム集のページがあり、1つのコラムごとに1ページで作りたいと思います。 ヘッダ部分・メニュー部分・フッタ部分は1つのHTMLで、コラムを表示する部分だけ表示を切り替えたいと思っています。 (要はフレームを使用したページのようなものを実現したいです。) iframeを使用しようかと思ったのですが、 コラムページの内容量(縦の長さ)により、親のHTMLのページサイズを変えたいので iframeでは不可能と判断しました。 CSSやJavascriptを用いて上記のような事が実現できないでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- メニュー
サイトを作るときに、必ずメニューを作りますよね。 ですが、トップページにあるメニュー欄を少しでも編集すると、全ページのメニュー欄を編集しなくてはならなくなります…。（全ページにトップページと同じメニューがある場合） その手間を省く方法はないんですかね？ 一つのところを編集すれば、全ページに影響するようにしたいです。 検索エンジンでも、なんと検索したらいいか分からずに、分かりませんでした。 ホームページビルダーv7を使っています。
- ベストアンサー
- ホームページ作成ソフト
- FLASHで出来たメニューからインラインフレーム内を変更したいのですが・・・
無料配布されているFLASH素材（メニューボタン）を使い、 リンク先ページを同じページに設置したインラインフレームに表示させたいのですが、 FLASHメニュー＆iframe設置ページを表示後 最初にFLASHメニューボタンをクリックするとちゃんとリンク先を表示するのですが 続けてFLASHの別ボタンをクリックしても全く反応せず困っています。 一度ブラウザバックしてメニューをクリックすると別ページも表示されるのですが・・・。 ブラウザバックせずにインラインフレーム内にページを表示させる事は 出来ないでしょうか？ ターゲット指定は &target1=iframe&、&target2=iframe& と設定しています。 当方、WindowsXP、FlashPlayerはVersion 10,0,32,18 IE8とスレイプニルで上記の現象が起きていますが IBMホームページビルダーV9でのプレビューでは正常に各リンクを開けています。 FLASH初心者の為、わかりにくい説明で申し訳ございませんが宜しくお願いいたします。
- 締切済み
- Flash
- CSSでHP作成したい。メニューコンテンツはどのように作ったらいいですか？
CSSでHP作成したい。メニューコンテンツはどのように作ったらいいですか？ こんにちは。 今まで、ホームページビルダーを使って、HTMLでウェブページを作ってきました。 左カラムをメニュー部分として、インラインフレームで作成していました。 この度、SEO対策から、 CSSを使ったテンプレートに代えて作り変えようと思っています。 でも、いまいちよくわからないのですが、 スタイルシートで左カラム(メニュー)を書くとなると、 全てのページを作った後にリンクを貼って、 そのメニュー部分をすべてのページにまた複製しないとならないですよね？？ 私のウェブサイトは、100ページ弱あるので、 なかなか考えただけで大変そうです。。。 スタイルシートで、2カラム形式左メニューのページを作成したことのある方、 もし良かったら方法を教えて下さい。 ※ちなみに、ブログは自己カスタマイズが大変なので利用しない方向です。 FC2で持っていますが、やっぱりHTMLの方が使いやすいので・・・
- ベストアンサー
- SEO
- リンクをクリックすると親ウィンドーにiframe構造のページが開き、さらにターゲットへジャンプする方法はありますでしょうか？
以前質問させてヒントをいただいたのですが、結局解決できなかったのでもう一度お願いします。 例えば、index.htmlを下記の通りとします。 --iframe----HTML----- | | | | menu | | ---------------------- 左のmenuをクリックすると、iframeで作った別のページが開き、さらにその中のページのターゲット内に移動したいのです。 index.htmlのmenuをクリック→anotherpage.htmlへ移動 --iframe----iframe----- | |main.html | | menu | | ---------------------- さらに、右iframe内はmain.html内のターゲットAへジャンプ。 このようなジャンプがJavaScriptで可能だと教えていただきましたが、どのようにするのか解りませんでした。 そのプログラムや、それ以外の簡単な方法がありましたら、教えて下さい。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 【JS】(同ページの)iframe内に別頁を表示
JavaScriptに関する質問です。iframe内に、別のページを表示したいのですが、この際JavaScriptではどのような指示で実現できるのか教えていただけませんか。 よろしくお願いします。
- 締切済み
- JavaScript
- facebookいいね html5かiframeか
facebookの「いいね」ボタンの設置する際の埋め込みコードについてお尋ねします。 html5かiframeか、どちらの方が表示が速いのでしょうか？ あるサイトでは 「html5用のコードも結局はjavascriptでiframeのコードを吐き出しているのでiframeの方が速い」 と言う意見も見ました。 ページのコードはhtml5で作成しておりますので、 どちらにも対応する事が出来ますが、 少しでも早く表示したいと思っています。 ご意見を頂けますよう、お願い致します。
- ベストアンサー
- JavaScript
- メニュークリックによる画像切り替え
ホームページビルダー１０を使っている初心者です。 下半分のメニューに ・チョコ ・ガム ・クッキー ・キャンディー など、様々なメニューがあるとして、それをクリックすると 上の写真画像が切り替わるというページを作りたいと思っています。 ビルダーの機能にありますでしょうか？ お知恵をお貸しください。
- ベストアンサー
- ホームページ作成ソフト
- 文字化けと<iframe>の問題
ヤフーのジオシティーズでホームページを作っています。 index（TOP）のページをフレームで分けて構成していて、 左にメニュー、右にテキストのような構成です。 右のページには<iframe>も使っています。 どのテキストでも一番下に<a href="javascript:history.back()">で 「戻る」を配置してるんですが戻るを実行すると 左のメニューの文字が化けるんです。 それとＴＯＰの右の<iframe>も見れなくなっちゃうんです。 ブラウザのツールバーの戻るでも同じ現象が起きます。 戻るを使わなければ、普通に見ることが出来ます。 ちゃんと<meta http-equiv="content-type" content="text/html; charset=euc">も 使っているんですが、なぜ文字化けと<iframe>が正常に 作動しなくなってしまうのでしょうか？ どなたか解決法がをわかる方がいらっしゃれば よろしくお願い致します。
- 締切済み
- HTML
- HDDからSSDにクローンを作成中に0xc00000eエラーが発生し、ノートブック(ThinkPad)が起動しない状況です。
- 間違った手順でクローンを作成し、ノートブック(ThinkPad)が立ち上がらなくなりました。
- 改善方法や対処法を教えていただきたいです。
お礼
shiren2さま ご回答ありがとうございました！ やりたかったのは、ズバリこれです！ とても参考になるURLもありがとうございました！ 大変助かりました！