●「魚と文字」の簡単な製作方法を説明します。-アイディアをPR-
 |  |  |
[1]*******HEAD〜/HEAD「外枠とバック」CSS********
| HTMLソース |
|---|
<style type="text/css">
<!--
.text09 {text-align:center; background-color:#000000;
border-style:ridge; border-width:10px;
border-color:blue;width:250px;height:80px;}
-->
</style>
|
[2]*******「作成するGIFアニメ」****************
ソフトはAnimation Shoop3を使用しています。
アニメの数 魚左、文字、魚右の3種類作ります。
アニメ魚左 文字 アニメ魚右
※文字を独立させることで、簡単に文字を変更することが出来
魚のアニメ(100x73)が配置も含め崩れにくくなります。
また魚と文字アニメ(50x50)よりテーブル枠はAlignをセンターにして
少し大きめに作ると動作が軽くなります。
さらには左右のスタート位置をずらして作ると魚の変化が面白くなります。
[3]*******BODY〜/BODY「トップの画像表示TAG」*******
| HTMLソース |
|---|
<p class="text09"> <table border="0" cellspacing="0" cellpadding="0" width="250"> <tr><td bgcolor="#000000" width="100" height="80"> <img src="xxx_m.gif" alt="魚左" width="100" height="73" border="0"> </td><td bgcolor="#000000" width="50" height="80"> <img src="ani_2.gif" alt="文字" width="50" height="50" border="0"> </td><td bgcolor="#000000" width="100" height="80"> <img src="xxx.gif" alt="魚右" width="100" height="73" border="0"> </td></tr></table></p> |
[4]*******ピンクのバックでハイ! 完成!!*****************
※アニメもバックカラーを考えて作らないと
縁が黒くなります(失敗事例)
 |
| ★[読んでね!]★ |
|---|
|
[TAG、スクリプト類のご注意] ○標準を意識していません。 ○プラウザIE6.0以上で作成。 ○「TAG、スクリプト類」が表示されていますが参考事例としてご覧下さい。 私はまだまだ知識不足者です。また勘違いによって誤った情報やスクリプトが記載されているかもしれません。 このホームページの利用によって生じた損害については当方では責任を負いかねますのでご了承下さい。 |
