ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

ページ背景がアニメーション!?

ページの背景やセルの背景がアニメーション可能だということをご存じでしたか?今回は、背景をアニメーションさせる方法をご紹介致します。実現方法はとっても簡単です。ぜひ、お試し下さい。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

流れる背景

まずは、下記の例をご覧下さい。
※文字しか見えない場合は、画像が読み込まれるまでしばらく待って下さい。(画像は 55KB あります。)


背景がアニメーションしております。

右から左へと流れているのがお分かりになると思います。

← ← ←

背景画像がアニメーションしているのがお分かりになると思います。
これは一体どうやっているのでしょうか?

ただそれだけのこと

実は特殊なテクニックは一切使っていません。 ただ、アニメーションGIF画像を背景画像(壁紙)として指定しているだけです。実に簡単ですね。

アニメーションする壁紙画像素材を探してきて(もしくは自分で作成して)、あとは通常の壁紙と同様の方法で、壁紙として指定するだけです。

今回は、次のようなアニメーションGIF画像を使いました。

背景用アニメーションGIF画像

背景に壁紙画像を指定するには?

HTMLで背景に画像を指定する方法をご紹介しておきます。

※補足※(2010年6月追記)
以下では、HTMLで背景画像を指定する記述方法をご紹介しています。
しかし、背景画像の指定は、HTMLではなくスタイルシートを用いる方が望ましいです。 スタイルシートを用いて背景画像を指定する方法については、記事「CSSで背景画像の表示方法を自在に指定」などをご参照下さい。

ページ全体の背景として壁紙を指定する場合:

<body background="pagewall.gif">

HTMLファイル中の <body> タグに、「 background 」属性を加えて、画像ファイル名を指定します。

table要素で作った枠内の背景に壁紙を指定する場合:

<table>
   <tr>
      <td background="cellwall.gif">(中身)</td>
   </tr>
</table>

table要素でセルを構成するtd要素(<td>タグ)に「background」属性を加えて、画像ファイル名を指定します。

おわりに

アニメーションGIF画像の存在はご存じだったと思いますが、それを背景画像に指定することも可能だということは、気付かなかった方々も多いのではないでしょうか?ぜひ、みなさんも試してみて下さい。

【関連記事】

【編集部おすすめの購入サイト】
Amazonでホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます