- ベストアンサー
CSSで左右の背景が異なる設定方法
添付している画像のように左右の背景が異なるCSSを作成したいのですが、 下記のサイト等を参考にしましたが、FFとOperaのみ表示され、 GoogleChromeやIEその他のブラウザでは表示されません。 http://www.webopixel.net/javascript/517.html お分かりになる方どうぞご教授ください。 よろしくお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
HTML5バージョンです。後方互換のためjavascriptが書いてあります。CSSは2.1の範囲内で子供セレクタはつかってません。子供セレクタ>を使うとCSSはもっと簡単になる。 ※先のHTML4.01もそうですが、HTML自体、極めてシンプルなことが分かると思います。メンテナンスも容易ですし、デザインの自由度も変更も、とても楽になります。 こちらは、印刷時にはスタイルが適用されないようにしてありますから、それも確認すること。 「文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」・・わざわざ印刷用のページやスマホ用のページを作らなくて済む。 <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="IRUKA"> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->＿<link rel="stylesheet" href="css/style.css"> <style media="screen"> <!-- html,body{margin:0;padding:0;} header,section,footer{width:80%;min-width:460px;max-width:900px;margin:0 auto;padding:10px;} section{position:relative;min-height:400px;} section section, section h2, section p{ margin:0 21%; min-height:0; min-height:0; min-width:0;width:auto; } section section p{margin:0;} section nav,section aside{ width:20%;height:100%; position:absolute;top:0; } section nav{left:0;} section aside{right:0;} /* 色つけ。背景 */ body{background-color:gray;} header,footer{background-color:lime;} section{background-color:silver;} section section{background-color:white;} section aside{background-image:url(./images/background/sky.jpg);} section nav{background-image:url(./images/background/stone.jpg);} --> </style> </head> <body> ＿<header> ＿＿<h1 id="title">Your title</h1> ＿</header> ＿<section> ＿＿<h2>A smaller heading</h2> ＿＿<p>章記事</p> ＿＿<section id="S"> ＿＿＿<h3>項記事タイトル</h3> ＿＿＿<p>記事・・・・</p> ＿＿</section> ＿＿<section id="N"> ＿＿＿<h3>項記事タイトル</h3> ＿＿＿<p>記事・・・・</p> ＿＿</section> ＿＿<section id="L"> ＿＿＿<h3>項記事タイトル</h3> ＿＿＿<p>記事・・・・</p> ＿＿</section> ＿＿<aside> ＿＿＿<h3>補足記事</h3> ＿＿＿<p>本文と直接関係ない記事</p> ＿＿</aside> ＿＿<nav> ＿＿＿<ul> ＿＿＿＿<li><a href="#S">Some</a></li> ＿＿＿＿<li><a href="#N">navigation</a></li> ＿＿＿＿<li><a href="#L">links</a></li> ＿＿＿</ul> ＿＿</nav> ＿</section> ＿<footer> ＿＿<h3>A nice footer</h3> ＿</footer> </body> </html>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
参考にしたサイトが、まずいようで(^^) ページ(BODY)ではなく、単に左右に表示するコンテンツの背景を変えたいわけですよね。 jqueryの必要なんてサラサラないです。 「メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.( http://jigsaw.w3.org/css-validator/#validate_by_input )」 ※基本が出来ていないことがすべての原因です。一度出発点として、仕様書邦訳 ⇒HTML 4.01 Specification (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) ⇒Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html ) をざっと目を通しておきましょう。 1) デザインのためにHTMLは書かない。(HTMLには文書構造だけを書く) 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) class名やid名は文書構造を補完する目的で書く!! 「id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」 2) その文書構造に基づいてスタイルを適用するセレクタを書く!! ⇒5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) ⇒6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html ) HTML4.01strictとHTML5のサンプル上げておきます。本文が行くに増えても左右の背景はありますし、HTMLに文書構造しか書いてないから、先で好きにデザインが変えられる。HTML自体のメンテナンスもとっても楽になる。 ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) のDATA入力でチェック済み HTML4.01strict+CSS2.1 ★後方互換のため、子供セレクタは使ってません。 ★タブは＿に置換してあるので戻す。 <!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;} div.header,div.section,div.footer{width:80%;min-width:460px;max-width:900px;margin:0 auto;padding:10px;} div.section{position:relative;min-height:300px;} div.section div.section, div.section h2, div.section p{ margin:0 21%; min-height:0; } div.section div.section p{margin:0;} div.section div.nav,div.section div.aside{ width:20%;height:100%; position:absolute;top:0; } div.section div.nav{left:0;} div.section div.aside{right:0;} /* 色つけ。背景 */ body{background-color:gray;} div.header,div.footer{background-color:lime;} div.section{background-color:silver;} div.section div.section{background-color:white;} div.section div.aside{background-image:url(./images/background/sky.jpg);} div.section div.nav{background-image:url(./images/background/stone.jpg);} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1 id="title">Your title</h1> ＿</div> ＿<div class="section"> ＿＿<h2>A smaller heading</h2> ＿＿<p>章記事</p> ＿＿<div class="section"> ＿＿＿<h3>項記事タイトル</h3> ＿＿＿<p>記事・・・・</p> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>補足記事</h3> ＿＿＿<p>本文と直接関係ない記事</p> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li><a href="#S">Some</a></li> ＿＿＿＿<li><a href="#N">navigation</a></li> ＿＿＿＿<li><a href="#L">links</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h3>A nice footer</h3> ＿</div> </body> </html>
お礼
ものすごく参考になりました。 ありがとうございます。 丁寧にわかりやすく、参考になるサイトでものすごく勉強になりました。 自分の未熟さを実感させられました。 本当にありがとうございます！
- play_with_you
- ベストアンサー率37% (112/301)
「表示されません」だけじゃ分かりませんね。 添付画像に合わせて言うと 1.「LEFTBG」「MAIN」「RIGHTBG」の大きさのブロックに「RIGHTBG」の背景画像を設定 2.1のブロックの中に「LEFTBG」のブロックを置き、「LEFTBG」の背景画像を設定 3.1のブロックの中に「MAIN」のブロックを置く 4.「LEFTBG」と「MAIN」のブロックの位置を調整 ということになりますが、ちゃんとそのように書いてますか？ 画像を見る限り、無関係な（そのサイトの説明に無いのにあなたが勝手に入れた）「RIGHTBG」のせいで失敗しているように読み取れます。 ※念のため言っておきますが、CSS3バージョンは対応ブラウザでしか表示できませんよ。
お礼
かなり自分の勉強不足を痛感しております。 もっともっと勉強し、スキルアップを目指したいと思います。 ありがとうございました。
お礼
HTML5バージョンまでご教授頂き本当にありがとうございます。 上記のソースを参考にサイトを作成させていただきます。 もっともっと勉強が必要だと痛感しました。 本当にありがとうございました！