利用と加工の手引き(1)




GIFアニメーションを表示できるブラウザは?
現在の所、Netscape Navigator Ver.2.0 以上または Internet Explorer Ver.3.0 以上でないと見ることができません。

(情報を下さった本間様、小森様、ありがとうございます)



自分のホームページに貼り込むときの注意は?
ダウンロード
まず、アニメーションが動いているページからアニメーションの読み込みが終わってからダウンロードします。

アニメーションにポインタを合わせて、

    * Macintosh ならマウスボタンを押しっぱなしにし、
    * Windows なら右ボタンをクリックし、

小さなメニューから『名前を付けて保存』を選びます。
(Macintosh なら、デスクトップにドラッグ&ドロップしても保存できます)

するとファイルが1個落ちてきます。これがGIFアニメーションファイルです。
これを、何にも手を加えずに普通の画像を貼り込むのと同じHTMLのタグ

<IMG SRC="アニメファイル名">

で、ページに貼り込めばO.Kです。


オススメその1:背景画像をページに貼る
まずは貼り込む際に、背景画像をページに貼ることをおすすめします。

本ページのGIFアニメーションの大半は、周囲の色を透明化してあります。
これを、背景画像を貼っていない(背景色を指定しただけの)ページに貼り込むと、それを表示するブラウザによっては透明にしたはずの箇所が黄色や緑の変な色に見えることがあります。


  • 現在、この不具合が確認されているのは Macintosh の Netscape Navigator のいくつかです。
  • Windows の Netscape Navigator でも、バージョンによってこの不具合が起きたことがあります。なにか情報をお持ちの方がいらしたら、ぜひご一報ください


オススメその2:できるだけ原寸で貼る
つぎに貼り込む際に、できるだけ原寸で貼り込むことをおすすめします。

透明化GIFアニメーションを縮小・拡大して表示すると、背景画像を貼っていても、それを表示するブラウザによっては、前のコマがいくつも消されず残って千手観音状態に表示されてしまいます。


  • 現在、この不具合が確認されているのは、やっぱりMacintosh の Netscape Navigatorのいくつかです。
  • Windows マシンでは、この手の現象の報告は聞いておりませんが、情報をお持ちの方がいらしたら、ぜひご一報ください


オススメその3:<IMG>タグには原寸のサイズを書き込む
さらに貼り込む際に、<IMG>タグに画像の原寸サイズを書き込むことをおすすめします。

実は、原寸サイズをタグに書き込まなくても、デフォルトで原寸表示されます。
では、なぜタグに原寸サイズを書き込むことをおすすめするかというと、その方がテキストの表示が速いからです。

あらかじめ<IMG>タグに画像サイズを指定しておくと、ブラウザが画像用にスペースをとって、テキストを先に表示してくれるので、見る人があまりイライラしないですみます。

つまり、

    画像の原寸サイズ指定---->
    画像の読み込み終了を待たずに、テキストが表示される

    画像のサイズ指定なし---->
    原寸で表示されるが、画像の読み込みが終わるまでテキストが表示されない

原寸サイズを書き込まなくてもGIFアニメーション表示上は何も問題ありませんが、HTMLのテクニックというかエチケットとして、<IMG>タグに原寸サイズを書き込むことをおすすめします。


まとめ
まず、何かGIF画像を背景画像として貼り込むとナイス。
    <BODY>タグの中で <BODY BACKGROUND="背景画像名">
    の形式で指定できます

そして、GIFアニメーションを表示するタグにはタテ・ヨコのサイズを原寸で書き込むと、よりナイス。
    <IMG SRC="アニメファイル名" WIDTH="原寸" HEIGHT="原寸">
    の形式です

ということで、透明化GIFアニメーションを表示するページには、背景画像を貼り込んで原寸表示をおすすめします。




とりあえず、各コマの表示速度を変えてみたいんだけど .... 手引き(2)へ
いろいろと加工してみたいんだけど .... 手引き(2)へ
加工したけど、なんだか透明にならない .... 手引き(3)へ
自分でもGIFアニメーションを作ってみたい .... おすすめホームページへ



アニメーション

いらっしゃいませ・
犬シリーズの部屋
頭を下げる
ひとびとの部屋
働く工事中・
その他の部屋
アイコンページと
共通アニメの部屋



ホームページのおもちゃ箱

アイコン アニメーション

更新情報 サイトマップ よくある質問 ブックマーク 自己紹介 ご意見ご感想



[ホームページのおもちゃ箱]
URL= http://www.cyborg.ne.jp/~yoko/
Copyright(C.)1996-2006 by Yoko YAHAGI <yoko@cyborg.ne.jp>