- ベストアンサー
ウェッブ・ブラウザのレイヤー機能
ウェッブ・ブラウザのレイヤー機能について教えてください。最新版の各ブラウザ、IE、Safari、Firefox、Google Chromeでレイヤー機能はサポートされているでしょうか？また、サポートされている場合には、その利用方法や互換性はどうなっていますか？
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
レイヤーは、NetscapeNavigator4用HTML以外、HTML4.01を含め文法上は存在しません。したがって、すべてのブラウザは対応していないと考えて良いでしょう。 そもそも、HTMLにプレゼンテーション用の要素や属性を含めること自体、HTML4.01以降否定され続けてきました。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 推奨しない要素・属性とは、新しい枠組みができたことによって、陳腐化したものを指す。推奨しない要素は、リファレンスマニュアルの各所で定義し、推奨しないことを明記する。推奨しない要素は、HTMLの将来のバージョンでは廃止になる可能性がある。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Conformance: requirements and recommendations (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )］より レイヤーのようなプレゼンテーションに関わる部分は、すべてスタイルシートで行います。すなわち、positionプロパティとz-indexプロパティで自在に一屋順番を重ね合わせることになります。 ウェブ標準のHTML4.01strict+CSS2.1です。 タブは＿に置換してあります。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み <!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{z-index:0;background-color:silver;width:80%;margin:0 auto;position:relative;height:500px;} div.section div{z-index:3;background-color:red;width:60%;height:150px;margin:0 auto;position:absolute;top:100px;left:50px;} div.section div+div{background-color:green;top:150px;left:100px;z-index:2;} div.section div+div+div{background-color:yellow;top:200px;left:150px;z-index:4;} div.section div+div+div+div{background-color:aqua;top:250px;left:200px;z-index:6;} div.section div+div+div+div+div{background-color:lime;top:300px;left:250px;z-index:3} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>これが一番下</p> ＿＿<div> ＿＿＿<h2>図１(赤)</h2> ＿＿</div> ＿＿<div> ＿＿＿<h2>図２(緑)</h2> ＿＿</div> ＿＿<div> ＿＿＿<h2>図３(黄色)</h2> ＿＿</div> ＿＿<div> ＿＿＿<h2>図４(水色)</h2> ＿＿</div> ＿＿<div> ＿＿＿<h2>図５(ライム)</h2> ＿＿</div> ＿</div> </body> </html>
その他の回答 (3)
- hitomura
- ベストアンサー率48% (325/664)
<html> <head> <style> #whole { background-color:#99ffff; } </style> </head> <body> <div id="whole"> <div id="section1"> おそらくあなたがやりたいことはこの様なことではないでしょうか。ユーザーが指定したエリアのvisibilityをhiddenに設定すれば「上から背景と同様の色をかぶせ」る必要はありません。試しにこの回答をコピペしてHTMLファイルとして保存し、ブラウザで開いてみてください。 </div> <div id="section2" style="visibility:hidden"> この段落の文章は表示されませんが、文章が収まる分の領域は確保されたままです。<br /> また、このときの背景はvisibilityをhiddenに設定していない場合と変わっていません。 </div> <div id="section3"> 「ユーザが指定した位置」を検知しvisibilityの設定を変更するにはJavaScriptを使用しますが、とりあえずこれがあなたがイメージした表示結果にあっているかご確認ねがいます。 </div> </div> </body> </html>
お礼
ご回答ありがとうございます。先ほど実際に試してみました。
- hitomura
- ベストアンサー率48% (325/664)
> 現行ベストの方法がわかれば一番ありがたいです。 と言われても、う～ん……質問文に書かれたことだけでは何をやりたいのかがわかりません。 とりあえず、現在のWebページ記述の流れは、 ・文書の構造だけを考慮してHTMLを書く。 ・その文書に対してCSSで各要素の表示方法を指定する。 ・HTMLやCSSの内容をユーザーの操作等によって（ページの遷移を伴わずに）変更する必要がある場合はJavaScriptを使用する。このときブラウザ間の仕様の違いを吸収するためのライブラリとしてJQueryがよく使われる。 となっています。 何がやりたいのかが分かれば上記のどの段階でどのようにすればいいかがアドバイスできるのですが……。
補足
回答ありがとうございます。 具体的には、テキストで埋まったページをエリア分けしておき、ユーザが指定した位置のエリアのみ上から背景と同様の色をかぶせてテキストを隠してしまうという機能をつけたいと考えています。
- hitomura
- ベストアンサー率48% (325/664)
レイヤー機能……ですか? つまり、<layer>タグを使ったページデザインをお考えでしょうか? でしたら、別の手段を考えることをお勧めします。 <layer>タグはNetscapeの独自拡張で、しかもNetscape 6以降はサポートされていません。 また、HTML5では廃止される予定です。 これには、HTMLには文書の構造「だけ」を担当させ、文書の見た目はCSSが担当するという役割分担を行う方向で整理がされてきているからです。
補足
これから開発するサイトなので、特に、<layer>タグにはこだわってなく、現行ベストの方法がわかれば一番ありがたいです。＜質問者より補足＞
お礼
ご回答ありがとうございました。これを機に、HTML、CSS、JavaScript を何年か振りに勉強し直すつもりです。助かりました。