作っているページ内に背景を表示させるには

勉強不足で申し訳ありませんが、ホームページを独学で作成しています。

横幅９５０ピクセルのサイトを、中央表示させるように考えています。

その９５０ピクセルの左上の部分に、（繰り返しの無い）背景画像を表示させたいのですが、
CSSファイルにbackgroundで指定してやると、どうやら表示する画面のサイズに左右されるらしく、
範囲外に背景画像が出たり、自分が考えているのとは違う位置に表示されてしまいます。

ページ内のひとつの要素として、背景画像のように扱えるイメージを挿入するには、どうすれば良いでしょうか。

No.2 ベストアンサー 回答者： play_with_you 回答日時： 2013/07/31 19:58

画像を表示すること自体は問題なくできてますよね？

ブラウザ上で表示する限り、HTMLのあらゆる要素は「箱」に入っていると思ってください。
CSSでレイアウトをいろいろするときには、この「箱」のコントロールが重要です。
で、「横幅９５０」のブロックのbackground-imageに画像を指定すれば
「表示する画面のサイズに左右される」とか「範囲外」「や「自分が考えているのとは違う位置」に表示されるなんてことにならないはずですが…
これ以上はソースを出してくれないとわからないですね。

この回答へのお礼

ありがとうございます、何とかできてます。

とりあえず、ホームページ的な形にはなったかなぁ、という段階でして・・・でも、JavaScriptとか分からないので使ってないし、昭和な香りなんです。

そこで、レイアウトにちょっと面白そうな事をやってみようと思って、背景画像とボタンが重なってる方が良いなぁ、とかいろいろネットのサイトを見てやってたんですけど、背景が自分の思う部分に載らないので質問しました。

background-position: 100px 40pxというのを書いて背景を表示させると、自分の作った９５０ピクセル外の所（空白であって欲しい部分）に背景が出てしまい、あれれ、これは基準点（基準点というのが正しいのかどうかも分かりませんが・・・）が画面の左端でそこから100px 40pxの部分に表示されるのか、と思って・・・じゃぁ、モニタのサイズが変われば、まったく違うものになりそうだったので、では違う方法で何かないかと調べて、positionとz-indexの組み合わせ・・・扱いづらいなぁ、難しいなぁ、何か他に方法あるのではないだろうか、と質問させて頂きました。

知識無いので、妙な質問だったろうと思います。

回答、ありがとうございました。

お礼日時：2013/08/01 00:24

No.6 回答者： ORUKA1951 回答日時： 2013/08/01 11:41

＞で、サンプルを見て考えても、なぜこれで上手く表示されるのかが、現在自分では理解できていません。

　そのような時に役立つものがあります。
firefox とアドオン Firebug( https://addons.mozilla.jp/firefox/details/1843 )を使います。
　firebugを起動すると、左下にHTMLソースが表示され、右下にスタイルシートのソースが表示されます。
　スタイルシート側で禁止マーク(○に／)でスタイルを無効にすると、それがどのような作用をしているかすぐ分かります。

　他にも、 Html Validator( https://addons.mozilla.jp/firefox/details/249 )とか、開発者向けツール( https://addons.mozilla.jp/firefox/extensions/dev … )がたくさんあります。

＞サンプルを見て考えても、なぜこれで上手く表示されるのかが、現在自分では理解できていません。
　スタイルシートの仕様書に
Property index( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
　があります。それを見てはコツコツと・・

　私も独学です。教室とかだと、どうしても必要な情報以外も付き合わなきゃならないので・・(^^)

＞これが、幅を固定させないリキッドというものでしょうか。
　そうです。
　最近は様々な利用者のディスプレイ幅に合わせる必要がありますから・・・。
　慣れたら楽です。

　将来的にはmediaqueryというHTML5/CSS3の機能を使って、デバイスの幅でスタイルシートを切り替える手法を・・・・先でよいです。

この回答へのお礼

今回、
「ただの私の凡ミス」を、「何でホームページの世界ではこうなるんですか？」という質問にしてしまい、多くの方々のお手を煩わせてしまい反省しております。

ただ、質問した事で大きな成果を得たと思ってます。たくさんの良い勉強ができました。

ORUKA1951様に今回教えて頂いたFirebug等のツールも、たぶん知らないまま進んでいただろうと思います。

Firebugをはじめいくつかのアドオンを入れてみました。
これは、とても便利です。今後も使っていきたいと思ってます。

リキッドというものは、まだちょっと自分には受け入れられないですが・・・（知識が追いつかないので混乱しそう、という意味です）・・・これから勉強を積んで、やがてそういったページが作れると良いな、と思います。

「mediaquery」というのも、早々と検索してみました。
勉強すれば、いろんな事ができそうですね、楽しみが広がります。

・・・今はまぁ、あんな質問したような知識ですので・・・これから頑張ります。

回答、ありがとうございました。

お礼日時：2013/08/01 12:06

No.5 回答者： play_with_you 回答日時： 2013/08/01 10:14

＞background-position: 100px 40pxというのを書いて背景を表示させると、自分の作った９５０ピクセル外の所（空白であって欲しい部分）に背景が出てしまい

＞「それが当たり前の話」なのは分かってはいますが

いえ、問題はですね、あなたが「どこに」その画像の指定をしてるのかを言わないために正確な回答ができないことなんですが、気づいてほしいです。
#3の方の言うようにbodyに指定してるなら当然質問本文の挙動になります。細かいことは説明されてるので省きます。
私が#2で言ったように、「横幅９５０ピクセルの」（←これはやはり<div>か何かで囲まれていますよね？）部分に指定すればたぶんご希望の表示になると思うんですが、それは試しました？


ちなみに…
＞背景画像とボタンが重なってる方が良いなぁ
私なら、ボタンを含むブロックに背景を指定します。
例えば

<ul id="menu">
<li><input type="button" /></li>
</ul>

#menu li {
width:250px;
height:45px;
background:(※略）
}

みたいな感じです。
どうでしょうか？

この回答へのお礼

play_with_you様、申し訳ありませんでした。

>「横幅９５０」のブロックのbackground-imageに画像を指定すれば
「表示する画面のサイズに左右される」とか「範囲外」「や「自分が考えているのとは違う位置」に表示されるなんてことにならないはずですが…

大事な部分を確認しておりませんでした。

また、回答頂いた皆様にお詫び致します。
backgroundの記述を、私はスタイルシートのbody部分に記してしまっていた為、質問した時のような状況になってました。
play_with_you様がご指摘下さったように書いてみたら、できるようになりました。

この度は私のミスで、皆様にご迷惑をおかけする事になりました事、重ね重ね申し訳ありませんでしたお詫び致します。

play_with_you様
回答、ありがとうございました。

お礼日時：2013/08/01 10:53

No.4 回答者： ORUKA1951 回答日時： 2013/08/01 08:54

No.1です。

＞独学に近い形で、いろいろなサイトを読みながら、あーでもないこーでもないとやっているものですから、
　これは、とっても非効率です。山へ登らなきゃならないのに沢へ降りてしまって這い上がれない状況に陥ってしまいます。私も何度も経験してきました。
　もっとも良いのは、仕様書に目を通しておくこと。最初はとっつきにくいですが、必要な情報を調べるとき、どのページを見ればよいかが分かるだけでよい。今、学ぶとしたらHTML4.01strictとCSS2.1でしょう。次期HTML5(+CSS3)の元になった仕様です。
・HTML 4.01仕様書 邦訳( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
・REC-CSS2 邦訳( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

　HTML4.01以降、最も重要な考え方は
・構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　です。「HTMLには文書構造だけを記述し、プレゼンテーション(表現)はスタイルシートに任せる」
　「文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる」
　「スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」

　HTMLとは、文書を読み解き、その文書を構成する要素に分解し、ひとつひとつをどのような要素であるかをタグを用いてマークアップするメタ言語です。そして、スタイルシートは、その文書構造を用いてデザインを指定していく。

＞作っているページ内に背景を表示させるには
　この質問の時点で、あなたはその画像が背景であることを示されています。(すばらしい)。逆にアルバムのようなページでしたら画像は背景ではありませんね。
　背景でしたら、
＞ページ内のひとつの要素として、背景画像のように
　というのは、可能ですが望ましくありません。

＞中央表示させるように考えています。
＞左上の部分に、（繰り返しの無い）背景画像を表示させたいのですが、
　具体的な例を挙げて説明したほうが良いでしょう。
[例]
<body>
　<div class="header">
　　<h1>ページの見出し(title)</h1>
　</div>
　<div class="section">
　　<h2>本文見出し</h2>
　　<p>本文記事</p>
　</div>
　<div class="footer">
　　<h2>文書情報</h2>
　</div>
</body>
　という文書構造のHTMLがあったとします。
※class名は、『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　およびHTML5の『HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/h … )』の新しい要素を元に記述しています。
　HTMLで文書構造と言う意味が分かると思います。こうして適切なclass名がつけてあれば、検索エンジンも含めて誰にでも文書構造が分かる。

　これで、スタイルシートを用いてプレゼンテーションを指定していきます。
div.header,div.section,div.footer{/* これらの指定,で区切って一緒に指定 */
width:90%;/* ウィンドウ幅の90%の幅 */
min-width:640px;max-width:900px; /* 最大と最小幅の指定 */
margin:0 auto;/* ページの中央0は上下,autoは左右 */
padding:5px 10px;/* ブロック内の隙間、これで実サイズは90%+10px+10pxになる */
}
div.header{
background-image:url(./images/Logo.gif);/* headerに背景画像 */
background-repeat:no-repeat;
background-position:10px 5px;
/* まめてbackground:url(./images/Logo.gif) no-repeat 10px 5px;でもよい */
}
div.header h1{
margin-left:160px; /* 画像が見えるように左をあけておく */
}

下に全文のサンプルを上げておきます。たったコレだけです。
★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )のDATA入力(右上)でチェックすると・・・
※タブは＿に置換してあるので戻すこと。
※ウィンドウ幅を変えてもきちんと指定した位置に背景があるはず
★紹介した記事は資料のごく一部です。必ずリンク先を読んでおくこと。

<!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:[e-mail]" 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:90%;
min-width:640px;max-width:900px;
margin:0 auto;
padding:5px 10px;
}
h1,h2,h3,h4,p{
margin:0;
line-height:1.6em;
}
div.header{
background-image:url(./images/Logo.gif);
background-repeat:no-repeat;
background-position:10px 5px;
}
div.header h1{
margin-left:160px;
}
/* 分かりやすいように色をつけておく */
body{background-color:silver;}
div.header{background-color:yellow;}
div.section{background-color:aqua;}
div.footer{background-color:lime;}
/* 高さを指定しておく */
div.header{min-height:150px;}
div.section{min-height:300px;}
div.footer{min-height:150px;}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>ページの見出し(title)</h1>
＿</div>
＿<div class="section">
＿＿<h2>本文見出し</h2>
＿＿<p>本文記事</p>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿</div>
</body>
</html>

この回答へのお礼

サンプルを表示させてみました。
うわっ、できました！

これが、幅を固定させないリキッドというものでしょうか。

全画面に対してのパーセントで、枠組みを作っている感じですね。（すみません、知識無くてまた変な事言ってるかもしれませんが・・・）

で、サンプルを見て考えても、なぜこれで上手く表示されるのかが、現在自分では理解できていません。

ORUKA1951様にお書き頂いた回答も、私の頭をフル回転させても難解なところもあり、まだまだ技術・知識不足ですが、教えて頂いた仕様書なども目を通しつつ頑張りたいと思います。

独学では、成長が遅いのはよく分かってはいますが、まぁ、それでご飯を食べていくとかいう目的も無く、ただ漠然とホームページについて勉強しているので、山あり谷ありでも良いかなぁと考えております。

大事なのは、
誰かにやらされているのではなく、自分で考えて進まなければこういった日常とは違う言語（ホームページを作る上での記述等）は絶対に覚える事はできないだろうな、という事だと思ってます。

回答、ありがとうございました。

お礼日時：2013/08/01 10:08

No.3 回答者： naokita 回答日時： 2013/08/01 01:34

そりゃbodyに背景画像を設置しているのだから、

bodyの背景は、bodyの位置に左右されるので、メインコンテンツによって隠れようがどうでもよく、bodyの背景として忠実に位置する・・・当たり前の話。

色々方法はあるけど、
まあ、単純な方法は、bodyと現在のdivの間に、
950px以上の新しいdivを入れてceter表示、それに背景画像を入れれば、950pxの外側と新divの間に画像を配置できる。
こうすれば、ブラウザを狭くしても左側で画像が隠れる事はありませんし、幅を指定するのだからコンテンツの左側ピッタリに配置できる。
サイドバーを配置するようなイメージ。

当然、メインコンテンツの外側に配置するようなpositionでも可能だし、
画像を保存する際に、右側の隙間を大きくして（幅1050pxとか）で保存して、
body{background:url( ) 50% 40px no-repeat;}でも良いです。
但し、bodyへの配置なのだからブラウザ狭くするとコンテンツの位置が左一杯まで寄るわけで、この画像は隠れる。

この回答へのお礼

うわぁ、これは目からウロコでした！

凄いですね、こんな方法想像すらできませんでした。

自分の作った範囲外に背景画像が出るので困っていたのですが、「それが当たり前の話」なのは分かってはいますが、ではどうすれば良いのだろうか、という質問でした。

画像幅を変えたものを使う・・・知識がないので、またいろいろ工夫し悩まないといけないですが、道が見えてきた気がします。

画像もあって、非常に分かりやすかったです。

回答、ありがとうございました。

お礼日時：2013/08/01 09:04

No.1 回答者： ORUKA1951 回答日時： 2013/07/31 17:20

＞（繰り返しの無い）

background-repeat:no-repeat;
簡略化プロパティ(background)で指定しても良いです。
＞左上の部分に、
background-position:0 0;
簡略化プロパティ(background)で指定しても良いです。

＞ページ内のひとつの要素として、背景画像のように扱えるイメージを挿入するには、
　矛盾していますよ。
　HTMLにおける要素(Element)とは、タグでマークアップされているひとつの構成要素ですから、画像が要素でしたら<img ***>でマークアップします。内容の無い置換インライン要素です。
　背景は要素ではありえず、ある要素の背景です。画像が要素であり、かつその上に他の要素を配置したい場合は、position:absolute;とz-indexを組み合わせます。
　画像を追加したい場合は、:afterや:beforeなどの擬似クラスにcontent:プロパティを組み合わせます。配置はabsolute＋z-indexで良いでしょう。

＞９５０ピクセルの左上の部分に、
　スマホや幅広ディスプレイと、様々なディスプレイのある今は、固定ではなくリキッドでウィンドウに合わせて伸縮するようにデザインしたほうが良いですよ。元々ブラウザが持っているスタイルシートはリキッドです。

　HTMLには、文書構造だけを記述してデザインに関するものは、すべてスタイルシートで指定するようにしましょう。
　そのほうが楽です。

この回答へのお礼

質問が変だったみたいですね。
勉強不足で質問を書いてしまってすみません、まず、お詫び致します。

独学に近い形で、いろいろなサイトを読みながら、あーでもないこーでもないとやっているものですから、正直なところ、知識や技術って殆ど無くてあぁいった質問になりました。

やはり、positionとz-indexの組み合わせしか無いみたいですね。
個人的に難しいと思っている記述です。苦手なんですよね、だから質問したというのもあるのですが。

ホームページって、ホントよくできてるなぁ、とつくづく感心します。

リキッドですか・・・それは初めて聴きました。この後、検索してまた新たに勉強してみます。

回答、ありがとうございました。

お礼日時：2013/08/01 00:09