スポンサーサイト

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

スタイルシートの「絶対配置」でブログ投稿

 最近のHTMLの主流は、スタイルシートによる細かなページの設定と、どこでも配置モードという絶対配置の機能を使い、フィルター操作のトランジションを使った画像で生き生きとした表示ができるようになっています。しかし、いままで絶対配置はGooBlogではできないとあきらめていて、そのような機能を使うことができませんでした。
 ところが、最近GooBlogのサイトで絶対配置を使っているところを発見し、興味がわき、いろいろと基本的なところから実験しているところです。

 GooBlogでは何もせずに、スタイルシートで position:absolute; を使うと、複数の投稿を同時に表示することがあるブログの特性上、一つ一つの投稿の絶対的位置ではなく、ブログ全体の絶対位置に画像が表示され、複数の投稿が同時に表示されるトップ画面でも、意図せぬところに(実は当たり前なのだが)絶対ポジションを指定したコンテンツが表示されてびっくりしたりします。

 しかし、絶対表示を再度勉強していくうちに、相対位置指定(position:relative)をした領域の内部で、絶対位置指定をすると、領域の中だけの絶対位置になって、投稿一つ一つの中での絶対配置が可能であることを学びました。これが、今回の勉強シリーズをはじめたきっかけとなったことです。

 簡単にそのタグの概要を下に示します。(例によって全角で<>を記述します)



<div style="position:relative; width:550; height:600;">
<div style="position:absolute; top:10; left:10;>
    (ここにこのような複数の絶対配置したコンテンツを記述)
</div>
</div>


 これで、横550ピクセル縦600ピクセルの矩形領域の中で、絶対位置を指定したコンテンツを配置できるようになり、重ねあわせができるようになります。
 重ね合わせたコンテンツの表示の順番は、スタイルシートのz-indexの数値で決まりますから、onclickやonmouseoverなどのインタラクティブなスクリプト処理で zIndes=数値 と数値を変えてやることによって、重ねたコンテンツの表示の順番を替えてやることができます。

 重ね合わせるコンテンツに、透過領域を含むモーションGIF(たとえば前回の投稿の窓枠)を使ったり、アニメーションをマーキーで操作したりすることによって、動きのある面白い表現が可能になります。

 いろいろな面白投稿が可能ですので皆さん研究して作り出してください。

 たとえば宇宙船の窓から見えるGoogleEarthで取得したふるさとの風景とか、潜水艦の潜望鏡で、海上を進む船を見るとか、ちょっと考えただけでもいろいろな投稿の思い付きが生まれます。

 もし面白いものができましたら、お知らせください。




コメントの投稿

非公開コメント

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

dongwcat

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

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

この人とブロともになる

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