人気ブログランキング | 話題のタグを見る
==教えることは自分育て==
<< ポラロイドの右寄せ、左寄せ 背景の変更 >>

卒業課題
下は卒業課題のサンプル作品です。

卒業課題_b0018441_15322935.gif
卒業課題_b0018441_15325717.gif
卒業課題_b0018441_15331279.gif
卒業課題_b0018441_16341724.gif


マーキーで海中散歩です。素材はこちらからいただきました。

★作り方を順を追って説明いたします。

まず素材集めです。

素材 アニメーションGIF等で検索してください。気に入ったのが見つかりましたら、右クリックで名前を付けて保存→適当なフォルダ(ブログでCSSのimageで可)に保存。
アニメーションGIFは、必ず.gifで保存しますよ。
卒業課題_b0063421_18262342.jpg背景画像JPG
500×314
卒業課題_b0063421_2227113.gifアニメGIF(蝶)38×37
卒業課題_b0063421_14171085.gifアニメGIF(トンボ)50×50
卒業課題_b0063421_14192342.gif  アニメGIF(カエル)32×32

では、投稿です。

<div></div>で、背景画像の枠(領域)を確保します。

インラインCSSで背景画像、画像の幅・高さをいれます。

背景画像は、記事を非公開にしてダミーで記事内に貼り、後で削除でもよいし、マイイメージアカウントに登録してURLをとってもいいですよ。

<div style="background-image:url(http://pds.exblog.jp/pds/1/200707/31/21/b0063421_18262342.jpg);width:500px;height:314px;"></div>

これで背景に画像が入りました。
インラインCSSの場合、ダブルコーテーションが入れ子になりますので、url()内のダブルコーテーションは付けないで下さい。


次にマーキーで<div></div>内にアニメGIFを動かします。上からまず蝶を飛ばしましょう。

<div style="background-image:url(http://pds.exblog.jp/pds/1/200707/31/21/b0063421_18262342.jpg);width:430px;height:311px;"><marquee>蝶の画像の擬似タグ</marquee></div>

次にトンボは、<marquee width="100" scrollamount="2" behavior="alternate">トンボの擬似タグ</marquee>としました。

さて、ここで問題です。カエルはどういうタグをつかったでしょうか?
答えはソースです。
マーキーのいろいろなタグは、カテゴリー「マーキー」をご覧下さい。

アニメGIFの間隔は、<br>で調整します。


卒業課題_b0063421_2227113.gif
卒業課題_b0063421_162706.gif

卒業課題_b0063421_14192342.gif

by otomi7771 | 2007-07-31 13:20 |TOPに戻る
<< ポラロイドの右寄せ、左寄せ 背景の変更 >>