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

ウェッブ・ブラウザのレイヤー機能

解決済

  • 質問者：bitojisan
  • 質問日時：
  • 回答数：4件

ウェッブ・ブラウザのレイヤー機能について教えてください。最新版の各ブラウザ、IE、Safari、Firefox、Google Chromeでレイヤー機能はサポートされているでしょうか？また、サポートされている場合には、その利用方法や互換性はどうなっていますか？

通報する

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

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

　レイヤーは、NetscapeNavigator4用HTML以外、HTML4.01を含め文法上は存在しません。

したがって、すべてのブラウザは対応していないと考えて良いでしょう。
　そもそも、HTMLにプレゼンテーション用の要素や属性を含めること自体、HTML4.01以降否定され続けてきました。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
推奨しない要素・属性とは、新しい枠組みができたことによって、陳腐化したものを指す。推奨しない要素は、リファレンスマニュアルの各所で定義し、推奨しないことを明記する。推奨しない要素は、HTMLの将来のバージョンでは廃止になる可能性がある。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Conformance: requirements and recommendations (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

　レイヤーのようなプレゼンテーションに関わる部分は、すべてスタイルシートで行います。すなわち、positionプロパティとz-indexプロパティで自在に一屋順番を重ね合わせることになります。

ウェブ標準のHTML4.01strict+CSS2.1です。
タブは＿に置換してあります。
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み

<!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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございました。これを機に、HTML、CSS、JavaScript を何年か振りに勉強し直すつもりです。助かりました。

通報する
お礼日時：2012/04/03 15:37

No.3

  • 回答者： hitomura
  • 回答日時：

<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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。先ほど実際に試してみました。

通報する
お礼日時：2012/04/03 15:35

No.2

  • 回答者： hitomura
  • 回答日時：

> 現行ベストの方法がわかれば一番ありがたいです。


と言われても、う～ん……質問文に書かれたことだけでは何をやりたいのかがわかりません。

とりあえず、現在のWebページ記述の流れは、
・文書の構造だけを考慮してHTMLを書く。
・その文書に対してCSSで各要素の表示方法を指定する。
・HTMLやCSSの内容をユーザーの操作等によって（ページの遷移を伴わずに）変更する必要がある場合はJavaScriptを使用する。このときブラウザ間の仕様の違いを吸収するためのライブラリとしてJQueryがよく使われる。
となっています。

何がやりたいのかが分かれば上記のどの段階でどのようにすればいいかがアドバイスできるのですが……。

この回答への補足

回答ありがとうございます。
具体的には、テキストで埋まったページをエリア分けしておき、ユーザが指定した位置のエリアのみ上から背景と同様の色をかぶせてテキストを隠してしまうという機能をつけたいと考えています。

補足日時：2012/04/03 02:28
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： hitomura
  • 回答日時：

レイヤー機能……ですか?


つまり、<layer>タグを使ったページデザインをお考えでしょうか?
でしたら、別の手段を考えることをお勧めします。

<layer>タグはNetscapeの独自拡張で、しかもNetscape 6以降はサポートされていません。
また、HTML5では廃止される予定です。
これには、HTMLには文書の構造「だけ」を担当させ、文書の見た目はCSSが担当するという役割分担を行う方向で整理がされてきているからです。

参考URL：http://www.htmq.com/html/layer.shtml

この回答への補足

これから開発するサイトなので、特に、<layer>タグにはこだわってなく、現行ベストの方法がわかれば一番ありがたいです。＜質問者より補足＞

補足日時：2012/04/02 23:40
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

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

Q質問する（無料）

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

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

おすすめ情報