- ベストアンサー
背景として画面の上下に画像を固定。
この方のホームページでの質問ですが、 http://yuki930.v-colors.com/ 背景として、 上下に雲の画像を固定して、中をスクロールできるようになっていますが、 このように、上下の画像を画面に固定するには、どのようにcssを編集すれば良いのでしょうか? 宜しくお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
とっても酷いサイトなのであまり参考にはならないと思いますが・・(^^) ⇒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);} 次で簡単なサンプル提示します。
その他の回答 (2)
固定したいエリアのＣＳＳに、position:fixed;を記述する。 上下だと、headerとfooterということになるかな？・・・ ************************************************* #header,footer{ background-img:url(claud.png); postion:fixed; } *************************************************
お礼
ありがとうございます。とても参考になります。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
サンプルです。 ★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>
お礼
ありがとうございます。質問した内容以上にいろいろな発見をすることができました。感謝します。正しいHTMLの書き方などについてこれまで考えたことも無かったので、とても参考になりました。
お礼
ありがとうございます。質問した内容以上にいろいろな発見をすることができました。感謝します。正しいHTMLの書き方などについてこれまで考えたことも無かったので、とても参考になりました。