固定背景で、背景を固定して、なおかつWEB拍手の画像

(拍手って書いている画像)を表示させたいのですが、
ただ<IMG SRC=””>を使って表示させても動きますよね?
(スクロールしてしまう)
コレも固定したいんです。そして注意書き
などの文字はスクロールさせたいんですが簡単でいい方法ないですか?

例えて言うと、空の固定背景を使い、
ボタンなどの画像も固定したいところに
固定したいみたいな事です

よろしく御願いします

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/02/11 07:58:30
  • 終了:--

回答(5件)

id:Tskk No.1

Tskk回答回数60ベストアンサー獲得回数02006/02/11 08:44:13

CSSでposition:fixedを指定すればできます。

詳しくはリンク先を参考にしてください。

id:ookawa-man

ちょ・・ちょっと難しそうですね・・・

2006/02/11 09:25:26
id:jouno No.2

jouno回答回数280ベストアンサー獲得回数02006/02/11 08:52:47

画像にcssで

position:fixed;

を指定すればいいはずです。

id:ookawa-man

今見てきたんですけど、全然分からなくて・・・

CSSの知識がほとんど無いので、

いつもタグ講座などで勉強させていただいているんですが、高度すぎて内容が理解出来ませんでした・・・。

position:fixedを指定するには

BODY {

background-image : url(”A”);

background-attachment: fixed;

background-position: 0% 0%;

background-repeat: repeat;

background-color:#FFFFFF;

のどこかに入れるって事でしょうか?

↑はbackgroundのAをbackground-position:0%0%

に指定してるって事なんですよね?(多分)

どのタグをドコに入れればいいか解らなくて・・・。

簡単で、(コピーぺ-スト位簡単だとありがたい)解りやすいのであればいいのですが・・。

2006/02/11 09:42:17
id:jouno No.3

jouno回答回数280ベストアンサー獲得回数02006/02/11 10:00:49

http://www.tohoho-web.com/css/reference.htm#position

とほほのスタイルシート入門

固定したいものを

<div style=”position:fixed;”>と</div>

で囲めばOKです。たとえば、

<div style=”position:fixed;”>

<img src=”hogehoge.jpg”>

</div>


ちなみに場所を座標で指定したい場合は、

<div style=”position:fixed;left:200px;top:500px;”>

のようにします。数字が左上からの距離を表す座標です。

id:ookawa-man

今やってみたんですが、動いてしまいます。

表示させたいところ(そこで固定したい所)に画像を表示させやってみました。

2006/02/11 18:00:56
id:Tskk No.4

Tskk回答回数60ベストアンサー獲得回数02006/02/11 10:48:58

http://www.dekirukana.net/tips/img-03.html

ホームページできるかな/超初心者さん向きHP作成

初心者さんのようなので再度回答します。


http://www.dekirukana.net/tips/img-03.html

まず、背景を固定する方法は「ホームページできるかな/超初心者さん向きHP作成」

さんの背景画像の固定が参考になると思います。

コピペして背景画像のアドレスを書き換えれば使えるでしょう。


Web拍手ボタンの固定ですが、

<div style=”position:fixed; top:10px; right:10px; ”>

Web拍手のタグ

</div>


のようにdivタグで囲めば右上に表示されます。

左に表示したければrightの代わりにleft

下に表示したければtopの代わりにbottom

位置を変えたければ数字を書き換えれば外枠との距離が変わります。

id:ookawa-man

背景固定の仕方は判ります背景を固定させ

、なおかつ画像例えば空の絵を固定背景に使い、飛行機の画像を好きな場所で固定したいという事です。(web拍手のボタンも含む)

そこで表示したい画像(web拍手ボタンではなく飛行機の画像)

でやってみたんですが、動いてしまいます

大文字小文字なども間違えずやったんですが。

何か足りないのでしょうか。

2006/02/11 18:20:35
id:dungeon-master No.5

dungeon-master回答回数571ベストアンサー獲得回数402006/02/12 06:07:47

IEではIMGのスタイルにposition:fixed;が効かないようです。

Frame使うのが吉ですが、あえてDIVでやってみましょう。


<body onLoad=”this.scroll=’no’;” style=”overflow=auto; margin:0 0 0 0;”>

<div style=”overflow=auto; margin:0 0 0 0; padding:0 0 0 0;height=100%; width=100%;”>

本文

</div>

<div style=”position:absolute; left:200px; top:200px; ”>

拍手

</DIV>

</body>


姑息なことをしています。

Window枠内ぴったりの overflow=autoのDIVを用意してその中に本文を書き、

本文のDIVの配置に影響されないようにposition:absoluteで拍手のDIVを置きます。

本来のスクロールバーがあるとかっこ悪いので、Javascriptでthis.scroll=’no’で

消しています。

(背景固定は解決しているようなので省略)

id:ookawa-man

教えていただいたやり方ではどうしても動いてしまいました。

フレームを使えば出来るって方もいらっしゃったのですが、あえて違う方法で教えてくださった

で教えてくだささったのですが

出来ませんでした。

答えていただいた方には申し訳ないのですが

自分の納得いく回答が得られなかったためキャンセルします。すいません。また何かあれば教えて下さい

2006/02/12 15:03:14
  • id:dungeon-master
    念のため

    これだけでやってみてください。IE6.0(XP,2000)では拍手は固定されました。
    カット&ペーストしたとき、”と’が全角になっているかもしれないので、
    必ず半角に戻してあげてください。

    <html>
    <head></head>
    <body onLoad=”document.body.scroll=’no’;” style=”margin:0 0 0 0;”>
    <div style=”overflow=auto; margin:0 0 0 0; padding:0 0 0 0;height=100%; width=100%;”>
    本文<HR>本文<HR>本文<HR>本文<HR>本文<HR>本文<HR>本文<HR>本文<HR>
    本文<HR>本文<HR>本文<HR>本文<HR>本文<HR>本文<HR>本文<HR>本文<HR>
    本文<HR>本文<HR>本文<HR>本文<HR>本文<HR>本文<HR>本文<HR>本文<HR>
    本文<HR>本文<HR>本文<HR>本文<HR>本文<HR>本文<HR>本文<HR>本文<HR>
    </div>
    <div style=”position:absolute; left:200px; top:200px;”>
    拍手
    </div>
    </body></html>
  • id:Tskk
    IEがposition:fixedに対応していなかったのか

    あとから、IEでもできる方法を発見したけれど、時既に遅し
    http://www.unknownplace.org/blosxom/blog/251.html
  • id:ookawa-man
    Re:念のため

    わざわざ有難うございます。コピー&ペーストで出来たんですが(半角に直し)
    やってみたんですが、固定はできたのですが本文の線がチカチカして、
    見づらくなってしまったので・・・
    結局レイアウトを変える事にしました・・・。
    固定背景を使い、なおかつ好きな場所に好きな画像などを載せるのは
    難しいようですね
    わざわざすみませんでした。
  • id:ookawa-man
    Re:IEがposition:fixedに対応していなかったのか

    拝見させていただきました!
    できそうだなと思ってやってみたのですが<div>でくくっても
    何度試しても何度読み返しても
    全てが固定されてしまいました。
    自分の力不足を痛感。

    わざわざ本当に有難うございました

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません