- 締切済み
ページの上下の画像や文字を固定したい
背景文字の固定というやつを使ったのですが http://html-time.com/java/bg_fixed_txt.htm スクロール時にカクカクしてとても見せ物にはなりませんでした。 フレームも使いたくないんです。 ttp://koukokutou-club.com/gyao/divx-dl.html こちら様のページが理想なのですが素人の私には ソースを見てもさっぱりわかりませんでした。 position: absolute? いったい何が作用しているのでしょうか？ わかりやすく教えて頂きたいです！
- tamorisan1
- お礼率48% (167/346)
- HTML
- 回答数6
- ありがとう数6
- みんなの回答 （6）
- 専門家の回答
みんなの回答
- abril
- ベストアンサー率69% (388/560)
> leftプロパティというものに固執しているわけではないのですが > 参考サイト様の右下にいるネコがブラウザサイズを変更してもそれに沿って > ついてくるのでこれはセンターにも、もってこれるのではないのか?と > 勝手に想像していたのです。 上記はleftプロパティとはまた別物です。あの猫のアニメーションGIFは、bodyの背景としてウィンドウサイズに対して常に右下に固定される様に指定されているのです。backgroundプロパティを： --------------------------------------------------------------------- background-image : url("画像のパス"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; --------------------------------------------------------------------- と設定する事で、実現しています（分かり易くする為に記述を分けたままにしてますが、"background: 値 値…;"と一括指定もできます）。 "background-attachment: fixed;"で背景画像をウィンドウに対して固定します。これにより、ウィンドウのサイズを変更しても常にある一定の位置に画像が「ついてくる」様な状態になります。 "background-position: 100% 100%;"で背景画像の初期位置を指定します。ここに入る値はいくつかのパターンのものがありますが、上記サンプルではパーセンテージを使用して、ウィンドウの左端・上端を基点として何％の位置に表示するかを指定しています。左端・上端はそれぞれ0%なので100%というのはその対局、つまりウィンドウの右端・下端に表示されるわけです。先述の様に、値のパターンとしてはleft/center/right、top/center/bottomというのも用意されているので、"background-position: right bottom;"とした時も同じになります。 この様に、参考URLのコンテンツは「背景画像をウィンドウに対してどの位置に・どの様な状態で置くか」という事が”正しい論理で明確に指定”されている為、ブラウザはあの様に表示してくれるわけです。ですから： > 右側が出来るならセンターもいけるのでは？という安直な考えです この方法論をそのまま”正しく応用”（これが重要です。何でもそうですけど…）できれば、”ウィンドウサイズに対して常にセンター位置に表示”させる事は勿論可能です。"background-position: 50% 50%;"もしくは"background-position: center center;"でも。 > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">ではFirefoxが○でIE6が× > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">ではIEは○でFirefoxが× いえ、CSSもHTMLも全て今まで説明した通りの構成がちゃんとできていれば、後者の宣言で必ずIE6/7でもFirefox2.0でも同様な効果が得られる筈です。両環境でちゃんと検証してから回答しています。参考サイトのコンテンツが質問者様の環境で両者問題なく表示されているのであれば、質問者様と私の環境の差、というのも少なくとも本件の表示に関してはない筈ですから。 > ここって重要なところですかね？この辺もやっぱり知識ないんです、、すいません！ …重要です。というかこれがないHTML文書を書いてはいけません。簡単に言えば「このHTML文書がどの様な定義（DTD）の基に記述されるかを示す宣言」です。本件でもそうでしたが、その宣言された定義の違いによって他の内容が同じHTMLでも、異なった結果を返すことになります。「DTD宣言」でググって理解しておいて下さい。必須です。 すいません、本件でかなり時間を割かれてしまったので、一度このソースをHTML、CSSに丸コピーして、画像のパスのみ変更してIE6/7とFirefox2.0で表示して見て下さい。結果は同じになる筈ですから。あとは、このソースを元に質問者様用に必要な修正（表示位置の値を調整したり、tableの属性や中味を変えたり）を施して下さい。 【HTML】 --------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>ドキュメントタイトル</title> <link rel="stylesheet" type="text/css" href="hogehoge.css"> <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="fixed.css"> <![endif]--> </head> <body> <span class="s222"><img src="（s222に入れる画像のパス）" alt="" width="200" height="60"></span> <span class="s111"><img src="（s111に入れる画像のパス）" alt="" width="200" height="60"></span> <div class="s333"> <table width="480" border="1" cellspacing="5" cellpadding="5"> <tr> <td> <p>データ</p>※この部分を20個ぐらいコピペ（コンテンツ量を増やしてウィンドウにスクロールバーを出させる為） </td> <td> <p>データ</p>※同上 </td> </tr> </table> </div> </body> </html> --------------------------------------------------------------------- 【CSS】 "hogehoge.css" --------------------------------------------------------------------- body { background: url(null) fixed #ffffff; padding: 0; margin: 0; } span.s222 { position: fixed; top: 20px; left: 10px; } span.s111 { position: fixed; top: 200px; left: 10px; } div.s333 { position: absolute; top: 20px; left: 90px; } --------------------------------------------------------------------- "fixed.css" --------------------------------------------------------------------- span.s222 { position: absolute; top: expression(eval(document.documentElement.scrollTop+20)); } span.s111 { position: absolute; top: expression(eval(document.documentElement.scrollTop+200)); } --------------------------------------------------------------------- これでも思う様にできないのであれば、残念ながらまだこの様なCSSレイアウトに調整する段階ではないと思います。基礎をとにかく学んで理屈を理解してからです。これで回答は打ち止めとさせて頂きます。
- abril
- ベストアンサー率69% (388/560)
…うーん…ちょっとくどいかな、と思うぐらい分かり易く書いたつもりだったんですが、どうもANo.3で私が書いた事を正確に受け取ってらっしゃらない様ですね。困りました… HTML側はこれでひとまずおいといていいですが、CSSの内容が私が解説した通りにはなっていませんね。 "hogehoge.css"の中にspan.s222とspan.s111の設定がなくなっていますが、削除してしまったんですか？ まず最初に参照されるこちらのCSSファイル内で、Firefoxなどで正しく解釈される"position:fixed;"で位置を固定する設定のspan.s222とspan.s111が記述されていなければなりません。その次にコンディショナル・コメントによってIE6以下に読み込まれる"fixed.css"には、「既に先に（ブラウザの種類を問わずに）参照されている"hogehoge.css"で記述されているclassの設定の中の”IE6以下にとって不具合のある部分だけを上書きする”」という内容”だけ”が記述されているのです。 つまり現状は、ブラウザを問わず反映されているのはbodyとdiv.s333のみで、IE6以下にだけ、IE6以下でのみ期待通りの表示をするspan.s222とspan.s111が反映されている、という状態になっています。「Firefoxではうまくいかなくて」というのはその為です。 "hogehoge.css"にspan.s222とspan.s111の設定をきちんと記述して下さい。position: fixed;／top: 値;／left: 値; で。 > leftプロパティは数値を入れないとだめなのですね！ > 理想はブラウザサイズを変更しても常に真ん中に表示させたかったのですが、 先程も説明した通り、そもそもそれはleftプロパティが担う役割ではありませんので…。left＝左、読んで字のごとく、positionプロパティによって定められた基点からの左からの位置を指定するものです。「左から50pxの位置に表示せよ」は理解できても、「左から真ん中の位置に表示せよ」では訳がわかりませんよね？「真ん中って、何の真ん中なのよ？」とブラウザは立ち往生してしまいます。 「ブラウザサイズを変更しても常に真ん中に表示」というのは、「どの部分を、どこに対して」ですか？div.s333の子要素である<table>ですか？ よもや位置を固定させているspan.s222とspan.s111の事ではないですよね？ 何だか質問者様の目指しているイメージがよくわからなくなってきました。 最初にJavaScriptによるサンプル版をWeb上にアップされて公開されていましたが、そこは質問者様が自由にファイルをアップロードできるスペースですか？もし現在抱いているイメージを簡単な図にでもして公開して下さったら、少しはアドバイスできるかもしれませんが、現状ではちょっと把握しかねます。 まあでも、 > CSSなのにJAVAスクリプトとか、知らない記述が出たりと完全に追て来れてません ということでかなりお疲れかと思いますので（すみません、私もちょっと疲れました…）、いったんチャレンジを終了して、基礎からCSSとHTMLをじっくり学び直すのが宜しいかと思います。とりあえず、最初の質問の内容についての回答は（私の記述通りに反映されれば）終了していますので。
お礼
ありがとうございます！！ hogehoge.cssの span.s222 {position:fixed; top:20px; left:10px } span.s111 {position:fixed; top:600px; left:10px } の設定を削除していました！ しかし、追加してみたのですがやはりだめでした（>_<） さすがにおかしいと思い、いろいろしてみたところ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ではFirefoxが○でIE6が× <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ではIEは○でFirefoxが× ここって重要なところですかね？ この辺もやっぱり知識ないんです、、すいません！ leftプロパティというものに固執しているわけではないのですが 参考サイト様の右下にいるネコがブラウザサイズを変更してもそれに沿って ついてくるのでこれはセンターにも、もってこれるのではないのか?と 勝手に想像していたのです。 右側が出来るならセンターもいけるのでは？という安直な考えです、 参考にしたジャバスクリプトのページは 背景文字の固定で検索したリファレンスサイトなんです。
- abril
- ベストアンサー率69% (388/560)
> ところが今度はFirefoxが反映されなくなりました、、 > <link rel="stylesheet" type="text/css" href="hogehoge.css"> > <link rel="stylesheet" type="text/css" href="fixed.css"> > <!--[if lt IE 7]> > <link rel="stylesheet" type="text/css" href="fixed.css"> > <![endif]--> > と、予想して貼ってもやはり反映はされませんでした。何故なのでしょう？ 質問者様が上記の通りに記述されているのであれば、下記(2)がコンディショナル・コメントの外に記述されてしまっている為、(3)での振り分けが無意味となってしまいます。 (1)ブラウザの種類を問わずhogehoge.cssを参照 ↓ (2)ブラウザの種類を問わずfixed.cssを参照 ↓ (3)IE7より下のヴァージョンのIEのみfixed.cssを参照 という様に解釈されます。結果としてプラウザの種類を問わずfixed.cssが適用されている状態になります。fixed.css内では、hogehoge.cssで"position: fixed;"と記述されている箇所を"position: absolute;"に上書きしているので、本来"position: fixed;"で意図した通りの表示をしていたFirefoxなどのブラウザでの表示結果が逆に意図しない状態に差し替わってしまいます。 つまり、「無事IE6でも反映され」たという現状は、”IE6にとってのみ”望ましい状態に過ぎないのです。ですので最初に私が記述した通りに： ---------------------------------------------------------------------- <link rel="stylesheet" type="text/css" href="hogehoge.css"> <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="fixed.css"> <![endif]--> ---------------------------------------------------------------------- として下さい。そうすれば、(1)→(3)というCSSの参照になる為、IE6でもFirefoxでも同じになります。 > "left: 750px;”はpxでしか指定できないのでしょうか？ > centerやleft、rightなどと指定できれば助かるのですが、 leftプロパティというのは、positionプロパティで要素を配置した際の左からの位置を指定するものであり、そこに入る値は当然ですが某かの具体的な値を持っていなければなりません（ディフォルト値のautoを除く）。ですから、"left: center;"とかいう「？？」な状態は有り得ないのです。 …やっぱり相当お勉強が必要の様に思えますね。CSSのリファレンスをじっくり読み、それぞれのプロパティの概念をよく把握してから、様々なレイアウトに挑戦された方が良いですよ。人づての継ぎ接ぎの知識だけでは応用がきかないままですから。頑張って精進なさって下さい。
お礼
いつもありがとうございます！！ どうもFirefoxではうまくいかなくて。 ソースは下記のようにしてみたのですがどうでしょうか？ htmとcssファイルは同じフォルダに入っています。 ------------------------------------------------------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="hogehoge.css"> <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="fixed.css"> <![endif]--> </head> <body> <span class="s222"><img src="jpg" width="200" height="60" border="3"></span> <br> <span class="s111"><img src="jpg" width="200" height="60" border="3"></span> <br> <div class="s333"> <table width="480" height="2000" border="1" cellspacing="5" cellpadding="5"> <tr> <td> </td> <td> </td> </tr> </table> </div> </body> </html> ---------------------------------------------- hogehoge.css body { background: url(null) fixed #009900; padding: 0; margin: 0; } div.s333 { position:absolute; top:40px; left:90px } ---------------------------------------------- fixed.css span.s222 { position: absolute; top: expression(eval(document.documentElement.scrollTop+20)); } span.s111 { position: absolute; top: expression(eval(document.documentElement.scrollTop+200)); left: 750px; } leftプロパティは数値を入れないとだめなのですね！ 理想はブラウザサイズを変更しても常に真ん中に表示させたかったのですが、
- abril
- ベストアンサー率69% (388/560)
えーと…説明が足りなかったかも知れないのですが、参考サイトでは、style4.cssともう1つfixed.cssという2種類のCSSを使っています。 IE6以下には"position:fixed"が効かない、というバグがある為、IE6以下用の振り分けが必要になってきます。参考サイトではそれを実装する為に、まず<head>内で以下の様に記述しています。 ---------------------------------------------------------------------- <link rel="stylesheet" type="text/css" href="style4.css" /> <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="fixed.css" /> <![endif]--> ---------------------------------------------------------------------- このコメント部分は、IE専用のコンディショナル・コメントというやつで、この中の記述はIE以外では単なるコメントとして扱われるので無視され、IEの指定されたバージョンでは有効になる為、fixed.cssの方も参照される、という役割をしています。 ※詳しい説明は省きます。「IE コンディショナルコメント」とかでググって解説を読んで見て下さい。 ここでは、「IE7"より"下のヴァージョンのIEに適用する」という意味です。この条件分岐により、実質IE6以下ではstyle4.cssでの指定がfixed.cssで（style4.cssと重複する部分だけ）上書きされる事になります。 で、そのfixed.cssでは何をしているのかというと。 --------------------------------------------------------------------- #sushi { position: absolute; top: expression(eval(document.documentElement.scrollTop+0)); left: 2px; } --------------------------------------------------------------------- #sushiといのは画面左上の猫のアニメーションGIF画像ですが、これは本来のstyle4.cssでは --------------------------------------------------------------------- #sushi { （省略） position: fixed; top: 0px; left: 2px; （省略） } --------------------------------------------------------------------- となっているところをIE6以下のみで同様の効果が得られる記述で差し替えているわけです。 なので、質問者様のサンプルの場合、以下の修正を反映して下さい。 【HTML】 (1)DOCTYPEの変更（こうしないとIE用の振り分けが有効になりません） ×<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ○<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> (2)CSSを内部ではなく、外部ファイルにして参照 現在<head>内で記述しているCSSの指定をコピーして外部ファイルを作成して下さい。仮にhogehoge.cssとします。 <style type="text/css">～</style>の記述を削除し、そのかわりに2種類の外部CSSファイルを参照します。fixed.css（これの作成は後述）はコンディショナル・コメントを使用。 <link rel="stylesheet" type="text/css" href="hogehoge.css"> <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="fixed.css"> <![endif]--> (3)不正なタグを修正 <span class="s333"><table ～>～</table></span>の記述ですが、<span>の中にはインライン要素しか含んではいけませんので、現状の様に<table>を子要素にはできません。なので、<span class="s333">は<div class="s333">に変更。 【CSS】 "hogehoge.css" (1)【HTML】(2)でコピーした3種類のクラスの前に、bodyの指定をします。 --------------------------------------------------------------------- body { background: url(null) fixed #ffffff; padding: 0; margin: 0; } --------------------------------------------------------------------- この中で、"background: url(null) fixed"の指定だけは変えないで下さい。これを指定していることで、IEでのスクロールの際のちらつきが防げる様ですので。後はお好みに応じて変更を。 (2)【HTML】(3)でのマークアップ変更に伴い、span.s333 {（省略）}はdiv.s333 {（省略）}に変更。 "fixed.css" (1)以下の様に内容を記述。 --------------------------------------------------------------------- span.s222 { position: absolute; top: expression(eval(document.documentElement.scrollTop+20)); } span.s111 { position: absolute; top: expression(eval(document.documentElement.scrollTop+600)); } --------------------------------------------------------------------- "top:～"の箇所の記述が見慣れないと思いますが、JavaScriptのexpressionメソッドというもので、IE特有のものです。これも説明は省きます（ググってみて下さい）が、これにより、IE以外で"position: fixed;"で得られているのと同様の効果をもたらします。 とりあえずこれでIE6での不具合は解消されます。ただし、必要なメタタグの情報が欠けていたり、<span>と<div>の用途の違いなど、HTMLそのものについての知識がまだまだ不充分の様ですので、お勉強して下さい。
お礼
猿でもわかるような説明ありがとうございます！！ 教わったとおりにやると無事IE6でも反映されました！大変感動しています！ ところが今度はFirefoxが反映されなくなりました、、 <!--[if lt IE 7]><![endif]-->内はIE以外では無視されるようなのでヘッダに <link rel="stylesheet" type="text/css" href="hogehoge.css"> <link rel="stylesheet" type="text/css" href="fixed.css"> <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="fixed.css"> <![endif]--> と、予想して貼ってもやはり反映はされませんでした。何故なのでしょう？ それと span.s111 { position: absolute; top: expression(eval(document.documentElement.scrollTop+600)); }left: 750px; の”left: 750px;”はpxでしか指定できないのでしょうか？ centerやleft、rightなどと指定できれば助かるのですが、 もう私は、CSSなのにJAVAスクリプトとか、知らない記述が出たりと 完全に追て来れてません、 私にはまだまだ早いハードルですね。
- abril
- ベストアンサー率69% (388/560)
参考サイトではIE6でも問題なく表示されている（私も確認済みです）わけですから、質問者様のサンプルがうまくいかないのは、やはりCSSの記述にどこか不適切なところがあるのでしょう。 > 何が原因なのでしょうか? これは、今質問者様が実際にどの様に作成されているのか、現物を見せて頂くorソースを提供して頂かないとわからないですね。 http://html-time.com/java/bg_fixed_txt.htm はJavaScript版のままの様ですし。
補足
ありがとうございます！ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <style type="text/css"> <!-- span.s333 {position:absolute; top:20px; left:90px } span.s222 {position:fixed; top:20px; left:10px } span.s111 {position:fixed; top:600px; left:10px } --> </style> </head> <body> <span class="s222"><img src="jpg" width="200" height="60"></span> <br> <span class="s111"><img src="jpg" width="200" height="60"></span> <br> <span class="s333"><table width="480" height="2000" border="1" cellspacing="5" cellpadding="5"> <tr> <td> </td> <td> </td> </tr> </table> </span> </body> </html> お粗末ですがどうでしょうか？ こちらで一応Firefoxでは反映されるんです。
- abril
- ベストアンサー率69% (388/560)
参照されたURLのコンテンツでは、CSSで以下の様に設定しています。 ・左上の猫の画像を、"position: fixed;"とした上で topとleftの値を指定し、固定 ・タイトルの”Gyao～"も同様の方法で固定 ・そこから下のコンテンツのコンテナブロックは"position: absolute;"とした上でtopとleftの値を上記2つのブロックの終了後の位置に指定 ちなみに、質問者様ご自身のサンプルの方はJavaScriptでのスクロールですよね？「スクロール時にカクカクして」というのは、マシンパワーに依存するところが少なくない現象ですので、閲覧者の環境によっては程度の差があると思います。私の環境で見た限りでは、さほどカクカクした印象は受けませんでした。 まあでも上記の様なCSSでの実装の方がベターかと思いますので、上記をヒントに、CSSのプロパティを学習しながら頑張ってトライしてみて下さい。positionと言ってもこの程度（上下単純2分割の疑似フレーム的なレイアウト）の事を実現するのは、さほどハードルは高くありません。
お礼
ありがとうございます！ absoluteとfixedで指定してみたのですが IE6では反映されませんでした。 Firefoxでは理想通りに反映されるようですが参考サイト様は IE6でも問題なく表示させていますが何が原因なのでしょうか?
お礼
ありがとうございます！！ HTMLとCSSをそれぞれ保存し同じフォルダに入れて試してみたのですが やはり同じでFirefoxには反映されませんでした。 とりあえずIEは表示されているのでFirefoxは諦めます。 backgroundプロパティの詳細な説明ありがとうございます！！ これで理想の通りに出来そうです！助かりました！ 最後まで大変丁寧に教えてくださり本当にありがとうございました！！