人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

よろしく御願いします

●質問者: ookawa-man
●カテゴリ:ウェブ制作
✍キーワード:スクロール ボタン 拍手 画像
○ 状態 :キャンセル
└ 回答数 : 5/5件

▽最新の回答へ

1 ● Tskk

http://www.tg.rim.or.jp/~hexane/ach/lbcs/lbcs3-15.htm

Let's begin CSS -- 3.15

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

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

◎質問者からの返答

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


2 ● jouno

画像にcssで

position:fixed;

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

◎質問者からの返答

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

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%

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

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

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


3 ● jouno

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;”>

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

◎質問者からの返答

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

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


4 ● Tskk

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

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

◎質問者からの返答

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

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

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

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

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

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


5 ● dungeon-master

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’で

消しています。

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

◎質問者からの返答

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

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

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

出来ませんでした。

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ