レスポンシブデザインの複数の背景画像について

締切済

質問者：melcco
質問日時：2012/06/06 10:15
回答数：3件

Ｑ．背景画像３点を表示する方法
１）#header　２）#footer　３）背景画像 ※例１

例１：HEAD、HTML
　┃-moz-background-size: 100% auto;
　┃background-size: 100% auto;
２点まではこちらで上手く標示されます。

例２：通常画像として
　┃img {
　┃ max-width: 100%;
　┃ height: auto;
　┃ width: auto\9; /* ie8 */
　┃}
画像の上に文字などを記述したいときに困る。

hight、widtwを指定するとサイズが変わったときに
デザインが崩れてしまうので、
どの様に記述したらいいでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： ORUKA1951
回答日時：2012/06/10 17:01

あくまで、HTML5とCSS3です。

HTML4.01で作成する場合は、それぞれの要素をclassに変更しスタイルシートも書き換えること
<section>→<div class="section">
CSS2.1の範囲内で行うなら、countent：url()で画像を指定して、position：absolute;z-index：0;とかで順番を決める。
さらに旧ブラウザに対応させるなら、<img>要素で画像を配置して、display：block;にして、position：absoluteでテキストをその上に置く。
　対応ブラウザの範囲を決めて書くこと。たとえブラウザのはージョンが想定したものより低くても、閲覧に支障がないデザインにすること。必要なら代替スタイルシートを用意する。
タブは、＿に、:は：(全角)に置換してあります。

<!doctype html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="IRUKA">
＿＿<link rel="stylesheet" href="css/style.css">
<style media="screen">

</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="#">Some</a></li>
＿＿＿＿<li><a href="#">navigation</a></li>
＿＿＿＿<li><a href="#">links</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<h2>A smaller heading</h2>
＿＿<p>
＿＿＿1テストテストテスト・・・・・・・・・・・・・・・・
＿＿</p>
＿＿<p>
＿＿＿2テストテストテスト・・・・・・・・・・・・・・・・
＿＿</p>
＿＿<p>
＿＿＿3テストテストテスト・・・・・・・・・・・・・・・・
＿＿</p>
＿＿<p>
＿＿＿4テストテストテスト・・・・・・・・・・・・・・・・
＿＿</p>
＿＿<p>
＿＿＿5テストテストテスト・・・・・・・・・・・・・・・・
＿＿</p>
＿</section>
＿<section>
＿＿<h2>A smaller heading</h2>
＿＿<p>
＿＿＿2-1テストテストテスト・・・・・・・・・・・・・・・・
＿＿</p>
＿＿<p>
＿＿＿2-2テストテストテスト・・・・・・・・・・・・・・・・
＿＿</p>
＿＿<p>
＿＿＿2-3テストテストテスト・・・・・・・・・・・・・・・・
＿＿</p>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>

この回答への補足

コメントありがとうございます。

こちらですと、
ヘッダーフッターの画像が横幅が縮むのみとなってしまうので、
一枚の画像が残念な感じとなってしまいます。

多少文章のみでは分かりにくいので、
こちらのサイトのような画像に印象があるものが、
そのままの形できゅっとiPhone、iPadにフィットするようなものを考えておりますが、
むずかしいでしょうか。

www.duirwaigh.com

補足日時：2012/06/10 22:43

通報する

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2012/06/08 09:00

やっぱり、なにをされたいかがわかりません。

HTMLが下記だとして・・・HTML4.01の場合、それぞれを<div>のclass名とする。
<article>
　<header>
　</header>
　<section>
　</section>
　<footer>
　</footer>
</article>
で、
・ページ全体の背景の表示方法
・headerの背景の表示方法 position,width,heightになにを期待するか(以下同様)
・sectionの背景の表示方法
・footerの背景の表示方法

この回答への補足

回答ありがとうございます。

MediaQueryでウィンドウ全体にフィットしたページを制作したいと思っております。

・ページ全体の背景の表示方法
articleにタイル状の背景画像

・headerの背景の表示方法 position,width,heightになにを期待するか(以下同様)
横幅がフィットしたリピートのしない一枚画像を載せます

・footerの背景の表示方法
ヘッダー同様

高さ、幅を指定するととウィンドウサイズが変わった時に横幅に長い画像なので余白が出来てしまいます。
指定しない場合はdiv内の文字などが少ない場合、途切れてしまいます。

普通の画像で配置したならば画像の上には文字などが書き込めないので、
何か方法はないかと考えておりますが、
なかなかいい案はないので困っています。

何度もお答えいただきまして誠にありがとうございます。

回答お待ちしております。

補足日時：2012/06/10 13:14

通報する

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2012/06/06 19:49

＞hight、widtwを指定するとサイズが変わったときにデザインが崩れてしまうので、

　ウェブデザインとは言いません。DPE( http://ja.wikipedia.org/wiki/DPE )という別の世界のデザインです。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。
・・・・・【中略】・・・
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

　ウェブデザインのもっとも根幹の重要なポイントは、ただ一点『どんな環境からもWebの情報を利用できるようにすべきだ』の一点に尽きます。

　三点画像と言う意味が質問文からは、背景画像がなぜimg要素なのかとか、どのようなものか判断できませんが、IE8以前は、background-sizeに対応してません。その時点で「どんな環境からも・・」に反しますが、新しいブラウザ限定で考えるなら、bodyに背景、div.articleに背景、div.sectionに背景、div.footerに背景でしょう。その場合もbackgrund-size非対応のブラウザでも利用に問題ないようにデザインします。

　ウェブ上のデータは、HTMLの出生である科学文書でないにしても「文書のプレゼンテーションよりも中身にこそ関心が持たれる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」のです。DPE的なデザインしかできないようでは、「角をためて牛を殺す」ことになります。

　厳しいアドバイスになりましたが、間違った脇道にそれようとされているようなので、回答させていただきました。もう一度ウェブデザインとは何かをご再考ください。
　きっと明るい未来が開けます。

この回答への補足

回答ありがとうございます。

今回は、レスポンシブとはウィンドウ幅に合わせてデザインするものと考え、iPhoneなどのデザインに対応するものとし、古いバージョンのブラウザについては言及しないとします。

質問文にサイズを指定しない場合は、
div要素でくくった場合ウィンドウ幅が変わってしまった場合、
div要素からはみ出す部分が白く抜けてしまうことを示唆してありますので、

回答いただいた内容では質問の解決には至りませんでした。

IE8以前の対応であるならば、jQueryなどのjsを使用したものをが最適であると考えられますが、
希望はできる限りcss3、html5にてウィンドウサイズに合わせて変動する画像を３点重なる様にデザインを考えています。

具体的には、パララックス効果のある画面を考えておりますので、
背景にタイル状になった画像を１点、ヘッダー部分、フッター部分にそれぞれ画像を設置を考えました。

その場合、例１でのデザインが一番理想通りになりますが、その場合htmlとbosyの二か所にしか設置する方法を存じ上げておりませんので、
例２での画像に最大値、最小値を指定する場合ですと、画像の上にデザインを施したい場合多少無理があります。

そこで、div要素に例１を指定した場合のみですと、上記と同様にうまくデザインが施されなかったので、何が足りないのか、その他に最適な記述はないかという回答を求めておりました。

わざわざ長文の回答をいただいたのですが、問題の質問をご理解されていらっしゃらなかったようで、
質問内容が分かりにくく大変申し訳ございません。

何か、他にご存知の記述方法がございましたらご回答いただきますようお願い申し上げます。