質問: 作っているページ内に背景を表示させるには 勉強不足で申し訳ありませんが、ホームページを独学で作成しています。 横幅950ピクセルのサイトを、中央表示させるように考えています。 その950ピクセルの左上の部分に、(繰り返しの無い)背景画像を表示させたいのですが、 cssファイルにbackgroundで指定してやると、どうやら表示する画面のサイズに左右されるらしく、 範囲外に背景画像が出たり、自分が考えているのとは違う位置に表示されてしまいます。 ページ内のひとつの要素として、背景画像のように扱えるイメージを挿入するには、どうすれば良いでしょうか。
回答: no.1です。 >独学に近い形で、いろいろなサイトを読みながら、あーでもないこーでもないとやっているものですから、 これは、とっても非効率です。山へ登らなきゃならないのに沢へ降りてしまって這い上がれない状況に陥ってしまいます。私も何度も経験してきました。 もっとも良いのは、仕様書に目を通しておくこと。最初はとっつきにくいですが、必要な情報を調べるとき、どのページを見ればよいかが分かるだけでよい。今、学ぶとしたらhtml4.01strictとcss2.1でしょう。次期html5(+css3)の元になった仕様です。 ・html 4.01仕様書 邦訳( http://www.asahi-net.or.jp/%7esd5a-ucd/rec-html401j/cover.html ) ・rec-css2 邦訳( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html ) html4.01以降、最も重要な考え方は ・構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) です。「htmlには文書構造だけを記述し、プレゼンテーション(表現)はスタイルシートに任せる」 「文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる」 「スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。( http://www.asahi-net.or.jp/%7esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」 htmlとは、文書を読み解き、その文書を構成する要素に分解し、ひとつひとつをどのような要素であるかをタグを用いてマークアップするメタ言語です。そして、スタイルシートは、その文書構造を用いてデザインを指定していく。 >作っているページ内に背景を表示させるには この質問の時点で、あなたはその画像が背景であることを示されています。(すばらしい)。逆にアルバムのようなページでしたら画像は背景ではありませんね。 背景でしたら、 >ページ内のひとつの要素として、背景画像のように というのは、可能ですが望ましくありません。 >中央表示させるように考えています。 >左上の部分に、(繰り返しの無い)背景画像を表示させたいのですが、 具体的な例を挙げて説明したほうが良いでしょう。 [例] ページの見出し(title) ============== 本文見出し 本文記事 文書情報 という文書構造のhtmlがあったとします。 ※class名は、『div要素とspan要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 およびhtml5の『html5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/tr/html5-diff/#new-elements )』の新しい要素を元に記述しています。 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入力(右上)でチェックすると・・・ ※タブは_に置換してあるので戻すこと。 ※ウィンドウ幅を変えてもきちんと指定した位置に背景があるはず ★紹介した記事は資料のごく一部です。必ずリンク先を読んでおくこと。 _ _サンプル _ _ _ _ _ _ _ __ページの見出し(title) ============== _ _ __本文見出し __本文記事 _ _ __文書情報 _