スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ブログの小技で使うレイヤーとは?

 私のブログの小技でもレイヤー操作をよく使っている。7月11日に投稿した「AとBの間を通り抜けるC 草むらを抜ける虫たちのために」もレイヤーを使っている。ところがレイヤーというのは理解しにくい考え方だ。

 レイヤーを一番簡単に説明するのは、漫画映画の撮影の時に、透明のセル画を重ねて、少しずつずらしながら動物などを移動させて撮影して、動く画像を作るのと同じと考えたらわかりやすい。

 ホームページ作成のためのアプリケーションを使っていて、レイヤーの挿入を実行すると、ソースにDIVタグが挿入される。LAYERというタグもあることはあるが、Netscapeでしか通用しないタグなので、インターネットエクスプローラがほとんどの現状では実際には使えない。

 だったらDIVタグで囲まれたオブジェクトがレイヤーかというと、そうとは限らない。IMGタグの画像オブジェクトもレイヤーとして配置することができる。

 ではレイヤーとは一体何だろうというのを整理してみた。

 まず重ならないからいけないから、オブジェクトの位置を明示的に指示する必要がある。オブジェクトの位置を指示するためには、絶対配置モードにするひつようがある。
 絶対配置はスタイルの中で position : absolute; というする。
 位置の指示は、上からの位置、左からの位置、あるいは右からの位置、下からの位置をふつうはピクセル単位で指示する。
 それぞれから50ピクセルの位置を例に書いてみると、top: 50px; left : 50px; right : 50px; bottom : 50px; と書くことができるが、当然のことながら、上からと下から、右からと左からは同時に記述はしない。

 上下左右からの位置というが、投稿にそのまま位置を記述すると、ブログのタイトルも含めたトップの位置、左の位置からとなり、投稿画面をはみ出して画像が表示されてしまうことがある。
 これを避けるためには、相対配置( position : relative; )のDIV領域を投稿画面の外側にまず作成し、その中に絶対配置( position : absolute; )の領域を記述する。そうすると、投稿画面の中の外側の領域を起点とする絶対配置が可能になる。

 これで絶対配置ができて、複数のオブジェクトを同じ場所に重ねて表示することができるが、背面の画像は見ることができない。
 この問題を解決するのが、順番です。縦横軸がXYなら画面に垂直方向の軸はZと記述するので、重ねる順番はスタイルの中で、z-index の数値で指定する。
 z-index は数値の大きいほうが手前に表示される。
 このz-indexの値をスクリプトで変更することで、表示の順番を動的に変更することができる。
 重ね順のほかに、それぞれのオブジェクトが見える状態か、見えない状態かに変化させることができれば、大きさの違うオブジェクトを、重なりが見えないように一つずつ表示することができる。この表示、非表示をコントロールするスタイルが、 visibility だ。表示するにはスタイルで visibility : visible; とすればいいし、表示しない場合は visibility : hidden; スタイルの中で記述する。動的にスタイルをスクリプトから操作するには、それぞれのオブジェクトにID名を付ける必要がある。


 今一度整理すると、このGooブログでレイヤー操作を実現するためには

1.相対配置の領域をまず確保する
2.1の領域の中に絶対配置のオブジェクトを配置する
3.オブジェクトに次のスタイルを指定する
  ID名、絶対配置、topからの距離、leftからの距離、z-indexの値 可視属性

 これさえしっかり理解すれば、任意の位置に画像やテキスト領域を表示したり、消したり、移動したり、重ね順を変更したりできるようになる。

以下例です

<div style="width:500px;height:500px;position:relative;">
<img id="photoID名" src="画像URL" style="position:absolute; top:20px; left:20px; z-index: 1; visibility : visible; " />
</div>

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。