おしえて

html 左メニューから右への表示方法

締切済

質問者：hana-51
質問日時：2017/01/10 09:41
回答数：12件

(度々の相談で失礼します。
　netでいろいろと調べましたが、解決できませんでしたので相談します)
htmlで作成していたHPをCSSを使って表示できる様に・・と努力しています。
（但し、html及びcssとも初心者です）

疑似フレームを使って、ヘッダー、フッターと中間に左右の２つのフレームを用意しました。
中間の左側をメニューとして用意し、それを選択すると右へ表示されるようにしたいのですが上手く行きません。

現象は、
左メニューを選択すると右に表示されるのではなく、新たなページで内容が表示されます。
（内容は写真のサムネールを多数並べてあります・・・htmlで作成した物で、cssは入っていません）

●何を、どうすればよいのかアドバイスを頂けると助かります。
下記に関係あると思われる構文を下記に抜粋しました。

・Htmlに下記リンクを用意しました。
<link rel="stylesheet" type="text/css" href="style1--dl.css" />

・下記はHtmlのbody内の記述抜粋です。
<body>
<div id="header" class="item">　・・・itemは参考ソースのコピーのままです。
<h1>swiss 20168/26～9/11</h1>
</div>
<div id="footer" class="item">フッター（固定）問い合わせ
</div>

<div id="left_frame" class="menu">　・・・menuは参考ソースのコピーのままです。
<dl class=tripschedule>　・・・tripscheduleは参考ソースのコピーのままです。
<dt><FONT color="#ff99ff" size="3">８月</FONT></dt>
<dt><FONT color="#ff99ff" size="3"> ２６日　成田発</FONT></dt>
　（申し訳ありません、上記の参考箇所は要不要と使い道が判っていなくてそのままです）

<dd><a href="to-zurich/to-zurich1.html" target="right_frame"><FONT color="#FFcccc" size="3">⇒チューリッヒ空港⇒市内</FONT></a></dd>

・下記はstyle1--dl.css内の記述の抜粋です。
cssへどの様に記述すればよいのか判らず、下記を入れてあります。
body, .menu {
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 100%;
overflow: auto;
}

#right_frame {
float: right;
width: 75%;
}

#left_frame {
float: left;
width: 25%;
}

編集して確認しました。
サンプルのレフトフレーム「A」のA.htmlを「to-zurich/to-zurich1.html」の書き換えて、右に表示される事を確認しました。

これが、やりたかったことですが、右側ウインドウが2段になっています。
これは何処を編集すればよいのでしょうか？

><iframe class=flexItem id=rightcts name=right src="e.html"></iframe>
この"e.html"はどの様に？・・・・右フレームに名前を付けていると言事なんでしょうか？

"CSS flexible box" と <iframe>は、今から用語等の確認になります・・・。

No.8の回答に寄せられた補足コメントです。補足日時：2017/01/11 08:32
通報する
度々の補足で失礼します。
サンプルの表示について、ブラウザの問題があるような記述がNETで確認できましたので、
下記ブラウザ3点で確認しました。

クロームで表示させると添付画の様に正常に表示されました。
　ＩＥ11では一部正常に表示されないとか・・・
　　（今回の質問はＩＥ１１でした）
　クロムは最新版で55.0でした。
　ファイヤーフォックスでも正常に表示されました。

今からはクロムで編集を行ってみます。
注意点等ありましたら、アドバイス頂ければと思います。

補足日時：2017/01/11 14:23
通報する
wixを調べました。
無料貸し出し枠は500Mbという記述を確認し、今の私のアルバムには使えないと・・・。

やはり、今使用しているサーバーを利用するしかないと言う事になりました。
一度は先日のアドバイスで出来ましたが、dlを複数記述したらレイアウトが崩れてしまいました。
更に、IEで表示が崩れるのは、一般的ではないと思い、IEで何とか表示させたいです。

それで、html+css　のレベルで、
何とか左側メニューを選択したら、右側へ内容を表示する方法のアドバイスをいただけないかと・・・

No.10の回答に寄せられた補足コメントです。補足日時：2017/01/13 18:19
通報する

通報する

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

質問の本文を隠す

回答 (12件中11～12件)

最新から表示
回答順に表示

No.2

回答者： zircon3
回答日時：2017/01/10 10:02

えっと。

。。
「疑似フレームを使った画面であるフレームをメニュー表示のフレームとし、その中のメニュー項目をクリックすると隣のフレームの表示内容を変更したい」ってことですね？
ここに丁寧に書くのは面倒、、、（失礼！）ちょっと手間なので、Googleなどで「HTML 疑似フレーム　メニュー」といったキーワードを指定して検索してみて下さい。
解説ページが見つかるはずです。

で。ちょっと試しましたら以下のようなページがヒットしました。

http://www.kuhp.kyoto-u.ac.jp/~diag_rad/web/p_fr …
http://nextat.co.jp/staff/archives/19

参考まで。

- 0
- 件

通報する

この回答へのお礼

有難う御座います。
ご紹介頂いたHPではscript、javaを使用して説明されていますが、
script、javaを使用して出来るのでしょうか？

さらにハードルが上がって・・・ぐちゃぐちゃしそうですね。

一応、NETで説明されているフレーム作成で、
上下、中央左右の4つのフレームにはできているのですが・・
中央左右の左側のメニューと右側表示部のつながりと言うか、リンクが判っていないんですね。
それを、説明したHPにまだ遭遇できていないんです。

通報する

お礼日時：2017/01/10 12:04