2012年7月20日金曜日
僕も最近始めて知ったのですがCSSでレイヤーが出来るらしいので
色々googleで検索してみました。
まー難しいのかなと思いなんとなくやると簡単に出来てしまったのです。
今回紹介する方法の画像は、200pxでの画像を使ってみました。
今回あくまでも紹介=試しなので適当に200pxの縦横の画像を作ってください適当でいいので
入力が完了したら次は、CSSの設定です。
基本ルールは、(絶対差)です。
これでプレビューしてみてください。
きっと完成するはずですが・・・・・・・・・・
綺麗に重なって1にしか見えませんよね^^;
その時もCSSで設定しよう^^
最初から半透明画像使ったら早いのですが
作るのがめんどくさいのでCSSでやりましょう^^;
色々googleで検索してみました。
まー難しいのかなと思いなんとなくやると簡単に出来てしまったのです。
今回紹介する方法の画像は、200pxでの画像を使ってみました。
今回あくまでも紹介=試しなので適当に200pxの縦横の画像を作ってください適当でいいので
まーこんな感じで僕は、分かり安い画像を用意しました。
皆さんも適当に作ってください。
さて次は、HTMLを入力します。
<body>
<div class="a"><img src="aquamig/a.png" border="0" alt="a.png(1819 byte)" width="202" height="200" /></div>
<div class="b"><img src="aquamig/b.png" border="0" alt="b.png(1829 byte)" width="202" height="200" /></div>
</body>
入力が完了したら次は、CSSの設定です。
基本ルールは、(絶対差)です。
<style type="text/css">
div { position:absolute; }
.a{ z-index: 2; height: 100px; width: 100px; }
.b{ z-index: 1; height: 200px; width: 200px; }
</style>
div { position:absolute; }
.a{ z-index: 2; height: 100px; width: 100px; }
.b{ z-index: 1; height: 200px; width: 200px; }
</style>
これでプレビューしてみてください。
きっと完成するはずですが・・・・・・・・・・
綺麗に重なって1にしか見えませんよね^^;
その時もCSSで設定しよう^^
最初から半透明画像使ったら早いのですが
作るのがめんどくさいのでCSSでやりましょう^^;
.b{ z-index: 1; top: 100px; left: 100px; height: 200px; width: 200px; }
BのCSSを書き換えてください。
これでずれますよね
まーそんな感じでCSSでレイヤーが作る事が可能だと実証しました。
z-index: 2;
これがレイヤーです。2の部分がレイヤー2となります。
例で見るとレイヤーBが2ですね
まー大体やれば分かったと思うので後は、自由に検索して僕より説明の
うまい記事をみつけてください。
