- ベストアンサー
htmlのframeset について
htmlの framesetを使い、画面を2つに分けています。 左側にメニューを置き、 メニューをクリックした時に、右のフレームが変わります。 その時メニュー項目に色をつけるのは出来ましたが、 他のメニュー項目を押した時に、色が元に戻るようにしたいです。 つまり、今どこの項目が表示されているのか、認識しやすいように、 選択したメニュー項目と右の画面が同じ色を保持するようにしたいのです。 framesetは推奨されないときいたことがありますが、 表示上、どうしても必要です。 ご存知のかたがおられましたら教えて頂けませんでしょうか。 どうか、よろしくお願い致します。
- hatokamome
- お礼率44% (246/554)
- HTML
- 回答数3
- ありがとう数0
- みんなの回答 （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になっています。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
どこにいるかわかるようにしたけりゃ 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を使わなきゃもっと簡単なのにね。
補足
ご回答ありがとうございます。 すみませんが、 AとBはファイル名なのでしょうか。 a[href="B.html#A"]{background-color:yellow;} Bのリンクをクリックすると、Aのメニューだけ黄色になるのでしょうか。 やりたいのは、 項目が排他することです。 一つが選択され、色がつくと、他はリセットされることです。 プログラムなら簡単にできるのですが。。。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
: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>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
補足
ありがとうございます。 理解出来ました。 freamesetでやりたいのは、 使わないと、 メニューを押した時に、スクロールで見えなくなるからです。 なのでframesetを使いたいのです。 しかし、推奨されないといろいろな所で書かれています。 印刷、検索エンジンなどいろいろ問題があるのですね。 拡張性を考えると、使わない方がいいということですね。 とても参考になりました。 framesetを他の方法で実現出来ませんでしょうか。 質問が変わって、 すみません。