≪ カツのGIFアニメ HOME   サイトマップ


 ■ カツ流 〜 GIFアニメ素材の貼り付け方 A

  【カツ流 〜 GIFアニメ素材の貼り付け方A
   メニュー!】


   ■ はじめに!
   ■ 背景の表示
   ■ 背景に素材(サンタさん)を乗せる!
   ■ 走れ!サンタさん!
   ■ 補 足
   ■ あとがき

























































67×15 245b

















































67×15 245b
















































67×15 245b





























































67×15 245b





















67×15 245b

   ■ はじめに!

GIFアニメ素材の貼り付け方のページでは基本的な「素材の貼り付け方」を解説させていただきました。素材屋さんをしていると、GIFアニメ素材をご利用になられる管理人の方々から、様々な質問が寄せられてきます。特に季節物素材のコーナーにあるテーブルタグを使った背景とGIFアニメ素材を組み合わせる 表示方法が解らない? との質問が多く寄せられて来ます。せっかく気に入って使っていただけるのに説明ページが無いのは不親切です。反省いたしまして、このページで解説させていただきます。このページを読んでいただければきっと参考になると思います。  あくまでカツ流 〜ですが…



   ■ 背景の表示


208×38 4.51kb



上に表示されている「夜のサンタさん」を表示させる例で説明していきます。まずは、背景の表示からです。

最初に「夜の森」を表示させるのですが、これは背景として表示させます。何もせずそのままページの背景とし設定してしまうと ページ全体に「夜の森」が繰り返して表示されてしまいますので、「テーブルタグ」を使って「夜の森」の素材サイズと同じサイズのセル(マス)を作って、 そのセルの中の背景として表示させます。

ここまでを表示させると …



こうなります。

表示させているタグは下の様になります。

<center>
<table border="1">
<tr>
<td width="468" height="70" valign="middle" align="center" background="img/three09.gif">

</td>
</tr>
</table>
</center>

アンダーラインの引いてある background="img/three09.gif" のところで背景にする「夜の森」を指定します。ここで気を付けなければいけない事は、セル(マス)のサイズです。 width="468" height="70" このサイズ指定に気を付けます。 width="468" は「表示させる横幅」、 height="70" は「表示させる高さ」、になりますので「夜の森」の素材サイズと同じになるように指定します。「表示させる高さ」の値を大きくしすぎると、画像がダブッて表示されて しまい、木の下に星空が見えてしまいます。 「表示させる横幅」は、自由に横に広げられる様に素材を作ってありますから、 表示させるスペースに合わせて自由に設定できます。

これで背景の準備が出来ました。


   ■ 背景に素材(サンタさん)を乗せる!


208×38 4.51kb


背景の準備が出来たら、次は上にある「サンタさん」をセル(マス)の中に表示させます。
ここまで出来ればあとは簡単! タグを見た方が早いと思いますので、下に書き出しますね。


<center>
<table border="1">
<tr>
<td width="468" height="70" valign="middle" align="center" background="img/three09.gif">

<IMG src="img01/santa-ani09.gif" width="208" height="38">

</td>
</tr>
</table>
</center>


どうですか、分かりましたか? サンタさんのタグは <td>〜</td>の間に書き込めばいいんです!

ここで補足ですが、 <td 〜 >のタグに含まれている valign="middle" align="center"について解説しておきます。 valign=" "は、縦方向(上下)の表示位置の指定に使います。 top (上ぞろえ)、middle (中央ぞろえ)、 bottom (下ぞろえ)、を指定することが出来ます。何も指定しない場合、 縦方向の位置は中央ぞろえになります。  align=" "は、横方向(右左)の表示位置の指定に使います。 left (左ぞろえ)、center (中央ぞろえ)、 rigft (右ぞろえ)、を指定することが出来ます。何も指定しない場合、 横方向の位置は左ぞろえになります。
上のタグをそのまま使って表示させてみます。

208×38 4.51kb

ハイ! この通り。


   ■ 走れ!サンタさん!

サンタさんの表示が出来たら、いよいよサンタさんに走ってもらいます。「手軽に画像を動かす方法!」で紹介しているタグ、 <marquee> マーキータグを使います。 このタグでサンタさんを表示させているタグをはさめば、サンタさんが動いてくれるんです。ちなみに複数のサンタさんや違う素材を一緒に 走らせたい時は、 <marquee>〜</marquee>の間に表示させたいタグを追加します。 表示される素材の間隔は、タグのあいだに全角スペースを入れると調整できます。 下にタグを書きますね。


<center>
<table border="1">
<tr>
<td width="468" height="70" valign="middle" align="center" background="img/three09.gif">

<marquee scrollAmount="4">
<IMG src="img01/santa-ani09.gif" width="208" height="38">
<IMG src="ほかに表示させたい素材があればこの様に" width="208" height="38">
</marquee>

</td>
</tr>
</table>
</center>


こうすると <marquee>〜</marquee>のマーキータグではさまれている素材が動い てくれるんですね。ちなみに、アンダーライン上の scrollAmount="4"は、動くスピードの指定に使います。 数字の値を多くすると早くなります。
それでは上のタグを使って表示させてみます。

208×38 4.51kb

じゃ〜ん!動いた〜っ!!これでほぼ完成なのですが、最後に背景の周りにあるワクを消したら完成です。
<table border="1">の1を0に変更すると、ワクは消えます。

208×38 4.51kb


完 成 !


   ■ 補 足

ここまでは、季節素材のサンタさんを例に説明してきましたが他の季節素材もありますよね。基本的に表示の仕方は同じですが、 少し解説しておきます。
動かさずに背景と組み合わせるタイプもありますが、これを使う場合はマーキータグを使わなければOKです。複数の素材を並べて 表示させたい場合は、それぞれ素材のタグを書き込んだら全角スペースを入れてタグの間隔を調整します。
背景に使った素材を単独でそのまま使いたいのでしたら、これまでの説明は無視して従来通りの貼り付け方で使用できます。


40×45 1.92kb      40×46 999b      60×62 5.33kb



   ■ あとがき

いかがでしたか?わかりやすく説明出来てましたか。できるだけ解り易く説明したつもりですが… 
必要最低限のタグで説明してますので、実際にはもっとタグの種類はあります。付け足せば役に立つタグもあります。 ここで紹介している「テーブルタグ」の事などもっと知りたい勉強したい方はネット上には様々な解説サイトが存在しますので検索してみてください。

それでは皆さん! がんばってくださいね〜!

こちらのページも参考にしてくださいね!

 カツ流〜 素材の貼り付け方!@
 カツ流〜 素材(GIFアニメ)の作り方! 





51×44 642b HP・メール素材 カツのGIFアニメ HOMEへ
KATU`S GIF ANIMATION
Copyright©2004 katu All right reserved.