• ベストアンサー

HTMLのレイヤーとは?

 別の質問で、レイヤーを重ねてみてはどうか、という回答を頂いたことがあります。レイヤーとは何ですか?  あるサイトで、画像の上に画像(周りを透過させたgifアニメ)を見ました。大変綺麗でした。また、その上に重ねられたgif画像は枠線を表示したテーブルの、その枠線の上まではみ出ていました。  どうやっているのだろうと思いソースを見たら <IMG SRC="上のgifアニメ" ALIGN="MIDDLE" NATURALSIZEFLAG="3"></div> <IMG SRC="下の画像" ALIGN="BOTTOM" NATURALSIZEFLAG="2">  とありました。CSSには #layer { position: absolute;  の次にtop,left,width,heightvisibilityの設定がしてありました。  同じように画像を重ねる方法をタグ辞典で探したら、positionとz-indexで指定するよう書いてあり、指定する項目もよく似ていますがlayerの文字はありません。  layerとはどのようなタグでしょうか?

  • Yusura
  • お礼率52% (563/1079)
  • CSS
  • 回答数2
  • ありがとう数0

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

  • ベストアンサー
  • elthy
  • ベストアンサー率24% (124/500)
回答No.1

<LAYER>というタグ自体もあるんですがNetscape専用なので、 もう「滅んだタグ」といっていいでしょう、使わないほうがいいです。 ただレイヤーという考え方自体はちゃんとIEにもあります。 それは書き方はYusuraさんの書かれたものなのでよくご存知そうですね。 レイヤーのイメージとしては透明なOHPのシートに絵を書き、 それを順番に重ね合わせたようにホームページを表示すると言えば 感覚的にわかりやすいかな?と思います。

参考URL:
http://tohoho.wakusei.ne.jp/html/layer.htm
Yusura
質問者

補足

 さっそくの回答、ありがとうございます。  Netscape専用のタグだったんですか!!確かに私の持っている別の本では、ネットスケープ4のみとなっています。  レイヤーは、フォトレタッチソフトでもHTMLエディタでも概念そのものは変わらないんですね。仰る意味はよくわかります。  今朝、ずっと質問にも書いたpositionタグを試していて、うまく思い通りに表示できるようになりました。IE5.5Netscape6.2で問題がないのですが、レイヤータグとはなんだろかと思っていたところだったんです。ただ、やはりNN4.75では上手くいきませんね…。  回答ありがとうございました。これからも精進致します(*^^*)。

その他の回答 (1)

  • imogasi
  • ベストアンサー率27% (4737/17068)
回答No.2

何か別の意味があったなと思い、 レイヤー(LAYER)という用語を調べて見ました。 平面イメージで上下関係の考えられる、「層」になっているもの。 各層が協力しあって1つのことを成し遂げるが、別々にすることにより、相互不干渉のため(あるいは不干渉にして)単純化が行えるメリットあり。 (1)画像関係のもの    画像を平面各層に別々に作成し重ね合わせる。別々   に作成すると単純化できる。重ね合わせは比較的容   易である。   A.CG分野   B.JavaScript(本件はこれの関連)   C.PhotoShopなど画像加工 (2)通信分野で(構成や役割分担が明確になる)   OSIの7レイヤープロトコル(7層モデル)   TCP/IPの5層モデル   IDS (3)各業界にはもっと別の意味での用語がありそう。

Yusura
質問者

補足

 回答ありがとうございます。  レイヤーの言葉の意味まで調べてくださったことに、お礼を申し上げます(*^^*)。  言葉としては、私はフォトショップで覚えました。やっぱり有名になったのもこのフォトレタッチソフトからなんでしょうか?特にパソコンの発達というデジタル化が進んで本領発揮という感のある言葉です。  回答ありがとうございました。    

関連するQ&A

  • HTMLとCSSを教えてください。

    画像を中央揃えしたいのですが、 <img src="xxx.jpg"> img{ text-align:center; } とやったのですが、中央揃えできないのですがなぜでしょうか? もうひとつ質問させてください。図書館の参考書に書かれている内容で、「今はtext-align:center;よりposition:absolute;top:105px;left:50px;を使う事が多くなっています」と書いてありました。ほかにもサイトのソースをみると、absoluteを使用しているサイトを良く見かけますが、positionを使ってデザインすると画面サイズとか、見るブラウザによってデザインが崩れてしまわないでしょうか?そうなるとやはりtext-align:center;を使うのがいいのではないでしょうか? どれも初歩的ですみませんが、よろしくおねがいします。

    • ベストアンサー
    • HTML
  • ウィンドウの縮小に合わせて変化させるには?

    WEBデザインの質問です。 添付画像のようなものを作りたいのですが、ウインドウの幅を小さくした時に、 自動的にそれに合わせて画像も小さくなってもらいたのですができません。 どのようにhtml,cssを書いたらいいですか? 画像4の上に、画像1,2,3があって、背景、画像1,2,3がメニュー(後で画像にリンクを追加したい)のようなイメージです。 そこで今、画像4は縮小に合わせて一緒に縮んでくれるのですが、 画像1,2,3は色々試してみたのですが変化がありません。 html↓ <body> <article> <div class="relative"> <img src="/../../画像4.gif" class="img-responsive" alt="" /> <img src="/../../画像1.gif" alt="" class="absolute" /> <img src="/../../画像2.gif" alt="" class="absolute2" /> <img src="/../../画像3.gif" alt="" class="absolute3" /> </div> </article> </body> CSS↓ @charset "utf-8"; .img-responsive { display: block; max-width: 100%; height: auto; } .relative { position: relative; } .absolute { position: absolute; top: 515px; left: 185px; } .absolute2 { position: absolute; top: 515px; left: 535px; } .absolute3 { position: absolute; top: 515px; left: 888px; } 初めてhtmlを書いているので、変な質問をしていたらすみません。 お早めな回答をいただけると助かります。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • 画像の上に文字を表示

    スタイルシートなどの方法で、画像の上に文字を表示させることは可能でしょうか。 <IMG SRC=1.jpg ALIGN=BOTTOM BORDER=0> <IMG SRC=2.jpg ALIGN=BOTTOM BORDER=0> <IMG SRC=3.jpg ALIGN=BOTTOM BORDER=0> <IMG SRC=4.jpg ALIGN=BOTTOM BORDER=0> ・・・と延々と並んでいる画像の上に重ねてそれぞれの画像のタイトルなどを表示できればうれしい。 #マウスをのせて表示は除外。

    • ベストアンサー
    • CSS
  • ロールオーバー画像の枠線を消したい

    初めてホームページ作成中の超初心者です。 ロールオーバーで、下記のタグで表示させたのですが、画像の枠線が出てしまいました。 普通に<img src="img1.gif">と書くと出ない画像なんですが・・・ リンク画像の枠線を消すのと同じ要領でborder="0"とも書き加えてみましたが、(4ヶ所とも)今度は何も表示されなくなってしまいました。 <問題のタグのひな形> <a href="http://www-------"onmouseover = "document.bt.src = 'img1.gif'" onmouseout = "document.bt.src = 'img2.gif'"onclick = "document.bt.src = 'img3.gif'"><img src = "img2.gif" name="bt"></a> どうぞ宜しくお願いします!

  • センタリングのHTMLの挿入場所

    お世話になっております。 前回の質問の追加をしようとしたのですが、うまくできず、新たにスレッドを立てました。すみません。 以下のHTMLは横並びに写真を載せたもの(数行あります)です。(上部に文章を載せるための式がありますが、カットしています。)このプログラムのどこにセンタリングの式を入れたらいいのか、私の知識ではわかりませんでした。またご教示もらえると助かります。 よろしくお願いします。 </DIV> <DIV style="top : 1313px; </DIV> <DIV style="top : 1473px;left : 327px; position : absolute; z-index : 3; " id="Layer8"><IMG src="button2.gif" width="81" height="35" border="0" alt="Back"></DIV> <DIV style="top : 1060px;left : 21px; position : absolute; z-index : 8; width : 698px; height : 123px; " id="Layer6">&nbsp;  <IMG src="DSC_19711.jpg" border="0" width="160" height="106"> <IMG src="DSC_20401.jpg" border="0" width="160" height="106"> <IMG src="DSC_20541.jpg" border="0" width="160" height="106"> <IMG src="DSC_21231.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 883px;left : 15px; position : absolute; z-index : 7; width : 649px; height : 165px; " id="Layer5">&nbsp;   <IMG src="DSC_19311.jpg" border="0" width="160" height="106"> <IMG src="DSC_19381.jpg" border="0" width="160" height="106"> <IMG src="DSC_19411.jpg" border="0" width="99" height="149"> <IMG src="DSC_19631.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 572px;left : -3px; position : absolute; z-index : 5; " id="Layer3"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;">&nbsp;   <IMG src="DSC_17481.jpg" border="0" width="160" height="106"> <IMG src="DSC_18051.jpg" border="0" width="160" height="106"> <IMG src="DSC_18151.jpg" border="0" width="160" height="106"> <IMG src="DSC_18351.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <DIV style="top : 729px;left : 12px; position : absolute; z-index : 6; " id="Layer4"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;">&nbsp;<IMG src="DSC_18421.jpg" border="0" width="160" height="106"> <IMG src="DSC_18641.jpg" border="0" width="160" height="106"> <IMG src="DSC_18941.jpg" border="0" width="160" height="106"> <IMG src="DSC_19201.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> </BODY>

  • HTMLの書き直す

    HTMLファイルにある一部分のリンクをハイライトしたいですが(例えば:色変わりなど)、perlでどうしたらいけますか?よろしくお願いします。 例えば:<IMG ALT="dot" WIDTH="15" HEIGHT="18" ALIGN="bottom" SRC="/images/sky-dot.gif"><font size="2"> <a href="interesting/">面白いページ</a></font><br><br> から <IMG ALT="dot" WIDTH="15" HEIGHT="18" ALIGN="bottom" SRC="/images/sky-dot.gif"> <font size="2" color=#666666><a href="interesting/">面白いページ</a></font><br><br>

  • HTML。携帯での画像配置

    皆さんお世話になります。 今、携帯用のホームページを作っているのですが、 携帯で見たときに画像が真ん中にくるようにしたいのですが、 どこをどう直せばいいのかが解らないのです・・・ よろしくお願いします。 <BODY> <DIV style="top : -3px;left : -2px; position : absolute; z-index : 1; visibility : visible; " id="Layer1"> <DIV> <TABLE border="1" cellspacing="0" cellpadding="2" id="_HPB_TABLE_1_A_070408180231" height="570" class="hpb-cnt-tb1"> <TBODY> <TR valign="middle" align="center"> <TH align="center" height="343" width="200" valign="top" class="hpb-cnt-tb-th1"><IMG src="i-g-2.gif" width="200" height="61" border="0" align="middle"><BR> <P align="center">〒100-000<BR> 東京都千代田区<BR> 5-7-16布引ビル1F<BR> <BR> Tel (03)***-***</P> <IMG src="i-g-3.gif" width="200" height="230" border="0"><IMG src="i-g-4.gif" width="200" height="164" border="0"></TH> </TR> </TBODY> </TABLE> </DIV> </DIV> </BODY> </HTML>

  • 画像のNetscapeでの表示

    Netscapeで下記のようにテーブルを組むと画像の表示がされません。 IEではうまく表示してくれるのですが・・・。 <table border='0' cellspacing='0' cellpadding='0' width='100%' height='100%' style='position:absolute;bottom:0px;left:0px;'> <tr> <td><img src="xxx.gif"></td> </tr> </table> Netscapeで使用できないタグなどがふくまれているのでしょうか? Netscapeのバージョンは、7.02です。

  • 同じ<table align="center">を用いていますが、セルの中身の行揃えが代わってしまいます。

    どちらも<table align="center">を用いています。 ですが、タグ1は特にセルの位置を指定せずとも、セルの中身が自動的に左詰めになりますが タグ2のセルの中身は、中央ぞろえになってしまいます。 タグ1のように、<table align="center">を用い、セルを左詰め指定(<align="left">)をせずとも なぜセルの中身が左詰めになるのか分かりません。。。 -------------タグ1------------- <table width="600" border="0" align="center" cellpadding="0" cellspacing="5"> <tr> <td width="10"><img src="img/concept_title.gif" width="10" height="30"></td> <td><img src="img/concept_title01.gif" alt="テキスト" width="127" height="16"></td> </tr> <tr> <td width="10">&nbsp;</td> <td class="t01">テキスト</td> </tr> </table> ------------------------------ -------------タグ2------------- <table width="640" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="3" rowspan="2" valign="top"><img src="image/grade_line.gif" width="3" height="177" /></td> <td width="8" valign="bottom"><img src="image/grade_line30.gif" width="20" height="2" /></td> <td width="368"><img src="image/kisyo/01t.gif" width="368" height="32" /></td> <td align="left" valign="bottom"><img src="image/grade_line_right.gif" width="42" height="2" /></td> </tr> <tr> <td>&nbsp;</td> <td height="145" align="left">テキスト <td rowspan="2"><img src="image/kisyo/01_ph.jpg" alt="井戸" width="200" height="139" /></td> </tr> <tr> <td valign="top"><img src="image/grade_line_bottom02.gif" /></td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> ------------------------------ 初心者的な質問・タグで恐れ入りますが、ご助力頂けますと幸いです。 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • マウスをクリックで画像・・・

    マウスをクリックすると画像が飛び散る素材(?)を頂いてきたのですが、 以下の通りにUPすると「エラー」が出てしまいます。 どこが悪いのか解らないので よろしくお願いします。 <SCRIPT language="JavaScript" src="ht://xxx/xx.js"></SCRIPT> <BODY onload="initMouseEvents()"> <DIV id="sparks"> <DIV id="sDiv0" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/1.gif" width="15" height="16"></DIV> <DIV id="sDiv1" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/2.gif" width="15" height="16"></DIV> <DIV id="sDiv2" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/3.gif" width="15" height="16"></DIV> <DIV id="sDiv3" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i4.gif" width="15" height="16"></DIV> <DIV id="sDiv4" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i5.gif" width="15" height="16"></DIV> <DIV id="sDiv5" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i6.gif" width="15" height="16"></DIV> <DIV id="sDiv6" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/7.gif" width="15" height="16"></DIV> <DIV id="sDiv7" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/8.gif" width="15" height="16"></DIV> <DIV id="sDiv8" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/9.gif" width="15" height="16"></DIV> <DIV id="sDiv9" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/10.gif" width="15" height="16"></DIV> </DIV>

専門家に質問してみよう