• ベストアンサー

htmlのframeset について

htmlの framesetを使い、画面を2つに分けています。 左側にメニューを置き、 メニューをクリックした時に、右のフレームが変わります。 その時メニュー項目に色をつけるのは出来ましたが、 他のメニュー項目を押した時に、色が元に戻るようにしたいです。 つまり、今どこの項目が表示されているのか、認識しやすいように、 選択したメニュー項目と右の画面が同じ色を保持するようにしたいのです。 framesetは推奨されないときいたことがありますが、 表示上、どうしても必要です。 ご存知のかたがおられましたら教えて頂けませんでしょうか。 どうか、よろしくお願い致します。

  • HTML
  • 回答数3
  • ありがとう数0

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

＞AとBはファイル名なのでしょうか。 　えっ？どちらの？ a[href="B.html#A"]{background-color:yellow;} 　　B.html↑　　　↑#A 　　ファイル名　　　ページ内ターゲット 　単純にひとつのファイルで済ましているだけです。別ファイルでも構いません。 　ご存知だと思いますが、これは要素セレクタでhref属性の値がB.html#Aであるa要素と言う意味です。[class~="main"]だとclassセレクタとまったく同じで半角スペースで区切られたclass属性の値リストのひとつが一致、[lang|=en]だと-で区切られた値のリストのひとつに一致。 a[href="B.html#A"]{background-color:yellow;} 　詳細度は、この場合0011です。 とりあえず、No.1の回答どおりに試すこと。 　framesetのDTDはframesetで、A.htmlのDTDはtransitinal、B.htmlはstrictになっています。 　

hatokamome
質問者

補足

ありがとうございます。 理解出来ました。 freamesetでやりたいのは、 使わないと、 メニューを押した時に、スクロールで見えなくなるからです。 なのでframesetを使いたいのです。 しかし、推奨されないといろいろな所で書かれています。 印刷、検索エンジンなどいろいろ問題があるのですね。 拡張性を考えると、使わない方がいいということですね。 とても参考になりました。 framesetを他の方法で実現出来ませんでしょうか。 質問が変わって、 すみません。

すると、全ての回答が全文表示されます。

その他の回答 (2)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

どこにいるかわかるようにしたけりゃ a[href="B.html#A"]:hover{background-color:yellow;} a[href="B.html#B"]:hover{background-color:aqua;} a[href="B.html#C"]:hover{background-color:silver;} を a[href="B.html#A"]{background-color:yellow;} a[href="B.html#B"]{background-color:aqua;} a[href="B.html#C"]{background-color:silver;} のほうが良いでしょう。嫌でもわかる。frameを使わなきゃもっと簡単なのにね。

hatokamome
質問者

補足

ご回答ありがとうございます。 すみませんが、 AとBはファイル名なのでしょうか。 a[href="B.html#A"]{background-color:yellow;} Bのリンクをクリックすると、Aのメニューだけ黄色になるのでしょうか。 やりたいのは、 項目が排他することです。 一つが選択され、色がつくと、他はリセットされることです。 プログラムなら簡単にできるのですが。。。

すると、全ての回答が全文表示されます。
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

:visitedの色を:linkとおなじにすればよいです。 　ただし、これはユーザーに訪問済みであることを知らせることを示すためでユーザービリティ上は好ましくありません。よって色を少し変えればよいでしょう。 a:link{color:blue;} a:visited{color:navy;} a:hover{color:red;} a:active{color:yellow;} とか・・ 　framesetが表示上、必要と言うことはないはずです。もしそうなら廃止されない。 　１５年近くこの世界でHTML、仕事で書いてますが必要な場面に遭遇したことないです。 　なにせ1999年のHTML4.01の勧告以来否定されているし、そもそもXHTML1.1やHTML5では存在しません。不必要な上にあまりに問題が多いから・・。私もここ１０数年使用していません。 何年も使ってないので忘れてますが、たぶん以下でよいはず 　⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) 　でチェック済み ★タブは＿で置換してあるので戻すこと [frameset] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- --> ＿</style> </head> <FRAMESET cols="20%, 80%"> ＿<FRAME src="A.html" name="menue" title="メニュー"> ＿<FRAME src="B.html" name="main" title="メイン"> ＿<NOFRAMES> <body> ＿＿<p>このフレーム設定文書は、次のものを含む。</p> ＿＿<ul> ＿＿＿ <LI><A href="A.html">目次</A></li> ＿＿＿ <LI><A href="B.html">メイン</A></li> ＿＿</ul> </body> ＿</NOFRAMES> </FRAMESET> </html> [A.html] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- a:link{color:blue;} a:visited{color:navy;} a:hover{color:red;} a:active{color:yellow;} a[href="B.html#A"]:hover{background-color:yellow;} a[href="B.html#B"]:hover{background-color:aqua;} a[href="B.html#C"]:hover{background-color:silver;} --> ＿</style> </head> <body> ＿<h1>タイトル</h1> ＿<ol> ＿＿<li><a href="B.html#A" target="main">セクション1</a></li> ＿＿<li><a href="B.html#B" target="main">セクション2</a></li> ＿＿<li><a href="B.html#C" target="main">セクション3</a></li> ＿</ol> </body> </html> [B.html] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- div.section{height:600px;background-color:yellow;} div.section+div.section{background-color:aqua;} div.section+div.section+div.section{background-color:silver;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section" id="A"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿</div> ＿<div class="section" id="B"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿</div> ＿<div class="section" id="C"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

注目のQ&A

カテゴリ

OKWAVE コラム

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

職業から探して質問する
質問する