アプリ版：「スタンプのみでお礼する」機能のリリースについて

おしえて

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

締切済

  • 質問者：hana-51
  • 質問日時：
  • 回答数：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>は、今から用語等の確認になります・・・。

    「html 左メニューから右への表示方法」の補足画像1
    No.8の回答に寄せられた補足コメントです。 補足日時：2017/01/11 08:32
    通報する

  • 度々の補足で失礼します。
    サンプルの表示について、ブラウザの問題があるような記述がNETで確認できましたので、
    下記ブラウザ3点で確認しました。

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

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

    「html 左メニューから右への表示方法」の補足画像2
      補足日時：2017/01/11 14:23
    通報する

  • つらい・・・

    wixを調べました。
    無料貸し出し枠は500Mbという記述を確認し、今の私のアルバムには使えないと・・・。

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

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

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

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

質問の本文を隠す

A 回答 (12件中1～10件)

No.12

  • 回答者： zircon3
  • 回答日時：

No.11です。



> ・<a href="example.html" target="フレーム名">は「target="right"」としています。
> このtarget="right"の「right」が右のフレームだと言う定義がうまくできていないのだろうと考えていますが・・。
> 左右にフレームがあって、右側は「right」とどの様に定義づけるのかと・・。
> （htmlのフレーム分割の構文をそのまま引用しています。）

えっと。。。内容から察しますにFRAMEタグの機能（指定できる属性の種類とその役割）を理解されておられない。。。フレーム分けの基本中の基本を理解されていないように見えます。
メニュー側で「target="right"」という指定をするということは、そのフレームの名前（name）がrightだということです。

あと、blタグでフレームが自動的に増えた、、、なんていう話は聞いたことが無いですしもちろん経験もありません。
ちなみに間を空けるだけならbrタグ（改行）では駄目なのなですか？　もっと微妙な調整が欲しいという事なのですかね？

微妙な調整が欲しい場合は枠の無い表にしてて行ピッチを調節するという方法もあります。
あと行頭を上の行より下げたい場合、日本語表記なのでしたら全角ブランクを置く方法も。
いろいろ工夫のしようはあると思います。それにはまず土俵であるHTMLを知らないとアイデアは出て来ない。
人のソースを見て真似ているだけではそれは難しいことですよね。その辺を今実感されているのだと思います。

No.11を最終コメントするつもりでしたが、あまりに、、、だったのでつい口出ししてしまいました。
これが最後です。

ではでは。
    • good
    • 0
    • 件
通報する
この回答へのお礼

何度もアドバイスを申し訳ないです。

>内容から察しますにFRAMEタグの機能（指定できる属性の種類とその役割）を理解されておられない。。。フレーム分けの基本中の基本を理解されていないように見えます。
・ご指摘もっともです。
見よう見まねで、作成していましたので、編集しながら動作を確認し、NET情報を確認し・・・と作成していました。

今回、html+cssで4フレーム（ヘッダー、フッター、ミドルの左右2つ）をトライしたんです。
>メニュー側で「target="right"」という指定をするということは、そのフレームの名前（name）がrightだということです。
・rightと書かれている事で、右フレームがrightと認識されると言う事ですね。
左フレームのメニューに右へ表示する様に（target="right"）記述してありますが、新しくページが作られてしまう。
　cssの記述の問題だろうと思っていますが・・・・
これをいろいろ相談させて頂き、html+css3　等になり、判らない領域が更に・・・・。
dlの件はこのhtml+css3　での事でした。
（フレームが増えた件は、クロムで表示させても同じでした）

htmlで出来ていましたので、cssも何とかなるだろうと思ったのが、知識のないところで無理だったのでしょう。

今の壁は、何故右フレームに表示できないのだろうかと・・・、
時間がかかるかも知れませんが、「機能として出来る」のならtryを続けようと思います。

有難う御座いました。

通報する
お礼日時：2017/01/14 14:09

No.11

  • 回答者： zircon3
  • 回答日時：

No.10です。



すみませんが全フォロー内容を詳しく追っていなので詳しくは分かりませんが。。。

> 一度は先日のアドバイスで出来ましたが、dlを複数記述したらレイアウトが崩れてしまいました。

一度出来たものが出来なくなった、、、ということは出来た時の物に戻せばよいだけではないでしょうか？
いじり過ぎて壊してしまったのですよね？

あと「dlタグを複数記述したら・・・」についても具体的に何をどうしたらどう崩れたのかが分かりませんのでコメントのしようがありません。
まずはdl、dtタグ（加えてddタグも）は何のするものでどう使うのが正しいのかを学んでください。<dl>のみで</dl>で閉じてないとかではないですか？

書店か住まわれている市町村の図書館へ行かれてHTMLの説明をしているホームページ作成の入門書的なものを入手されるとよいように思います。


> 更に、IEで表示が崩れるのは、一般的ではないと思い、IEで何とか表示させたいです。

　IE & Edgeは確かWebブラウザのシェア2位だったかと思います。1位はChrome。3位はFirefoxで、ChromeとFirefoxを合わせると50%を超えていたはずです。
　なのでIEを重視し過ぎることは無いでしょう。


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

例えばハイパーリンクなら　<a href="example.html" target="フレーム名">といった感じでtarget属性を使えばよいだけです。これをメニュー側に書けばtarget指定されたフレームの内容が変わります。それだけのことです。
そういったこともたぶん「HTML フレーム」とか「HTML フレーム　リンク」といった簡単なキーワードで検索すれば方法を説明したページがみつかるはずです。そういった自力で知りたい情報を見つける工夫をされていますか？

「こんなキーワードで検索すると・・・」というコメントを何度か書かせていただいたかと思いますがその応用かと。

失礼ながらとてもCSSとかHTML5とか新しい、初心者には敷居がちょっと高いものをどこかから引っ張ってきたがために、しかもそれを手掛かりに基本的な所、体系的なところの理解を飛ばしてチャレンジしているがために、しなくてよい苦労を一所懸命しているように感じます。

・HTMLの基本を入門書を使って理解する事
・ネット上のタグ辞典（使用例もあったりする）を上手に使う事
・ネット上にある説明を上手に見つけ利用する事
・HTMLエディタなどを使って土台となるHTMLを作り利用する事

この四つをされるとよいように強く思います。

頑張ってください。
ではでは。
    • good
    • 0
    • 件
通報する
この回答へのお礼

有難う御座います。
>あと「dlタグを複数記述したら・・・」についても具体的に何をどうしたらどう崩れたのかが分かりませんのでコメントのしようがありません。
・左フレームのメニューを作成していて、文字行の先頭を合わせる為と行間を設けると言う事で<dl>～</dl>を使用しました。
これを、2つ続けたら、左フレームの更に左へフレームが出来てしまったのです。

><dl>のみで</dl>で閉じてないとかではないですか？
・これはありませんでしたが、</dt>、</dd>はありましたので修正しても同じでした。

>なのでIEを重視し過ぎることは無いでしょう。
・PC購入からブラウザを変えていない知人、友人がいると言う事で・・・

>例えばハイパーリンクなら　<a href="example.html" target="フレーム名">といった感じでtarget属性を使えばよいだけです。これをメニュー側に書けばtarget指定されたフレームの内容が変わります。それだけのことです。
・<a href="example.html" target="フレーム名">は「target="right"」としています。
このtarget="right"の「right」が右のフレームだと言う定義がうまくできていないのだろうと考えていますが・・。
左右にフレームがあって、右側は「right」とどの様に定義づけるのかと・・。
（htmlのフレーム分割の構文をそのまま引用しています。）

>しなくてよい苦労を一所懸命しているように感じます。
ご指摘もっともです。
自分のHP作成をhtmlで行っていましたが、cssを利用する事で表示が綺麗になると知りましたので、cssで今やっている事が出来ればと・・・。
複雑な事は考えておらず、必要最小限的に覚えて、それからやりたいことを少しずつ加えようと・・・素人的に考えての事でした。

>この四つをされるとよいように強く思います。
ご指摘がもっともで・・・
>・ネット上にある説明を上手に見つけ利用する事
これで何とかしのげないかと思ってはいるのですが、
今悩んでいるところが、これが超えられなくて・・・
右ページの写真配置等のcss表現にはいられない状況です。

飛び越えられない、高いハードルになってしまったようです。

通報する
お礼日時：2017/01/14 08:25

No.10

  • 回答者： zircon3
  • 回答日時：

No.9です。



> だんだん・・・・自分のレベルを超えている様です。
> HTML・・・HTML+css・・・HTML+css3・・・と、難易度が倍々に（＾＾）

　「いいな」と思ったWebページのソースを見てそのまま真似していると「おまじない」、しかもHTMLやらHTML5やらCSSやらJavascriptやらごちゃごちゃの「多言語のおまじないの断片の塊」になって行き、しかも流用するだけでそこを起点とした該当言語の系統立てた学習もしていないとなると、、、まぁ、、、そうなりますよね。。。普通だと思います。
　そういう匂いを感じたのでNo.5を書いた次第です。

　で。既に使われていらっしゃるのかもしれませんが、有償あるいは無償のホームページ作成ソフトを使う方法もあります。これなら画面デザインに集中出来て便利かと思います。

https://allabout.co.jp/gm/gc/31797/
http://websae.net/websitebuilder_20130507/
この回答への補足あり
    • good
    • 0
    • 件
通報する
この回答へのお礼

有難う御座います。
発端はサムネール画に影がついてセンスを感じましたので、トライしてみようと・・・
で、メニューの右フレームに今のhtmlを表示するだけだから少しの努力で出来るのではないかと、甘い考えもありました・・・・
これが出来れば、それで終わりだったのですが・・・今でもそう思っているのですが。

ご紹介頂いた、無料で作成するＨＰのWixについてトライしています。
私がやろうとしている、3フレームが出来るのかどうか
メニューから、アルバムへ飛べるのか
サムネール表示から、大きな写真が表示されるのか。
写真をアップロードする事になるようなのでちょっと考えるところです。
無料と言うのは・・・何時かは、消えるのか・・。
サポートに問い合わせています。

このwixもどういう物か判っていませんが、サンプルを見ると洗練されていますね。

通報する
お礼日時：2017/01/12 11:03

No.9

  • 回答者： zircon3
  • 回答日時：

No.5です。



Webブラウザの種類やバーション（メジャーバージョン）によってHTMLのタグの細かな解釈（＝描画仕様）やJavascriptやcssの解釈が異なります。昔から結構有名な話しです。
特にIEは要注意です。
対策はHTML内にJavascriptでブラウザの種類とバージョンを読み取り、対応したHTMLへの書き換えを行う事です。
具体的な方法は「javascript ブラウザ 判定」といったキーワードで探すと簡単にみつかるでしょう。

なお、Webサーバ上に配置したCGIプログラムで動的にHTMLを生成する場合はこの処理をCGIプログラムで行います。サーバー側でもそれらの情報を得ることが出来ます。

参考まで。
    • good
    • 0
    • 件
通報する
この回答へのお礼

有難う御座います。
だんだん・・・・自分のレベルを超えている様です。
HTML・・・HTML+css・・・HTML+css3・・・と、難易度が倍々に（＾＾）

構文を見て、区別がつかないのに出来るところだけ手を付けている様な感じですね。

今は、Ogre7077さんのサンプルを編集しながら、トライしている状況です。
このサンプルで、ul、liの代わりにdl、dtを使用して、左側のメニュー列の幅を狭くしていますが、「dl」の2つ目を追加すると、レイアウトが崩れてしまうんですね。
これが、何をどうしてよいのか・・・・・病んでいます。

どういう制約があるのでしょうか？

通報する
お礼日時：2017/01/11 18:43

No.8

  • 回答者： Ogre7077
  • 回答日時：

最近の web ブラウザならば "CSS flexible box" と <iframe> が使えるので、


スクリプトを使わずに HTML/CSS のみでも提示の要件は満たせます。

以下サンプルです。

<!DOCTYPE html>
<html><head>
<style>
body { width:100vw; height:100vh; margin:0; padding:0; }
.flexV { display:flex; flex-flow:column; }
.flexH { display:flex; flex-flow:row; }
.flexItem { flex:1 0 auto; position:relative; overflow:auto; }
.flexItem#header { order:1; flex:0 0 120px; background:#ffc; }
.flexItem#footer { order:3; flex:0 0 40px; background:#cff; }
.flexItem#middle { order:2; }
#middle > .flexItem#leftnav { order:1; flex:0 0 25%; background:#cfc; }
#middle > .flexItem#rightcts { order:2; }
iframe.flexItem { border:none; }
.flexItem > .flexItemInner { position:absolute; }
</style>
</head>
<body class=flexV>
<section class=flexItem id=header><div class=flexItemInner>ヘッダー</div></section>
<section class=flexItem id=footer><div class=flexItemInner>フッター</div></section>
<div class="flexItem flexH" id=middle>
<nav class=flexItem id=leftnav><div class=flexItemInner>
<ul>
<li><a href="a.html" target=right>A</a><!-- iframe 内にページ表示 -->
<li><a href="b.html" target=right>B</a>
<li><a href="c.html" target=right>C</a>
<li><a href="d.html" target=right>D</a>
</ul>
</div></nav><!-- /#leftnav -->
<iframe class=flexItem id=rightcts name=right src="e.html"></iframe>
</div><!-- /#middle -->
</body></html>
この回答への補足あり
    • good
    • 0
    • 件
通報する
この回答へのお礼

有難う御座います。
サンプルを用意頂き申し訳ないです。
サンプルの左メニューをクリックしたら、右フレームに表示する方法はどういう記述になりますか？

下記がそれなんでしょうか？
><li><a href="a.html" target=right>A</a><!-- iframe 内にページ表示 -->
まだ、リンクを試していませんが確認したいと思います。
その時に、cssへの記述はどの様になるのでしょうか？

ul　だと左側に自動的に文字（数字？）が入る様に思います。
これをやめて、dl、dt、ddを使用しています。
同じような事だと思いますが・・・。

済みません、よろしければアドバイス頂けないでしょうか。
もうやめようかな～と思っているところです。

通報する
お礼日時：2017/01/10 18:35

No.7

  • 回答者： zircon3
  • 回答日時：

No.5です。



> 暫くして、分割フレームを見てそれを気に入り何とか使える様になりました。
> その後は、同じパターンで写真の入れ替えで作成し現在に至っています。
>
> 何が言いたかったのかと言うと、
> やりたい事だけマスターして作成したい。
> cssでの表示方法も同じ考え方でした。

　そういう趣旨で作成＆運用しておられ、真似したページがたまたまCSSを使用していたので、、、ということなのでしたらしたらCSSの使用を止め、<FRAMRSET>タグでフレーム分割されれた方が簡単です。
　フレームの境目の枠線を消すなども出来ますから見た目は同じに出来ます。
　どのようなWebサイトなのか構成がわからないのでピント外れなコメントかもしれませんが、疑似フレームを使うと写真アルバム的なコンテンツの場合は一つのHTMLファイルが大きくなり更新作業などの際の画面上での取り回しがよくなくなる場合があります。
　ですので技術的な趣味的お勉強でやられておられるなら別ですが、写真を掲載したWebページを作成して公開することが目的でしたら目次ファイルとコンテンツファイルを分けた方が更新作業などは楽です。

　HTMLのタグ説明をした「HTMLタグ辞典」的なページはインターネット上にたくさんあります。

参考まで。
    • good
    • 0
    • 件
通報する
この回答へのお礼

有難う御座います。
>CSSの使用を止め、<FRAMRSET>タグでフレーム分割されれた方が簡単です。
今のhtml3分割の造りで良いと言う事ですね。

「HTMLタグ辞典」は他でアドバイスを頂き、確認しており、
何かの時に必要だろうと保存してあります。

cssで表現すると、
多数のページが、cssで編集できるとか、
（ヘッダーの表示編集とか）
写真を外部リンクにする事でメンテナンスも容易になるとか。
影付きの写真表示もセンスが良かったんですね。

判って来た事ですが（htmlでも出来るのかも知れない）
4分割目をフッターにする事で、画面に左右されない情報を表示できる。
例えば、メール、掲示板等メインに戻らなくても・・・。

どうしても、と言う事ではなかったのですが、
どういう事が出来て、cssを組み込む事の違いも知りたかったのです。

通報する
お礼日時：2017/01/10 15:45

No.6

  • 回答者： t_fumiaki
  • 回答日時：

フレームは止めて、２カラム(２列）構成の普通のページ構成にした方がよいですよ。



左カラムをサイドメニューにして右カラムにコンテンツを配置する。
javascriptも必要なくhtml&cssだけで出来、その方がgoogleの評価が高くなりますし、簡単です。
    • good
    • 0
    • 件
通報する
この回答へのお礼

有難う御座います。
上下と中間の左右の４分割も、
html&cssだけで考えていました。

もしかして、分割数が多くなるとhtml&cssではできないのでしょうか？
だとすると、3分割はどうだろう・・・。
（現在はHtmlで3分割です）

通報する
お礼日時：2017/01/10 14:59

No.5

  • 回答者： zircon3
  • 回答日時：

No.2です。



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

　えっと。。。
　Javascript（じゃばすくりぷと）はJava（じゃば）とは目別物です。
　Javaはサーバ側のWebアプリケーションを作成する際に多く使われる言語で、C言語などと同じくコンパイルして実行ファイルを作成すます。
　対してJavascriptはHTMLファイルの中に「ここがJavascriptで記述した処理部分です」という形で記述し、HTMLの中から呼び出して使用します。実行はHTMLと同じくWebブラウザが1行ずつ読み込んで解釈することで行います。


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

　基本を理解すれば書式は難しくないです。CSSよりは。。。(^^;


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

　同じフレーム割の説明を探す必要はありません。「あるフレーム上のメニュー項目をクリックされた際に、メニュー項目があるフレームとは別のフレームの表示内容を変更するにはどうしたらよいのか？」を学ばれればよいだけです。つまにフレームが2個ある場合の説明を参照すればよいのです。

　で。数年前まで30年ほどシステム開発の仕事をしていてWeb関連のお仕事も後半10年以上していましたが、お仕事ではなく趣味の範囲なのでしたらHTMLとCSSをいっぺんに学ばれるのはあまり得策ではない、特にこれまでソフトウェ作りをしたことが無い方にとってはそのように思います。
　まずはHTMLの基本的な書式・文法を理解し画面遷移するWebサイトを作成した上で、ではそれをCSSを使ったものにしてサイト全体の表示デザイン変更などをCSSファイルを変更することで一括して行えるようにする、、、といった段階を経るのが妥当と感じます。
　その過程でHTML5対応とか、Javascriptを用いてちょっと動きのある画面にするとかいったことに発展させて行かれるとよいように思います。
　そうすると自然と系統立てて学ぶことが出来「ぐちゃぐちゃしそう」になるのを避けられるかと。

参考まで。
    • good
    • 0
    • 件
通報する
この回答へのお礼

有難う御座います。
今の私のHPは１０年前くらいに、誰かのHPを参考に作ったものでした。
暫くして、分割フレームを見てそれを気に入り何とか使える様になりました。
その後は、同じパターンで写真の入れ替えで作成し現在に至っています。

何が言いたかったのかと言うと、
やりたい事だけマスターして作成したい。
cssでの表示方法も同じ考え方でした。
難しい事を手広くとは考えていなかったので・・・

通報する
お礼日時：2017/01/10 14:55

No.4

  • 回答者： yambejp
  • 回答日時：

ajaxについて知識がないのでしたらこのわけのわからない疑似フレームをやめて


普通のフレームにしてみてはどうでしょう？
（もちろんきょうびフレーム自体あまりおすすめできませんが）
    • good
    • 0
    • 件
通報する
この回答へのお礼

有難う御座います。
もう少し努力してから判断したいと思います。
知らずにハードルの高いものに手を出しているかも・・・とは思っています。

通報する
お礼日時：2017/01/10 14:48

No.3

  • 回答者： t_fumiaki
  • 回答日時：

<dd><a href="to-zurich/to-zurich1.html" target="right_frame">


の
target="right_frame"
を削除する。
    • good
    • 0
    • 件
通報する
この回答へのお礼

有難う御座います。
早速試してみましたが、結果は同じでページの上書きになりました。
（新たなページではありません）
期待しましたが・・・

通報する
お礼日時：2017/01/10 11:50

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

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

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

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

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

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

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

おすすめ情報