ホームページ作成。メニューボタンについて

このQ&Aのポイント
  • ホームページ作成中にメニューボタンの使い方についてわからない
  • テンプレートではボタンを押すとメインページまたはレフトページに本文が表示される仕組み
  • メニューを押すとレフトページとメインページの両方に本文を表示する方法を知りたい
回答を見る
  • ベストアンサー

ホームページ作成。メニューボタンについて

ただいま、ホームページを作成中なのですが、解らない事があります 私の使っているテンプレートでは上にメニューボタン(Pict Novelなど)がついてそれを押すと メインページもしくはレフトページに本文が表示されます。 そして画面の左端にレフトページがついています、レフトページは上についているメニューボタンを押すと さらに細かいメニュー(Pictを押すと、オリジナル・二次創作などのメニュー)がでます、 そしてそのレフトページの横、メニューの下に一番大きい画面メインページがあります、 メインページは、 メニューボタンを押してそのままメインページに直接出てくる物と、 メニューを押してさらにレフトページに現れたメニューを押すと 出てくる場合があります。(Pict→Original→メインページに本文) ですが私は、メニューをおすとレフトページにもメインページにも本文が出てくるようにしたいのです、 例えば Pictというメニューを押すと、レフトページにはさらに細かいメニュー 「オリジナル」と「二次創作」というメニューがでるようにします、 でそれと同時にメインページに、「オリジナルはこんなページ」「二次創作はこんなページ」 などと、レフトページに出てきたメニューの説明なんかを書きたいのです。 ちなみに、今の(上部分に表示されている)メニューのソースは、 <li><a target="left" href="left.html#novel">Saori</a></li> <li><a target="main" href="mail.html">Mail</a></li> <li><a target="left" href="left.html#link">Link</a></li> と言う感じになっています、"main"と書いてある物はメニュー(上のソースだとMail)をおすと、 メインページにmail本文が表示れ、"left"と書いてあるメニューはレフトページにさらに細かいメニューが表示される用になっています、 私の場合、Saoriというメニューボタンをおすと、 レフトページにもメインページにもそれぞれ別の物(ページ)が表示されるようにしたいです、 解りにくいごちゃごちゃした質問でスミマセン、回答くださると嬉しいです、解らないことがありましたら聞いてくださって大丈夫です!

  • Lasku
  • お礼率37% (72/190)

質問者が選んだベストアンサー

  • ベストアンサー
  • koma30007
  • ベストアンサー率87% (173/198)
回答No.8

完成して良かったです。(^-^* クリックでメニューを表示するのは、おそらくJavaScriptか Flashを使っていると思います。 JavaScriptの場合、Q&Aで答えを表示するのにも使われて いるようです。 ・クリックでツリーメニューを表示 http://www.openspc2.org/reibun/javascript/mouse/006/ ※IE対応、Firefoxでも動作 http://www.openspc2.org/reibun/javascript/mouse/063/ ※Safari、Netscapeにも対応、Firefoxでも動作 上記のサンプルでは「+」にリンクを貼っていますが、 文字の替わりに<img src="ファイル名" ~>という画像 のタグをリンクのタグで囲むと、画像クリックでメニュー が表示されます。 <img>タグの説明 http://www.tohoho-web.com/html/img.htm <a>タグの説明 http://www.tohoho-web.com/html/a.htm ・以下はQ&Aなどに使えそうなタイプです。 http://www.openspc2.org/reibun/javascript/mouse/008/ 今回紹介したサンプルがイメージしたのと違う場合は、 見本になるページのURLを添えて質問した方が適切な 回答がつきやすいと思います。 私はJavaScriptなどは書けないので、たぶん分からない と思います。(^^;

Lasku
質問者

お礼

有り難うございます!何とかやり遂げる事が出来ました! なんだか果たしてコレで良いのかは解りませんが取りあえず・・・ 大丈夫だと思います・・・本当に有り難うございました! いまのところは取りあえずコレで質問解消です! またまた質問が出てきてしまうかもしれませんが・・・ 本当に有り難うございました!!

その他の回答 (7)

  • koma30007
  • ベストアンサー率87% (173/198)
回答No.7

すみません。ケアレスミスです。(^^;A 「target="_top"」です。 <li><a target="_top" href="fream.html">Saori</a></li> で大丈夫なはずです。 余計な時間を掛けさせてすみませんでした。 これは関係ありませんが、フレームページ用のドキュメント タイプ宣言は正しくは以下になります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> ※各フレーム内に読み込んで表示させているページの 方は、以下で問題ありません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> それから、次のタブの最後の部分の「 /」(スペース  スラッシュ)はXHTMLの記法です。 HTML4.01では必要ありませんので、正しくは次のように なります。 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <link href="style.css" type="text/css" rel="stylesheet"> それでは、失礼しました。(^^;

Lasku
質問者

お礼

有り難うございます!!無事に完成いたしました! ながながとお付き合いしてくださって本当に有り難うございます! その他細かい説明なんかも有り難うございます!! 助かりました! これも関係ないのですが、たまにホームページで文字もしくは図 を押すとその文字・図のしたにズラッと文字(もしくはメニュー?)なんかが出てくる奴を見かけるのですが、私も上手く説明できないのですが・・・私のページでいうと・・・leftページに現れたPictというボタンを押すとそのPictの下に写真の名前なんかがズラッと現れる見たいな感じです・・・? そういうののやり方とかってあるのでしょうか・・・? なんか良く解らなくなってしまって申し訳ないです、 長々と本当にすみません・・・有り難うございました!!

  • koma30007
  • ベストアンサー率87% (173/198)
回答No.6

>mainのところだったら、説明のページ、とかを書いておけば良いのでしょうか? リンク先(表示させるページ)のファイル名を書きます。 ※ページの途中を表示させる場合は、<a name="****"> で指定した文字列をファイル名の後ろに「#」に続けて 記載します。 例えば「Saori」のサブメニューの場合、「left.html#novel」 ですよね? 「main」フレームの場合は、「target="main"」で「src=""」 には説明ページのファイル名を記述します。 <frame name="left" src="left.html#novel" scrolling="no"></frame> ※これは「left」という名前のフレームに「left.html」の 「novel」という位置を表示させる場合です。 >このフレームを上メニューのsaoriにリンク付け(?)すればいいのでしょうか? はい、作成したフレームのページはそれぞれ別の名前で 保存して、上部のメニューからリンクを貼ってください。 「target="top"」にするのを忘れないでくださいね。

Lasku
質問者

お礼

ありがとうございます、お返事が遅くなってしまって申し訳ないです、今やってみたのですが、 どうやら上手くフレームは作れた用なのですが、なぜか別窓 になってしまいます・・・どうしたらいいでしょうか? ちなみに今上のメニュー(saori)のソースはこんな感じです <li><a target="top" href="fream.html">Saori</a></li> fream.html というのがsaoriのフレームです、ちなみに沙織のfreamのソースはこんなかんじです <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>タイトル</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="content-style-type" content="text/css" /> <link href="style.css" type="text/css" rel="stylesheet" /><style type="text/css"> <!-- body{overflow:hidden} .ta1{border-right:1px dashed #333333;} .ta2{ border-top:1px dashed #333333; border-bottom:1px dashed #333333; background:url(bg01.jpg) no-repeat 100% 100%; } --></style> </head> <frameset contenteditable="true" border="0" framespacing="0" frameborder="0" cols="200,*"> <p><frame name="left" src="left.html#novel" scrolling="no"></frame><frameset border="0" framespacing="0" rows="40,*,35" frameborder="0"><frame name="menu" src="menu.html" scrolling="no"></frame><frame name="main" src="saori-kaisetu.html" scrolling="yes"></frame><frame name="bottom" src="bottom.html" scrolling="no"></frame></frameset><noframes></noframes></p> </frameset> <body> </body> </html> saori-kaisetu.html がsaoriの解説ページとなっています。 原因わかりますでしょうか?たびたびスミマセン・・・

  • koma30007
  • ベストアンサー率87% (173/198)
回答No.5

分かってきたということで良かったです。 >mainは一番大きい画面、今回私がsaoriのメニュー説明を書きたいと言っているメインページだと思われます。 はい、その通りです。 左と右に左右に分割してから、右側をさらに上下に 3分割している状態だったんですね。 右側の真ん中が「main」で、ここに説明のページを 表示させます。 この分割状態のフレーム用のページを作成するには、 以下の※を付けた部分を書き換えると良いです。 ここより前の部分に変更箇所はないはずです。 ※ただし、CSSを読み込むタグが必要な場合は追加 </head> <frameset contenteditable="true" border="0" framespacing="0" frameborder="0" cols="200,*"> <p>※←フレームの中になぜか<p>が・・・削除 <frame name="left" src="left.html※ここを各メニューに合わせて書き換え" scrolling="no"></frame> <frameset border="0" framespacing="0" rows="40,*,35" frameborder="0"> <frame name="menu" src="menu.html" scrolling="no"></frame> <frame name="main" src="top.html※ここを各メニューに合わせて書き換え" scrolling="yes"></frame> <frame name="bottom" src="bottom.html" scrolling="no"></frame> </frameset> <noframes>※フレームに対応していないブラウザ用のコメント この中になら<p>や<div>を使っても大丈夫です。 </noframes> </p>※ここに先ほどのpの終了タグが・・・削除 </frameset> <body> </body> </html> それでは、頑張ってくださいね。

Lasku
質問者

お礼

ありがとうございます!がんばります・・・ そして本当申し訳ないです、質問です。 <frame name="left" src="left.html※ここを各メニューに合わせて書き換え" scrolling="no"></frame> と書いてくださいましたが、※ここを各メニューに合わせて書き換え には、mainのところだったら、説明のページ、とかを書いておけば良いのでしょうか? それと、このフレーム作成が成功したら(頑張ります) このフレームを上メニューのsaoriにリンク付け(?)すればいいのでしょうか?

  • koma30007
  • ベストアンサー率87% (173/198)
回答No.4

上部メインメニューからのリンクのターゲットで「left」 や「main」が指定されていますので、フレーム枠を 設定したページがあるはずです。 上、左下、右下のフレームに分割されたページが表示 されている状態で、ブラウザのアドレス欄はどのよう になっていますか? http://アカウント名.web.fc2.com/ の場合、「index.html」または「index.htm」をコピー ※両方ある場合は優先表示されるはずの「index.html」 をコピーしてください。 http://アカウント名.web.fc2.com/*****.html の場合、「*****.html」をコピーしてください。 ※「*****」は確認した名前に置き換えてください。 これ以上はソースを確認しないと分かりませんので、 CSSではなく、フレーム枠を設定してあるはずのHTML ファイルのソースをお願いします。 フレーム分割して表示されている状態で、ブラウザの メニューからソースを表示させると、フレーム枠設定 ページのソースが表示されるはずです。 フレームページのファイル名が分からなかった場合は、 この方法で確認したソースをコピーしてください。 ※IE7の場合「表示」→「ソース」で表示されます。 ※Firefox3の場合「表示」→「ページのソース」です。 フレームの構造は次のようにして指定します。 参考知識としてご覧ください。 http://www.tohoho-web.com/html/frameset.htm ※<frameset>で分割指定 (「cols="50%,*"」とした 場合、左右分割です。例の場合は左側のフレームを50%、 右のフレームはその残り「*」です。) (「rows="50%,*"」とした場合、上下分割です。 例の場合は上のフレームを50%、下のフレームはその残り 「*」です。) 各フレームに読み込むページの指定は、<frame>タグで 行います。 <frame src="frame1.htm" name="frame1"> この場合、「frame1.htm」を「frame1」フレームに 読み込んで表示します。 ※既に使用しているので分かると思いますが、リンク をクリックした時に「frame1」フレームに別のページ を表示させたい場合は、 <a href="****.html" target="frame1"> という具合に、リンクのターゲットに「frame1」と 表示させるフレームの名前を指定します。

Lasku
質問者

お礼

本当に丁寧なご説明有り難うございます、大分理解出来るようになってきました、 フレーム分割されたページのアドレスは http://アカウント名.web.fc2.com/index2.html となっていました、そのindex2のソースのそれらしいソースはこんな感じでした </head> <frameset contenteditable="true" border="0" framespacing="0" frameborder="0" cols="200,*"> <p><frame name="left" src="left.html" scrolling="no"></frame><frameset border="0" framespacing="0" rows="40,*,35" frameborder="0"><frame name="menu" src="menu.html" scrolling="no"></frame><frame name="main" src="top.html" scrolling="yes"></frame><frame name="bottom" src="bottom.html" scrolling="no"></frame></frameset><noframes></noframes></p> </frameset> <body> </body> </html> ソース内のleftは左側に表示されるより細かいメニュー、menuは上部分につねに表示されているメニュー、mainは一番大きい画面、今回私がsaoriのメニュー説明を書きたいと言っているメインページだと思われます。 参考ページまでご丁寧に有り難うございます、出来る限り自分でも今から進めてみようと思っています、本当に有り難うございます!

  • koma30007
  • ベストアンサー率87% (173/198)
回答No.3

>そのフレームを作らないと二つのページを同時に表示させることは出来ないんですよね はい、新しく作成するフレームページの上、左下、右下に 各ページを一度に読み込んで表示させます。 ※現在のフレームを解除して同じウインドウに表示する ので、別窓では開きません。 >FC2でいうとファイルマネージャーみたいなページを管理するような所でやれば良いのでしょうか? >(ちなみに私は今までページを増やしたいときは元々あったテンプレートのページ達をコピーして増やしてファイルマネージャーに詰め込んで増やしていました) 今回もファイルマネージャーを使用して大丈夫です。 「http://アカウント名.web.fc2.com/」というアドレスで HPにアクセスした時に、何もしなくても「上、左下、右下」 にフレーム分割された状態で表示されますか? その場合は、「index.html」をコピーして増やします。 ※上記のアドレス形式(ファイル名をつけない)でアクセス した時にフレーム分割されていない状態、または上下2分割 など違う分割状態で表示される場合は、アクセスした時に 3分割で表示されるページ(フレーム枠の設定ページ)を コピーして増やしてください。 >※「数値」「*または数値」の部分は、メインフレーム (index.html?)と同じにすると良いです。 と書いてくださったところの数値は、全体の画面(テンプレート全体)の大きさの数値でしょうか? ちなみにこれは、各フレームの分割サイズを現在のHPの フレーム分割と同じ数値に変更すれば良かったのですが、 メインのフレームページ「index.html」(?)をコピーして 増やした場合は、数値を変更する必要はありません。 左下と右下の「<frame src="ファイル名"~>」のファイル 名の部分を変更すれば大丈夫です。

Lasku
質問者

お礼

お返事有り難うございます、やり方がつかめたような気がするのですが、やっぱりコピーで増やすとフレームがついていなかったので 教えて頂いたソースで作ろうと思ったのですが 果たしてどれを何処に書けばいいのか今イチ解りませんでした、 私テンプレートの場合、どうやらstyle.cssと言うところで全部の設定をしているようです、 でももしかしてそれぞれのページ(上部分のメニュー・左メニュー・メインページ)にもサイズのソースは書いてあるかもしれませんが・・・ いちどstyle.cssのソースを載せてみた方が良いでしょうか?

  • koma30007
  • ベストアンサー率87% (173/198)
回答No.2

それでは、とりあえず一つ作成してみましょう。 まず、メニュー「Saori」をクリックした際に表示される フレームを作成します。 ※下のHTMLをコピー&ペーストして使用してください。 ※HP作成ソフトのソース編集機能を使用するか、メモ帳 またはその他のテキストエディタを使用すると良いです。 ※変更が必要な箇所(数値、*または数値、ファイル名、 フレーム名)などを変更したら「saori-f.html」という 名前にして保存します。 ※「数値」「*または数値」の部分は、メインフレーム (index.html?)と同じにすると良いです。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>HPタイトル-Saori-(適当に変更してください)</title> </head> <frameset rows="数値, *または数値"> <frame src="上に表示されるメニューのファイル名.html" name="上のフレーム名" frameborder="0" noresize> <frameset cols="数値, *または数値"> <frame src="left.html#novel" name="left" frameborder="0" noresize> <frame src="info-saori.html" name="main" frameborder="0" noresize> </frameset> <noframes> <p>フレームに対応したブラウザでご覧ください。</p> </noframes> </frameset> </html> 次に、「Saori」のサブメニュー解説用のページを作成 して、「info-saori.html」という名前で保存してくだ さい。 ※違う名前で保存する場合は、先ほどのHTMLタグのソース の記述も変更する必要があります。(下記のsrc=""の部分) <frame src="info-saori.html" name="main" frameborder="0" noresize> 最後に、上部メニューからのリンクを書き換えます。 <li><a target="left" href="left.html#novel">Saori</a></li> 上のリンクを次のように変更します。 <li><a target="_top" href="saori-f.html">Saori</a></li> ※「_top」で現在のフレームを解除して、ページ全体に 「saori-f.html」を表示します。 「saori-f.html」は、左下のフレームにサブメニューの 「left.html#novel」を読み込み、右下のmainフレームに 解説用の「info-saori.html」を読み込んで表示します。 上のフレームには今までと同じようにメインメニューを 表示します。 これで希望のことが出来るはずですので、お試しください。 その他のページも「Saori」と同じ手順で作成してください。 1.メニューごとの新しいフレームページの作成 2.サブメニュー解説用のページ作成 3.リンクの訂正 分からない部分があったら、どの箇所が分からないのか 教えてください。

Lasku
質問者

お礼

さっそくまたまたご丁寧に有り難うございます。 早速お言葉に甘えさせていただきたいとおもいます・・・本当にごめんなさい、 saoriを押すと出るフレームのフレームっていわゆる別窓みたいなものなのでしょうか? そのフレームを作らないと二つのページを同時に表示させることは出来ないんですよね、私はFC2を使ってホームページを作っているのですが、 そのフレームはどうやってつくったら良いのか やっぱりいまいちつかめませんでした、 FC2でいうとファイルマネージャーみたいなページを管理するような所でやれば良いのでしょうか? あ、でも何となく解ったような気もします。 (ちなみに私は今までページを増やしたいときは元々あったテンプレートの ページ達をコピーして増やしてファイルマネージャーに詰め込んで 増やしていました) それと ※「数値」「*または数値」の部分は、メインフレーム (index.html?)と同じにすると良いです。 と書いてくださったところの数値は、全体の画面(テンプレート全体)の大きさの数値でしょうか? いまいち質問が解りづらくてすみません、 もう少し付き合ってくださると助かります、お手数おかけして申し訳ありません。

  • koma30007
  • ベストアンサー率87% (173/198)
回答No.1

各メニューごとに新しくフレームページを用意して、 上のメニューボタンから各メニューごとのフレーム ページにリンクすると良いです。 ※リンクのターゲットは「_top」にします。 ただし、左側のページ(各サブメニューからのリンク) は変更しないでください。今まで通りに「main」を 指定した状態にして置きます。 各メニューごとに用意するフレームページは、次の ような内容で作成してください。 ※このようなフレームページをメインメニューの数 だけ用意します。 ※ただし、Mailはサブメニューがないようですので、 作成しなくても大丈夫です。上のメニューからの リンクもそのままにしてください。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>HPタイトル</title> </head> <frameset rows="70, *"> <frame src="topmenu.html" name="menu" scrolling="auto" frameborder="0" noresize> <frameset cols="150, *"> <frame src="left.html#novel" name="left" scrolling="auto" frameborder="0" noresize> <frame src="info-novel.html" name="main" scrolling="auto" frameborder="0" noresize> </frameset> <noframes> <p>フレームに対応したブラウザでご覧ください。</p> </noframes> </frameset> </html> ※例は「Saori」というメニュー用のフレームページ にしてみました。 ※フレームの分割サイズとフレーム名は、現在使用 しているTOPのフレームページと同じにします。 ※上のフレームに表示するソース(メインメニュー)の ファイル名が分からないので、例では「topmenu.html」 としています。自分で作成したメインメニューのHTML ファイル名に変更してください。 ※「Saori」のサブメニュー説明用の本文ページとして 「info-novel.html」を用意した場合となっています。 これ以外のメニューの説明用ページも作成して用意 してください。 ※左側のフレーム「left」のソースと説明用のメイン フレーム「main」のソースは、各メニューに合わせて 変更してください。 ※現在はサブメニュー用のページが「left.html」だけ のようですが(違ったら補足お願いします・・・)、 各メインメニューごとにサブメニューのページを作成 して用意しても大丈夫です。 もちろん今のままでもどちらでも大丈夫です。

Lasku
質問者

お礼

丁寧でわかりやすい説明を有り難うございます!とてもわかりやすい説明をしてくださってありがたいのですが、 なにぶん私が初心者なもので・・・やっぱり解らないことが多くて・・ 本当に無知で申し訳ないです、 koma30007さんのおっしゃる通り、leftページは一つしかなく、mainページはそれぞれに用意してある形です。 私がやりたい事を単刀直入(?)に言わせていただくと、 メニューボタンsaoriを押すとleftページにさらに細かいメニュー表示(完成しています)そしてmainページにその細かいメニューの解説を入れたいのです。 leftページはもうテンプレートをダウンロードしたときから出来ていて、saoriをおすと すぐ出てきます、でもmainページは変わりません、そこを私はなんとかして leftページと同時にmainページも変えたいんです。 saoriのメニュー解説用のmainページに表示するページはいつでも用意できる形にはなっています、 本当に同じようなことをなんどもなんども言っていてすみません、 もう一度教えてくださるとたすかります・・・

関連するQ&A

  • 横並びのメニューボタンについて

    float:leftでメニューボタンを横並びにしています。 表示を100%にするとうまく並ぶのですが、 100%以上にすると左端に隙間が、 100%未満にすると、ある時点からメニューボタンが2列になってしまいます。 これを回避する方法はあるでしょうか。 <<html>> <body> <div id="wrap"> <img src="image/photo1.jpg"> <div id="navi"> <!-- ナビボタン ここから --> <ul class="menu"> <li><a href="index.html" >ホーム</a></li> <li><a href="page1.html" >ページ1</a></li> <li><a href="page2.html" >ページ2</a></li> <li><a href="page3.html" >ページ3</a></li> <li><a href="page4.html" >ページ4</a></li> <li><a href="page5.html" >ページ5</a></li> </ul> </div> <!-- /navi --> </div> <!-- /wrap --> </body> <<css>> body { text-align: center; background-color:#EEEEEE; font-size: 12px; margin-top: -10px } #wrap{ margin: 0 auto; text-align: left; background-color: #ffffff; width: 752px; border: 1px solid #404040; border-collapse: collapse; padding: 0; } .navi{ width:750px; } ul.menu { margin: -5 0 0 0px; padding :0; list-style-type : none; } ul.menu li { margin:0; float:left; width: 125px; line-height: 30px; } ul.menu li a{ display:block; text-align:center; text-decoration: none; background-image: url(menu1.jpg); background-repeat: no-repeat; color: #ffffff; font-size: 12px; } ul.menu li a:hover{ background-image: url(menu2.jpg); color: #404040; } よろしくお願いします。

    • ベストアンサー
    • HTML
  • コンテンツとメニューのページを同時に、

    メニューのフレームと、コンテンツのフレームを並列表示しているとき、 メニューのボタンで、コンテンツのページを入れ替えること、 <a href="・・・・・・.html" target="・・・・・・・"> メニューのボタンで、メニューのページを入れ替えること、 <a href="・・・・・・.html" > メニューのボタンで、別のページへジャンプすること、 <a href="・・・・・・.html" target="・・・・・・・"> は出来ますが、 メニューのボタンで、コンテンツのページとメニューのページを同時に入れ替えることができますか。 出来る場合は、HTMLを教えていただけませんでしょうか。

    • ベストアンサー
    • HTML
  • ポップアップメニューの作成方法を教えてほしい

    いろいろなサイトを見ながらポップアップメニューを作成しています。 ポップアップメニューのマウスオーバした時に表示されるメニューを表のように枠を入れたいのですがどうしたらいいのかわかりません。 ご教授いただけると大変助かります。 作成しているHTMLは下記になります。自由に変更していいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <!-- TemplateBeginEditable name="doctitle" --> <style type="text/css"> <!-- body,td,th {font-size: small; } --> body {padding: 30px; } /* 全体の文字の色 テキストの下線など*/ ul.menu a { color: #ff6100; text-decoration: none; text-align: center; border-color: #000000; } ul.menu a:link, /* 全体の表の背景の色 */ ul.menu a:visited { background: #ffffff } /* 表全体 マウスオーバー時の背景の色 */ ul.menu a:hover{ background-color: #FF6; } ul.menu a:active { } /* 診療科 セルの変更 */ ul.menu li { float: left; position: relative; margin: 0 ; width: 9em; height: 2em; font-weight: none; line-height: 2em; } ul.menu li a { display: block; width: 9em; height: 2em; text-align: left; border:none; } ul.menu li ul li { float: none; margin: 0; font-weight: normal; border:none; } /* 下層のメニューを不可視に */ ul.menu li ul, ul.menu li ul li ul { display: none; } /* 疑似要素 :hover で子メニューを可視、孫メニューを不可視に 各科のセル 診療科*/ ul.menu li:hover ul { display: block; position: absolute; top: 0; left: 8em; z-index: 200; } * html ul.menu li:hover ul { vertical-align: bottom; /* IE6 で変な隙間が空くのでその対策 */ } ul.menu li:hover ul li ul { display: none; } /* 疑似要素 :hover で孫メニューを可視に */ ul.menu li ul li:hover ul { display: block; position: absolute; top: 0; left: 8em; z-index: 200; } </style></head> <table width="208" border="0" cellspacing="0" cellpadding="0" background=""> <tr> <td colspan="2" bgcolor="#FFFFFF"><ul class="menu"> <li><a href="#">■診療科</a> <ul><li style="display:inline"> <a href="program/02gairai/naika02.html" target="_parent">内科</a></li> <li style="display:inline"> <a href="program/02gairai/sannfu02.html" target="_parent">産婦人科</a></li> <li style="display:inline"> <a href="program/02gairai/masui02.html" target="_parent">麻酔科</a></li> <ul> <li style="display:inline"> <a href="program/02gairai/geka02.html" target="_parent">外科</a></li> <li style="display:inline"> <a href="program/02gairai/hifuka02.html" target="_parent">皮膚科</a></li> <li style="display:inline"> <a href="program/02gairai/sikakoukuu02.html" target="_parent">歯科口腔外科</a></li> <ul><li style="display:inline"> <a href="program/02gairai/seikei02.html" target="_parent">整形外科</a></li> <li style="display:inline"> <a href="program/02gairai/ganka02.html" target="_parent">眼科</a></li> <li style="display:inline"> <a href="program/02gairai/sinkei02.html" target="_parent">神経内科</a></li> <ul><li style="display:inline"> <a href="program/02gairai/nousinkei02.html" target="_parent">脳神経外科</a></li> <li style="display:inline"> <a href="program/02gairai/jibiinkouka02.html" target="_parent">耳鼻咽喉科</a></li> <li style="display:inline"> <a href="program/02gairai/housya02.html" target="_parent">放射線科</a></li> <ul><li style="display:inline"> <a href="program/02gairai/syounika02.html" target="_parent">小児科</a></li> <li style="display:inline"> <a href="program/02gairai/hinyou02.html" target="_parent">泌尿器科</a></li> <li style="display:inline"><a href="program/02gairai.htm" target="_parent">診療部</a></li> </ul> </ul> </ul> </ul> </ul> </li> </ul></td> </tr> 長くなりましたがどうぞよろしくお願いいたします。

    • 締切済み
    • CSS
  • メニューボタンの背景が表示しない

    cssでメニューボタンの背景をhoverで変更しようと思っています。 が、最初からHP上にメニューボタンが表示されません。 たびたびHPを作っていますが、今回表示されない原因がわからず、 非常に困っています。 《html》 <body id="top"> <!-- ヘッダーここから --> <div id="wrap"> <div id="header"> <img src="./images/title.png"> </div> <!-- ナビボタンここから --> <div id="navi"> <ul id="menu"> <li><a href="top.html" >TOP</a></li> <li><a href="menu.html" >メニュー&料金</a></li> <li><a href="access.html" >アクセス</a></li> <li><a href="question.html" >お問い合わせ</a></li> </ul> </div> <!-- コンテンツここから --> <div id="contents"> 以下 省略 《css》 #navi{ width: 750px; height:45px; margin: 0px; } #menu { margin: 0; padding :0; list-style-type : none; } #menu li { margin:0; float:left; } #menu li a{ display:block; width: 150px height: 43px; text-align:center; text-decoration: none; background-image: url(images/navi_b.png); background-repeat: no-repeat; } どこが間違っているのか指摘していただけないでしょうか。

    • ベストアンサー
    • HTML
  • リスト項目でのメニュー作成

    リスト項目を使いcssでメニューを作成しているのですが、下記のような記述でメニュー1の部分だけ違う色を指定したい場合、どのように記述すればよいのでしょうか? <html lang="ja"> <head> <style type="text/css"> ul#menu li { list-style-type: none; float: left; padding: 0px; line-height: 22px;font-size:14px;width: 110px; margin-left: 2px;} ul#menu li a { text-decoration: none; display: block; / padding: 5px; color: #black; background-color: #8BCFDE } ul#menu li a:hover { background-color: #ff9999; color: #black; } </style> </head> <body> <ul id="menu"> <li><a href="#/">メニュー1</a></li> <li><a href="#/">メニュー2</a></li> <li><a href="#/">メニュー3</a></li> <li><a href="#/">メニュー4</a></li> <li><a href="#/">メニュー5</a></li> <li><a href="#/">メニュー6</a></li> </ul> </body> </html>

    • ベストアンサー
    • HTML
  • firefoxでのリストについて

    今までIEばかりでしたので、firefoxで表示した際のデザインの崩れについてなかなか理解できずにいます。 詳しい方にアドバイスを頂ければ幸いです。 divで1つ、大きな枠を作り、その中に2つのDIVを横に並べています。 左側のみwidthの指定をし、そのなかにリストで作ったメニューを入れています。問題はこのメニューで、メニューの下に画像や文字などを普通に続けて書きたいのですが、メニューの後に書いたものが、メニューの後ろ側に表示されてしまいます。 分かりにくいと思いますが、要するに、メニューと重なってしまう状態です。メニューの後に書いた文章が、メニューが存在しない場合の位置に表示され、その上にメニューが覆いかぶさるように重なって表示されています。 どうすればいいのでしょうか? 下記がCSSとHTMLです。 CSSーーーーーーーーーーー #big{ margin:auto; padding: 0px; background-color:#ff0000; WIDTH: 800px; height: 100%; } #left{ FLOAT: left; WIDTH: 180px; height: 100%; margin-right: 50px; margin-left: 0px; text-align: center; background-color: #FFFFFF; } #center{ text-align: left; background-color: #ffffff; } ul.menu { margin-left: 0px; margin-right: 0px; margin-top: 5px; margin-bottom: 5px; padding: 0px; height: 40px; width: 150px; /* 幅 */ background-color: #ffffff; list-style-type: none; } ul.menu li { margin: 0; padding: 0; font-size: 15px; /* 文字サイズ */ font-weight: bold; } ul.menu li a { padding: 11px 20px; display: block; color: #000099;      background-image: url(menubotan.gif); text-decoration: none; } ul.menu li a:hover { color: #d63300; background-image: url(menubotan2.gif); } htmlーーーーーーーーーーー <div id="big"> <div id="left"> <UL class="menu"> <li><a href="index.html">TOPページ</a></li> <li><A href="mainpage.html" target="_self">メインページ</A></li> <li><A href="matsuri.html" target="_self">祭りについて</A></li> <li><A href="sannka.html" target="_self">参加申し込み</A></li> <li><A href="kanbu.html" target="_self">幹部紹介</A></li> <li><A href="syozaiti.html" target="_self">所在地</A></li> <li><A href="pics.html" target="_self">動画・写真館</A></li> <li><A href="bbs.html" target="_self">掲示板</A></li> <li><A href="links.html" target="_self">リンク集</A></li> <li><A href="otoiawase.html" target="_self">お問い合わせ</A></li> </ul> <br> ここに書いた文字をメニューに続けて表示させたいのです。 </div> <div id="center"> メイン内容 </div> </div>

    • ベストアンサー
    • HTML
  • CSSでポップアップメニューを作成したがIEだけメニューが表示されません。

    下記のようなCSSでポップアップメニューを作成したのですが IEだけポップアップメニューが表示されませんでした。 IEでもポップアップメニューが表示されるようにするには どのようにすればよいのでしょうか?(JavaScriptは未使用で作成) <html> <head> <style type="text/css"> #menu { position: relative; width: 102px; height: 22px; } #menu li { list-style-type: none; float: left; } #menu li a { color: gray; width: 100px; height:20px; text-decoration: none; text-align: center; border: 1px solid gray; display: block; } #menu li a:hover { background-color:#FFFFCC; } #menu ul li ul { display: none; } #menu ul li:hover ul { display:block; position:absolute; top: 22px; left: 0; } </style> </head> <body> <div id="menu"> <ul> <li> <a href="#">home</a> <ul> <li><a href="#">first</a></li> <li><a href="#">second</a></li> <li><a href="#">third</a></li> </ul> </li> </ul> </div> </body> </html>

    • ベストアンサー
    • HTML
  • フロートするとメニューが落ちる IE6で不可

    以下のようなhtmlを作成し、CSSを適用しました。 メニューを作成する為に、120×50のメニューボタンを横並びにする為、 フロートを使ったのですが、 FireFoxでは正常に表示されるのですが、 IE6だとメニューが一文字ずつ、落ちて表示されてしまいます。 どうすればいいのでしょうか。 ■html <div id="wrapper"> <div id="header"> <ul> <li><a href="#">a</a></li> <li><a href="#">b</a></li> <li><a href="#">c</a></li> <li><a href="#">d</a></li> <li><a href="#">e</a></li> </ul> </div> <div id="left"> </div> <div id="right"> </div> <div id="footer"> </div> </div> ■CSS body { text-align:center; font-size:small; } #wrapper { text-align:left; margin:0 auto; width:600px; } #header { } #left { float:left; width:200px; } #right { float:left; width:400px; } #footer { clear:both; } #header li a { display:block; float:left; width:120px; height:50px; }

    • ベストアンサー
    • HTML
  • <li>タグでメニューを作った場合

    横並びでサブメニューがあるメニューを以下の様に作成しました HTMLは <ul> <li><a href="">トップページ</a></li> <li><a href="">メニュー2</a> <ul class="sub-menu"> <li><a href="">メニュー2のサブメニュー</a></li> <li><a href="">メニュー2の長いんだよサブメニュー</a></li> <li><a href="">メニュー2のサブメニュー</a></li> </ul> </li> <li><a href="">メニュー3</a></li> <li><a href="">メニュー4</a></li> <li><a href="">メニュー5</a></li> <li><a href="">メニュー6</a></li> <li><a href="">メニュー7</a></li> </ul> CSSは ul{ float:right; font-size:95%; padding-bottom:20px; } ul ul{padding-bottom:0;width:auto;} ul li{ display:inline-block; vertical-align:text-top; text-align:left; padding:5px 0; margin-left:15px; background:url(../images/arrow.png) no-repeat 0 9px; } ul li a{ display:block; padding:0 0 0 12px; overflow:hidden; } ul li li{ display:block; padding:0; margin-left:5px; background:url(../images/arrow2.png) no-repeat 0 6px; } これですと添付画像の左のようになってしまいます。 サブメニューの長さに関係なく、右のようにメニューを詰めることは可能ですか

    • ベストアンサー
    • CSS
  • 垂直型のドロップダウンメニューの作成方法について

    http://jsajax.com/Articles/jQueryDropDownMenu2/1088を参考に下記のソースで垂直型のドロップダウンメニューを作成しました(動作はhttp://jsajax.com/Articles/jQueryDropDownMenu2/1088で「このサンプルを編集して試してみる」をクリックし、画面上部のテキストエリアに下記のソースを貼り付け「編集後クリックして実行!」で試す事が出来ます。 また、ローカルで試す場合は、ヘッダ部分に書かれているjsやcssをhttp://jdsharp.us/jQuery/plugins/jdMenu/やhttp://jquery.com/からダウンロードし、パスを調整していただければ大丈夫です)。 【ソース】 <!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-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>jQuery - DropDown Menu - Vertical (jdMenu)</title> <link href="jQuery/jdMenu/jquery.jdMenu.css" rel="stylesheet" type="text/css" /> <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.dimensions.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.positionBy.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.bgiframe.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.jdMenu.js" type="text/javascript"></script> </head> <body> <div> <ul class="jd_menu jd_menu_vertical"> <li class="accessible"><a href="#" class="accessible">第1 ≫</a> <ul> <li><a href="#">第2-1 ≫</a> <ul> <li><a href="#" target="_blank">第2-1-1</a></li> <li><a href="#" target="_blank">第2-1-2</a></li> <li><a href="#" target="_blank">第2-1-3</a></li> <li><a href="#" target="_blank">第2-1-4</a></li> </ul> </li> <li><a href="#">第2-2 ≫</a> <ul> <li><a href="#" target="_blank">第2-2-1</a></li> <li><a href="#" target="_blank">第2-2-2</a></li> <li><a href="#" target="_blank">第2-2-3</a></li> <li><a href="#" target="_blank">第2-2-4</a></li> </ul> </li> <li><a href="#">第2-3 ≫</a> <ul> <li><a href="#" target="_blank">第2-3-1</a></li> <li><a href="#" target="_blank">第2-3-2</a></li> <li><a href="#" target="_blank">第2-3-3</a></li> <li><a href="#" target="_blank">第2-3-4</a></li> </ul> </li> <li><a href="#">第2-4 ≫</a> <ul> <li><a href="#" target="_blank">第2-4-1</a></li> <li><a href="#" target="_blank">第2-4-2</a></li> <li><a href="#" target="_blank">第2-4-3</a></li> <li><a href="#" target="_blank">第2-4-4</a></li> </ul> </li> </ul> </li> </ul> </div> </body> </html> ただし、実際に作ってみた所、今私が作っているサイトでは第二階層、第三階層の数が多く、 第一階層(上記ソースの「第1」)をマウスオーバーした際、すべての内容が表示されませんでした。 その為、下記のようなこと(縦だけではなく、横のスペースも有効に使いたい)を行いたいと思ったのですが、どのように記述すれば良いか分からなかったため、アドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 【第二階層(第三階層)の現在のイメージ】 第2-1 第2-2 第2-3 第2-4 【第二階層(第三階層)のやりたいイメージ】 第2-1 第2-2 第2-3 第2-4 以上、よろしくお願いします。

専門家に質問してみよう