• ベストアンサー

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

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

  • CSS
  • 回答数3
  • ありがとう数3

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

とっても酷いサイトなのであまり参考にはならないと思いますが・・(^^) 　⇒Another HTML Lint( http://www.htmllint.net/html-lint/htmllint.cgi ) Lynxで見ると内容はほとんど空っぽ・・ 　『Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。( https://support.google.com/webmasters/answer/35769?hl=ja#2 )』 ・とってもうざくって、ニ度と訪れようと思わない。 　例えばページ内リンク( http://yuki930.v-colors.com/#twitterFeed )でターゲットが隠れる。 　仕方ないので、ブラウザの表示メニューから[スタイルシートなし]にして利用せざるを得ない。 ・とにかく煩雑、DIVをデザインのために多用しているため、まるでDIVスープ 　『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ためのもので、デザインのために使用するのは間違い。 ・印刷されたらわかる(^^) ＞上下の画像を画面に固定するには、 ★仕組み自体はposition:fixedでウィンドウの上下に配置しているだけです。 　下は兎も角、上部にfixedさせると、「リンクターゲットが隠れる」という致命的欠点がある。また、表示範囲が小さくなるという欠点があります。表示面積の小さいスマホなどで閲覧するとき困ります。 　ウェブサイトを作られているなら、開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )の豊富なfirefoxを御利用だと思いますが、そのアドオンの Firebug( https://addons.mozilla.jp/firefox/details/1843 )を使用すれば、簡単にわかります。 　ただ、このようなサイトは初心者は参考にすべきではありません。ウェブやHTMLの根本から大きく外れています。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。・・・【中略】・・・もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。 ・・・【中略】・・・ 　HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より 　ちゃんと記述すれば、HTMLはその数分の一ですむ内容です。---そのページのソースを見て、何が書かれているか分からないと思います。--もちろん検索エンジンにもわからない---。内容を修正するとなると大変でしょうね。 　あなたが多く利用されているサイトは、デザインじゃなく内容だと思います。 　対照的なページを紹介しておきます。 　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html#MAIN ) 　(chromeを除く)ブラウザの表示メニューからスタイルを選択するとデザインが変更できます。---HTMLに文書構造しか書かれていないからどのようにもデザインできるということ。 　ソースはシンプルですし、Another HTML Lint もパスするし、印刷しても良いし、ディスプレイ幅に依存しないし、スタイルが利用できない端末でも利用できる。もちろん視覚障害者がスクリーンリーダーで利用もできる。 [例] div.header,div.footer{position:fixed;height:80px;width:100%;} div.header{top:0px;background-image:url(./images/background/topCloud.gif);z-index:100;} div.footer{bottom:0px;background-image:url(./images/background/topCloud.gif);} 次で簡単なサンプル提示します。

DODOOffs
質問者

お礼

ありがとうございます。質問した内容以上にいろいろな発見をすることができました。感謝します。正しいHTMLの書き方などについてこれまで考えたことも無かったので、とても参考になりました。

その他の回答 (2)

noname#206842
noname#206842
回答No.3

固定したいエリアのＣＳＳに、position:fixed;を記述する。 上下だと、headerとfooterということになるかな？・・・ ************************************************* #header,footer{ background-img:url(claud.png); postion:fixed; } *************************************************

DODOOffs
質問者

お礼

ありがとうございます。とても参考になります。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

サンプルです。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) 　でチェック済みHTML4.01strictです。 ★タブは＿に置換してあるので戻す。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:100%;min-width:630px;margin:0 auto;padding:5px;} div.section{position:relative;} div.section div.section{width:auto;min-width:0padding-top:100px;} div.section h2,div.section p,div.section div.section{margin-left:160px;} div.section div.section p{margin-left:0;} div.section div.nav{position:absolute;top:105px;left:0;width:140px;} /* 上下に固定 */ div.header,div.footer{position:fixed;width:100%;} div.header{height:80px;top:0px;background-image:url(./images/background/topCloud.gif);z-index:100;} div.section{padding-top:100px;} div.footer{height:40px;bottom:0px;background-image:url(./images/background/topCloud.gif);} div.footer h2{display:none;} div.footer dt{float:left;font-weight:bold;} div.footer dt:after{content:" : ";} /* わかりやすいように */ body{background-color:gray;} div.section{background-color:white;} div.section div.section{min-height:1000px;} /* 画像をおく場合は以下は着色しない */ div.header{background-color:aqua;} div.footer{background-color:yellow;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<div class="section" id="SUB_SECTION1"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</div> ＿＿<div class="section" id="SUB_SECTION2"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</div> ＿＿<div class="section" id="SUB_SECTION3"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="#SUB_SECTION1">1項</a></li> ＿＿＿＿<li><a href="#SUB_SECTION2">2項</a></li> ＿＿＿＿<li><a href="#SUB_SECTION3">3項</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>

DODOOffs
質問者

お礼

ありがとうございます。質問した内容以上にいろいろな発見をすることができました。感謝します。正しいHTMLの書き方などについてこれまで考えたことも無かったので、とても参考になりました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • jQuery背景画像動かすパララックス

    http://yuki930.v-colors.com/ このサイトの背景画像を作りたいです。 ですが、まず画像背景の作り方がわかりません。 それとマウスを動かすと立体的に動く仕組みのやり方がわかりません。 (上のサイトは少し弧を描くように回転しています。) 検索で探しましたところこのようなものがヒットしました。 マウスの動きに追従して奥行きのある背景移動をするjQueryプラグイン「jquery.parallax.js」 http://www.webopixel.net/javascript/381.html たぶんこれであってると思います。 一回違うやつを作ってみました。 jQuery/CSS3で雲をゆらゆらさせる http://www.webopixel.net/javascript/718.html しかし、背景が透明にならず重なってしまいました。（Javasucriptのほうはうまく組み込めました。） まず、背景画像を透明にするやり方が一点と 次に、マウスを動かすと背景が立体的に弧を描くようにするやり方 以上二点を教えて頂きたく存じます。何卒よろしくお願い申し上げますm(_ _)m

  • 背景画像を固定

    CSSで背景画像を右側に固定しているのですが、 IE5.5で見るとスクロールがある場合と無い場合で 画像の位置がずれてしまいます。 これは仕様なのでしょうか？ 直す方法はありませんか？

    • ベストアンサー
    • HTML
  • 画像の固定について

    ホームページをＴＡＧにより作成しています。 閲覧するときにスクロールをしますが、その画面上たとえば最上部にバナーのようなものをおいて、スクロールしても常に画面上で見れることはできますか。 検索ですと「背景画像の固定」は、たくさんありますが、 単なる画像の固定というのがなかなかみつかりません。 このうち上に固定というのでためしてみたら、スクロールした場合、そのバナーがうしろに行ってしまい見えなくなってしまいました。 使用方法は、画面いっぱいに画像を表示させ、小さなバナーで「画像をクリックしてください」というのをおきたいのです。 一定のところにおくと、画像をスクロールさせて場合見えなくなってしまうのでこれを常に見えるようにしたいのです。 よろしくお願いします。

  • 固定背景画像と画面幅について

    初心者のため、分かりづらい質問になると思いますがお許しください。 background-repeat:no-repeat; background-position:right; background-attachment:fixed; 上記のようなCSSで背景画像を固定しています。 画面幅は918pxで設定していますが、これをプレビューで918px以上に伸ばすと、背景画像がどんどん右にズレていってしまいます。 画面環境はそれぞれだと思うので、大きな画面で見た方が背景画像が切れてしまうのを避けたいです。 画面幅918pxで固定をしたいのですが、どのようにすればいいのでしょうか？ 何か補足事項があればすぐに追記します。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • 背景はそのままで内容部分だけが上下する方法

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

    • ベストアンサー
    • CSS
  • 背景の画像を定位置に固定したいのですが・・・

    ホームページ作成の途中で困っているのですぐに回答ほしいです。 背景の画像を定位置に固定して文字だけを上下させたいのですが・・・。 どなたか分かりませんか？

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

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

  • [CSS]上下フレームの背景を中央寄せでずれさせない方法

    ホームページ作成中です。 上下2つにフレーム分けしています。 ページはテーブルで構成された中央800pix固定にしようとしています。 さて、上下のフレームにまたがるような固定の1枚背景画像を中央にセットしたいのですが、問題が発生しています。 上フレームについては問題なくできています。ただ、下フレームが、本文が長くなった際もちろんスクロールバーが出るのですが、スクロールバー分左にずれてしまいます。 下をスクロールさせてもちゃんと背景画像を出したいのでテーブルの背景ではちゃんとできないですよね。 どうにかして上下フレームの背景画像で中央寄せした場合、ずれないようにする方法はないでしょうか?

    • 締切済み
    • CSS
  • スクロールで背景画像が隠れてしまう

    CSSを始めたばかりの初心者です。 フレームでメニューを表示させています。 CSSで背景画像を固定にしているのですが、 長いメニューでスクロールが出て来ると、 ブラウザの表示領域外にあったテキストの背景が白く表示され、 そこから下の背景は画像も見えず真っ白になってしまいます。 ブラウザを引っ張ると背景画像もまた出てくるのですが… これは一体どうしたらいいのでしょう？ お答え頂けたら嬉しいです。

  • 添付のように背景に画像を張るとき上下の画像を別に切り出して、背景画像と

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

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する