背景は動かずに、内容コンテンツだけが上下に動く方法

このQ&Aのポイント
  • 背景は動かずに、内容コンテンツだけが上下に動く方法について質問です。HTML5/CSS3だけで可能か、JavaScriptが必要かわかりません。
  • HTML5/CSS3で背景は固定し、内容コンテンツだけが上下に動くデザインについて質問です。JavaScriptが必要かどうか教えてください。
  • デザインにおいて、背景は固定したままで、内容コンテンツだけを上下にスクロールする方法について教えてください。HTML5/CSS3だけで可能なのか、JavaScriptが必要なのか知りたいです。
回答を見る
  • ベストアンサー

背景はそのままで内容部分だけが上下する方法

お邪魔致します。質問させて下さい。 以下の、氷室京介さんのサイト、Himuro.comを例に挙げましたが、 http://www.himuro.com/ グレイ色の背景は、上下スクロールしてもそのままで動きませんが、添付した画像の様に、赤枠で囲ったところは上下スクロールすれば、上下方向に動きます。 こういう、 【Q:背景は動かずに、内容コンテンツだけが上下に動く様なデザインは、JavaScriptを使わねば無理でしょうか?それとも、HTML5/CSS3だけで出来るものでしょうか?】 私はHTML5/CSS3は出来ます(完璧ではなくまだまだ学習中)が、JavaScriptは学習していないので、知らないのです。 キーワードで2~3、ググってはみたのですが、今のところまだ不明で・・・。 どなたかお教え頂けますか?

  • CSS
  • 回答数1
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

CSSに background-attachment: fixed; を当て込めばウィンドウに対して画像が固定表示されますので、背景は動かず要素は動くようになります。 詳しくは分かりやすく解説して下さっているサイトがありますのでこちらをご覧になってみてください。

参考URL:
http://www.tagindex.com/stylesheet/box/background_attachment.html

関連するQ&A

  • 背景として画面の上下に画像を固定。

    この方のホームページでの質問ですが、 http://yuki930.v-colors.com/ 背景として、 上下に雲の画像を固定して、中をスクロールできるようになっていますが、 このように、上下の画像を画面に固定するには、どのようにcssを編集すれば良いのでしょうか? 宜しくお願いします。

    • ベストアンサー
    • CSS
  • 添付のように背景に画像を張るとき上下の画像を別に切り出して、背景画像と

    添付のように背景に画像を張るとき上下の画像を別に切り出して、背景画像としてCSSでレイアウトしたいのですが、うまくいきません。 background-position の設定をするのだということはわかるのですが、 赤枠でくくった部分の2枚の画像をそれぞれ上下に指定するにはどうしたらよいでしょうか? どうも今書いているソースではうまくいきませんどなたか回答お願いします。

  • 背景はスクロールされないようにするには?

    ホームページで、上下にスクロールしても 背景画像はスクロールされない(文字等だけスクロールされる)ようにするには どういうHTMLを使えばいいのでしょうか? 教えて下さい。よろしくお願いいたします。

  • 背景をつなげる方法

    サイトの改装をしようといろいろやっているのですが、あるお気に入りのサイト様の仕様を見て、やってみたい!と思いました。が、方法がわかりません。 上下にフレームで分割してあり境界線はわからないようになっているのですが、その上のフレーム内と下のフレーム内の背景画像がつながっているように見えるのです。スクロールバーを動かしても背景が動かないので、スタイルシートでされてるのかな、なんて思ったりもしたのですが、方法がわかりません。 ご存知の方、どうか教えてください。 HP作成にはWinのビルダー7.0を使っています。が、あらかたビルダーで作っておいて、細かいところは自分でHTMLをいじっています。 どうぞよろしくお願いいたします。

  • ホームページの背景設定

    HPの背景の画像を制作したのですが、 図のようにA、Bと言うページを作った際にコンテンツの長さが異なった場合は 背景の長さも変更しなくてはいけないと思うのですが、どのようにして良いか解りません。 どのようにhtmlやCSSを設定すればよいでしょうか?

  • 画像の一部分をスクロールして表示する方法

    画像の一部分をスクロールして表示する方法 初めて質問させていただきます。 一枚の画像の一部分を表示させ、画像をスクロールさせる→次の画像へ移る という見せ方をしたいと思っています。 参考サイト:http://www.kmad.jp/index.html ここのトップページのような形が出来たらと思っています。 HTMLとCSSには少し慣れてきたのですが、JavaScriptは初心者で全く分からない状態です。 もしJavaScript以外の方法でいいやり方があれば、そちらも教えていただけるとありがたいです。 すみませんが、詳しい方、宜しくお願いします。

  • ●jQuery;スクロールでついてくる背景画像

    よろしくお願いいたします。 下記のサイト様を参考に、 http://grow.weblike.jp/immature_design/javascript/159.html scrollFollowを利用し、 スクロールするとついてくるという設定をして、うまく実現できたのですが、 これを、コンテンツ全部でなく、コンテンツ内の背景画像だけ スクロールするとついてくるように指定することはできないでしょうか? <script type="text/javascript"> $( document ).ready( function () { $( '#スクロールさせたい要素のid' ).scrollFollow( { speed: 1000, offset: 0, container: 'main' } ); } ); </script> どうぞよろしくお願いいたします。

  • 画像クリックでスクロールバーの色を変える方法

    カテゴリー的にここかなと思うので質問させていただきます。 よく画像の素材サイトで 「サンプル画像をクリックすると、背景がその画像に変わる」 というものを見かけますが、 あれと同じ事をCSSのスクロールバーのカラー指定に対してやってみたいのです。 つまり、スクロールバーのサンプル画像をクリックすると、そのページ自体のスクロールバーが変わっていくというもの。 スクロールバーの色がIEでしか変わらない事は存じております。 私はHTMLとCSSの理解は深い方ですが、JavaScriptはほとんどわかりません。 よろしくお願いします。

  • 【CSS/HTML】ナビゲーションメニューについて

    【CSS/HTML】ナビゲーションメニューについて http://pegoring.blog108.fc2.com/ ・ボタンたちをコンテンツの幅に合わせる方法(左並びからセンタリングへ)を教えてください。 ・ボタンにカーソルを合したとき(hover)にそのカーソルを合したときの高さと背景の高さが合いません。 ・そのコンテンツの時にボタンの要素(色や背景など)を変更する方法を教えてください。(たとえば、Homeならチプページにいるときだけ、そのボタンだけ背景を変えるなど) →Javascriptになるとおもいます。javascriptに詳しい方、こっちも教えていただけると幸いですorz。 画像を横幅いっぱいにrepeatさせて、中央にコンテンツを置くようにしたいんです。 オレンジの背景が横いっぱいに最後まで続き、ボタンはコンテンツの幅に揃えたいんです。 とにかく、リンクから実際に見てもらえば言いたいことのおおよそはつかんでいただけると思います。

  • ブログの背景画像が崩れます。

    ブログのテンプレートにCSSで左上・右下と、背景画像を2枚固定しました。 しかし全画面表示の時には問題ないのですがブラウザの大きさを変えると背景画像も一緒に動いてしまい画像が重なり合ってとても見づらくなってしまいます。 ブラウザが小さくなったら、下部に横スクロールを出して背景、コンテンツを固定したままにしたいのですがどうすればいいのでしょうか。 うまく説明出来なくて申し訳ありません。 宜しくお願い致します。

専門家に質問してみよう