GIFアニメーションとJPG画像を重ねて表示させる方法について、教えてください。

Question

nashie0306

3

0もっと見る

ウェブ制作

GIFアニメーションとJPG画像を重ねて表示させる方法について、教えてください。

XHTML1.0でホームページを作成しました。
一部にgifアニメーションを入れるのですが、画像のサイズが大きいので、GIFアニメーションを作った時にサイズが大きくなってしまいました。
少しでも軽くしたいので、画像を動く部分と動かない部分に分けたのですが、重ねて表示する方法がうまく出来なくて困っています。
画像は上下左右の中央で揃える、ページを開いた時に左右は中央に表示するようにしたいです。
ページのイメージは画像のようにしたいのですが、どなたか教えてください。
わかりやすく教えていただけると助かります。お願いします。

回答の条件

1人5回まで

登録：2014/01/29 20:31:51
終了：2014/02/05 15:45:20

コメントはまだありません

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

a-kuma3 · Accepted Answer · 2014-01-29T22:52:43+09:00

こんな感じで、どうでしょうか。

<style>
BODY {
    margin: 0;
    padding: 0;
}
/* 外側の JPEG */
.back {
    height: 900px;          /* 高さを画像にあわせる */
    background-image: url(jpeg_image.jpg);  /* JPG 画像の URL */
    background-position: center center;
    background-repeat: no-repeat;
    border: 1px solid red;
    position: absolute;
    width: 100%;
}
/* 内側の GIF */
.anime {
    position: absolute;
    top: 50%;
    margin-top: -400px;     /* 画像の高さの半分 */
    left: 50%;
    margin-left: -325px;    /* 画像の幅の半分 */
    display: block;
    border: 1px solid red;
}
/* 日付を表示する領域 */
.time-area {
    width: 100%;
    padding: 0 auto;
    padding-top: 10px;      /* 高さ方向の位置を調整 */
}
</style>

<body>

<div class="back">  <!-- JPEG を表示するエリア -->
<center class="time-area">  <!-- 日付を表示するエリア -->
<script>
/* 日付を書くスクリプト */
document.write("２０１４年１月２９日");     /* 本当は、画像で表示するところです */
</script>
</center>
<img class="anime" src="animation_gif.gif" />   <!-- アニメーション GIF -->
</div>

</body>

画像のサイズに依存した数値を三つほど書いちゃってるのが、イマイチなんですが。

GIFアニメーションとJPG画像を重ねて表示させる方法について、教えてください。

ベストアンサー

a-kuma3497321542014/01/29 22:52:43

コメント（0件)

この質問への反応（ブックマークコメント）