バカネコ日記

フリーページ

2005年07月28日
XML
カテゴリ:バカネコPC講座
バカネコ村の記事を検索する
「同一ライン上で、2枚の写真が、すれ違うHTMLは?」

今日の講義内容は、初心者には、歯ごたえがありすぎます。
ふーん、そんなこともできるんだ...くらいに、
軽~く、流していただいてかまいません。


ぽんぽこおぐら博士から、珍しくマジメな質問があったので
雨が降るどころか、台風が来てしまいました。
でも、マジメすぎたので、その台風も逃げたようです。

さて、ぽんぽこ博士、
ホームページに、こんなもの置いても、商売には関係ありませんよ?
動画で、ものが売れるわけじゃ~ありませんから(笑)



なんて、冷たいこと言っても、この暑さがやわらぐわけでは
ありませんので、とっとと始めましょうか。

画像を動かすには、いくつか方法がありますが、
gifアニメーションが有名です。 ぽんぽこさんのお得意な手法です。
フラッシュのような特別なプラグインを必要としないので、
手軽に使えます。

この原理は、コマ送りによるパラパラ漫画ですが、大きな画像を使うと
重くなってしまうのが欠点です。
また、たくさんの画像を作るのも面倒です。

gifアニメによる、動画サンプル


この程度の大きさの画像でも、100KBを超えます。
また、なめらかな動きをさせるには、多数の画像が必要になりますので
これまた、ファイルサイズが大きくなり、重くなってしまいます。

一方、ホームページ上で、ふたつの画像をスライドさせるだけなら、
javascriptを使えば、データ的には軽くてすみますが、
プログラミングがたいへんです。 ← といいつつ、確認していない(笑)

だけど、<marquee>タグで、動かせればもっと簡単なはず...
というわけで、方法を考えてみました。

適当な、ふたつの画像を用意し、両側から横スクロールして
同一ライン上ですれ違うHTMLは、以下のように書けば、実現できます。

<div style="top:0px; left:0px; position:relative;">
<div style="top:0px; position:relative; z-index:1;">
<marquee direction="left" width="400">
<img src="URL1" width="170" height="123" border="0">
</marquee>
</div>
<div style="top:-123px; position:relative; z-index:2;">
<marquee direction="right" width="400">
<img src="URL2" width="170" height="123" border="0">
</marquee>
</div>
</div>


これは、相対位置を指定して、画像の位置をコントロールしています。
style属性の中の、position:relative が、それです。
topで、てっぺんの位置を、leftで左端の位置を指定しました。
もちろん、計算が得意なら、絶対配置でも行けるでしょう。

この方法のミソは、最初の画像の高さの分だけ、次の画像のtopを
マイナスすることで、位置を引き上げているところです。
これによって、本来表示されるはずの位置を、上にずらし、
強引に、同一ライン上に重ねるわけです。

2枚の画像は、マーキータグで、それぞれ逆方向に動くようにして
いますから、すれ違って見えます。



ただ、残念なことにこの方法は、楽天日記では上下に分離してしまいます。
同一ラインには乗りませんでした。

ちなみに普通のホームページ・スペースなら、可能なようです。
サンプルを作りましたので、ご覧下さい。
 ここ ↓
 http://cat.1bas.com/bakaneko/wmaq.htm

【回転、じゃなかった開店!】
 TVチャンピオンに登場した、FamFamさんとこのパン屋さん、
 楽天ショップが開店しました。
 行ってみてね~。
 → パン・ド・ファミーユ

【次回の予告】
 自宅マンションの踊り場で、ジェダイの格好をして
 ライトセーバーをかまえる女...。 やっぱ、やめとこか。

【極悪にゃんこ】
 自称、美しきナルシスト、辻上裕子さんとこの
 ミルノ君が、極悪ランキングでがんばっています。
 投票場所は、しな竹さんの極悪商会です。
 飼い主に噛みつく凶悪なにゃんこに一票を、
 入れてやってください(笑)

 現在単独トップ! このまま逃げ切れるか? 締め切りは8/5まで。
 「村民はみんにゃ、ボクに投票するのにゃ!」  by ミルノ
 「うんにゃ、ぼくに投票してね!」  by むう


【ダウンロードページ】
・楽天日記専用バックアップツール、バーニャン3号のサンプル版、
 「バーニャン・ミニ」のダウンロードはこちら。
・にゃんタグのサンプル版は、このページの中段付近。
・バカネコ・ビューアのダウンロードはここ。

1日1票! ブログランキング→ぜひ、クリックしてね


※バカネコ講座では、安全な方法を選んで紹介していますが、
 途中でわけがわからなくなっても、責任は負えませんので、あらかじめご了承下さい。


ネコでもわかるPC講座はこちら → バカネコ講座


悲惨なキャンセル事情 バカネコ講座 バカネコソフト バカネコ村 爆笑ガイド 猫砂の研究 パソコン購入費用の削り方 現物の投下位置 ずぼらなアクセスアップ ページを読みやすくする方法 バーニャン・ミニ 楽天日記のバックアップ にゃんこのコスプレ テキストリンク下線の消し方 楽しめるアフィリ 己を知れ 自分のPCを知る バカネコ・ビューア バーニャン3号 にゃんタグ・フルバージョン 【楽天トラベル】


画面右上「日記リンク追加」をクリック、「◎追加する」ボタンを押すとこの日記がリンクできます。
このサイトの新着記事の通知をご希望の方はご利用ください。







最終更新日  2005年07月28日 15時00分25秒
コメント(37) | コメントを書く

PR

バックナンバー

2019年08月
2019年07月
2019年06月
2019年05月
2019年04月

プロフィール


海獣トド

コメント新着

 海獣トド@ Re:意外な一面に触れて。(08/14) 泡雪さんへ >マザーテレサって本当にす…
 海獣トド@ うめぼしがキラリ☆さんへ >ひゃー、ブログさぼってる間にトドさん…
 海獣トド@ 鵜の岬さんへ >これからも・・ヨロシク・・ね こち…
 海獣トド@ sshijimisanさんへ >でも、トド様のおかげで少しの村民は救…
 海獣トド@ もぐらのこさんへ >日記の下書き機能残ってるよ(^-^) …
 海獣トド@ archfelisさんへ >せめて12日一杯残せばいいのに・・・…

Copyright (c) 1997-2019 Rakuten, Inc. All Rights Reserved.