• ベストアンサー

横幅が可変の背景

ちょっと説明が難しいので理解頂けるか不安なのですが・・・ 企業のホームページとかに良くあるパターンの表示方法なのですが、 背景の画像が横幅に対して100％で指定してあるのか、 ウインドウを大きくしても小さくしても、ちゃんとそのサイズピッタリで表示される方法を知りたいと思っています。 ホームページの例としては、 http://www.ekokoro.jp/ の、メニュー部「募金メニュー」や「世界を知る」とある部分の下にある、緑のラインの事です。 いわゆるコンテンツの部分は、例えば横800pxとかで作りたいのですが、 背景のラインはモニター100％にしたいのです。 このような表示方法を解説しているページとかありましたら教えてください。 また、できればXhtmlではなく、htmlでの表示方法を希望です。 よろしくお願いします。m(_ _)m

  • HTML
  • 回答数6
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
回答No.6

こういうことでしょうか？ （以下、外部参照stylesheet（○○.css）として記述） body { margin: 0 auto; padding: 0; background: url("背景画像パス名") repeat-x top; background-color: #ffffff; text-align: center; } table { margin: 0 auto; width: 800px; } （以下、htmlとして記述） <html> <head> <link rel="stylesheet" href="○○.css" type="text/css"> <title>test</title> </head> <body> <table> <tr> <td>a</td> </tr> </table> </body> </html> ※tableのbackground-colorを指定していないため、背景画像によっては予期しない背景色により背景画像がかき消される可能性があります（ユーザの閲覧環境に依存）。 ※IE6.0, Firefox1.5, Opera9.1で表示確認済み（いずれも、Windows XP sp2）。

freeman555
質問者

お礼

回答ありがとうございます。 完璧です！ ありがとうございました。

その他の回答 (5)

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.5

色々方法は、ありますが、簡単なところだと <HTML> <HEAD> <TITLE></TITLE> <meta http-equiv="Content-Style-Type" content="text/css"> </HEAD> <BODY> <div align="center"> <div style="width :800px; text-align :center; background:#ff9999">ホームページテスト</div> <div style="width :800px; text-align :center; background:#ff9999"><A href="index.html">メニュー１</A>　<A href="file:///C:/Documents and Settings/****/デスクトップ/ホームページ管理フォルダ/＊＊＊＊＊＊＊/index.html">メニュー２</A>　<A href="file:///C:/Documents and Settings/****/デスクトップ/ホームページ管理フォルダ/＊＊＊＊＊＊＊/index.html">メニュー３</A></div> <div style="width :100%; height: 20px; text-align :center; background:#0000ff">青色背景１００％</div> <table border="0"> <tr><td width="800" align="center" height="100" bgcolor="#f5f3e0">コンテンツ</td></tr> <tr><td width="800" align="center">フッター</td></tr> </table> </div> </BODY> </HTML>

freeman555
質問者

補足

回答ありがとうございます。 分かりやすい説明、ありがとうございました。

noname#56851
noname#56851
回答No.4

この部分はdivを重ねてあります。後ろのがwidth:100%で、手前のが横幅を720pxで固定してある感じです。 後に張ってある画像は http://www.ekokoro.jp/common/image/headerbackground01.gif です。

freeman555
質問者

補足

回答ありがとうございます。 見ると簡単ですが、やろうとすると難しいですね(笑)

  • goldfox
  • ベストアンサー率49% (123/249)
回答No.3

> 例えば上記のようなhtmlを組んで、『青』の部分だけ１００％表示になるような方法、もしくは見え方になる方法を知りたいのです。 table自体を100%で作成し、 文章のセルにalign="center"もしくはstyle="text-align:center"を追加。背景色は削除。 文章を <div style="width:800px; text-align:center; background-color:#ff9999"><p>ここに文章とかリンクとか。</p></div> で囲む。（背景色はこちらに指定） これでお望みになるんじゃないですか？ まあ、table使わなくても、100%（指定なし）のライン用divと800px指定のdivで事足りそうですけど……。

回答No.2

>そうすると、幅は800pxにしかならないじゃないですか。 >でもラインだけはウインドウ１００％にしたいんです。 ブラウザが８００ｐｘだとして、 ラインは１０００ｐｘにしたいとかそういうことですか？ つまり、ブラウザの枠を超えて表示させたい、と。 （自分の読み違いであることを祈ってますが。） もしそれれなら、無理です。 HTMLを「ブラウザで表示させている」のですから。

freeman555
質問者

お礼

一つ追加補足。 ブラウザのウインドウは最大化して見た時の話です。 個人の使用環境によっては、小さい窓で見る方もいらっしゃるでしょうから。(^^;)

freeman555
質問者

補足

回答ありがとうございます。 中々表現が難しいですね(^^;) >つまり、ブラウザの枠を超えて表示させたい、と。 >（自分の読み違いであることを祈ってますが。） 違います。 ウインドウ100％にしたいんですが、ブラウザを超えてではありません(笑) んー、どうやって説明したらいいんだろう（＞＜；） http://www.htaccesseditor.com/ 例えば上記参考ページ、ＴＯＰページで「Ctrl+A」をすると、 コンテンツ部分だけ選択された状態になりますよね？ 仮にそこの横幅は800pxとするじゃないですか？ でも、「.htaccess作成　オンライン上でいとも簡単に.htaccessファイルを作成」とある、緑のラインはウインドウ100％で表示されてますよね？ この表現方法が知りたいんです。 例えば私が思いついたこの表現方法のやり方は、 横100％のテーブルを一つ作って、その中に横800pxのテーブルを組む。 そうすると横100％の背景にx方向だけ繰り返しを指定すれば、 ラインはウインドウ100％でコンテンツは800pxの表示になるとは思います。 単純にこんな方法でいいのかわからなくて、もしかしたらもっと良い方法があるのではと思って質問しました。 分かられないですよね？？(^^;)

noname#27080
noname#27080
回答No.1

こんにちは。 例にあげてらっしゃるサイトの緑のラインは通常通り背景を指定しているだけのようですよ。 ただ背景の指定を横方向のみ繰り返す指定がされていると思います。 参考URLのページの下の方にある「背景画像を横方向にだけに繰り返す」という手法かと思います。 背景の指定は一番後ろの層に位置する<div>にwidth: 100%;などとしてから背景を横方向にだけ指定しているのかな、と思います。(未確認ですが)

参考URL：
http://iswebmag.hp.infoseek.co.jp/sample216.html
freeman555
質問者

補足

回答ありがとうございます。 やはり思ったとおりの回答が返ってきました(笑) 仰る通りなんですが、聞きたいこととは少し違うんです。 なんと言いますか、コンテンツ部をテーブルで横800pxで作ってるとしますよね？ そうすると、幅は800pxにしかならないじゃないですか。 でもラインだけはウインドウ１００％にしたいんです。 （ウインドウ100％に見せたい） そこがどう表現していいのか・・・ －－－－－－－－ <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <CENTER> <TABLE border="0"> <TBODY> <TR> <TD width="800" align="center" bgcolor="#ff9999">ホームページテスト</TD> </TR> <TR> <TD width="800" align="center" bgcolor="#ff9999"><A href="index.html">メニュー１</A>　<A href="file:///C:/Documents and Settings/****/デスクトップ/ホームページ管理フォルダ/＊＊＊＊＊＊＊/index.html">メニュー２</A>　<A href="file:///C:/Documents and Settings/****/デスクトップ/ホームページ管理フォルダ/＊＊＊＊＊＊＊/index.html">メニュー３</A></TD> </TR> <TR> <TD width="800" align="center" bgcolor="#0000ff" height="20"></TD> </TR> <TR> <TD width="800" align="center" height="100" bgcolor="#f5f3e0">コンテンツ</TD> </TR> <TR> <TD width="800" align="center">フッター</TD> </TR> </TBODY> </TABLE> </CENTER> </BODY> </HTML> －－－－－－－－ 例えば上記のようなhtmlを組んで、『青』の部分だけ１００％表示になるような方法、もしくは見え方になる方法を知りたいのです。 もしかすると、このばあい800pxでテーブルを制作する事自体がナンセンスなのかもしれないですが・・・

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • ホームページの横幅が広くて、印刷すると切れてしまう。

    会社のホームページを作っていて、横幅の設定について質問させて下さい。 横幅720pxで作成していたのですが、印刷する時に切れないように横幅を短くして欲しいと言われました。windowsのIEから印刷しようとすると、右側が切れてしまいます。印刷の設定を変えればよいのですが、その設定をしていない（分からない）人も多いようです。 大企業のHPを見てみると横幅700～780pxが多いので、これが主流だと思っていたのですが、やはり右側が切れずに印刷できるように横幅短め（600px以下？）で、ホームページを作成した方がよいでしょうか？ 私としては印刷幅に合わせると横幅がかなり狭くなるように思うので、モニタ表示を優先して作成したいのですが・・・ みなさんはどうしていますか？ご意見伺えたらと思います。

  • CSSで背景色を下まで表示させたい

    左がメニュー、右がメインコンテンツになるサイトを作っています。 左右のボックスの背景色を下まで伸ばしたいのですが、 いろいろなサイトを見て回って、その通りに指定しているはずなのですが、 うまく行きません。 #layoutの中に#sidebarと#mainを入れ子にしてあります。 #layoutの背景色（完成後は背景色はなしにする予定）は下まで表示されますが、 #sidebarと#mainの背景色が下まで表示されません。 また、ブラウザの縦幅をすごく短くしてスクロールした時に、 #layoutの背景色がその縦幅より下は表示されなくなってしまいます。 今まではテーブルで作っていて、CSSとXHTMLを使うのは初めてです。 以下にソースを置いておきますので、ご回答よろしくお願いします。 <?xml version="1.0" encoding="shift_jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr"> <head> <title>背景画像を下まで表示したい</title> <style type="text/css"> *{ margin:0;padding:0; } html{ height:100%; } body{ margin: 0px; padding: 0px; height:100%; background-color:#DDDDDD; text-align:center; font-size: 11px; line-height:18px; font-family: sans-serif; color: #000000; } /*レイアウト指定*/ #layout{ margin: 0px auto; width: 960px; height:100%; min-height:100%; text-align:left; background-color:#000000; } body > #layout { height: auto; } #main{ float:right; margin:0px; padding:50px 34px 0px 34px; width:640px; height:100%; min-height:100%; background-color:#FFFFFF; } #sidebar{ float:left; margin:0px; padding:40px 30px 0px 0px; width:218px; height:100%; min-height:100%; background-color:#999999; } /*クリア*/ .clear { clear:both; } .clear hr { display:none; } /*罫線指定*/ .borderA { border-bottom:solid 1px #888888; margin-top:37px; margin-bottom:10px;} </style> </head> <body> <div id="layout"> <div id="main"> メインコンテンツ<br />メインコンテンツ<br />メインコンテンツ<br />メインコンテンツ<br />メインコンテンツ<br />メインコンテンツ<br />メインコンテンツ<br /> <p class="borderA"></p> <p>Copyright(C) xxxxxxxxxxx. All Rights Reserved.</p> </div> <div id="sidebar"> メニュー<br />メニュー<br />メニュー<br />メニュー<br />メニュー<br />メニュー<br />メニュー<br /> </div> </div> <div class="clear"><hr /></div> </body> </html>

  • 背景だけをフル画面表示したい

    背景だけをフル画面で表示し、コンテンツ部分は　固定(例えば700ｐｘ×500ｐｘ)の大きさで常に中央に表示されるようにしたいのですが、やり方が分かりません。 どなたか　お力をお貸し下さい。 よろしくお願いします。

  • 【横幅を可変（？）】Flashの表示幅を変更させたい

    いつもお世話になっております。 今回は、Flashについて質問です。 1,800px×300pxと言うデカイFlashがあります。 これを、HTMLに埋め込み再生するのですが、 ブラウザ幅に合わせて横幅のみ可変させる方法を知りたいです。 ※高さは固定 ※1,800×300と言う比率は変わらない。 つまり、ブラウザの横幅が1,000pxだった場合、 Flashは1,000pxまでしか表示させない。 残り800pxはマスク（？）する感覚です。 参考になればと思い、画像を用意しました。 ↓ http://www.gochader.com/sample.gif ご意見、ご回答よろしくお願いいたします！！！！

    • ベストアンサー
    • Flash
  • メニューやヘッダー背景だけをブラウザの横幅いっぱい

    下記ＵＲＬのように、メニューやヘッダー背景だけをブラウザの横幅画面いっぱいに表示して、拡大や縮小しても、延々と表示されるようにしたいのですが、どのようにしたらよいか分かりません。 ＵＲＬ：http://j-sen.jp/ どなたかご教授頂けたら幸いです。 よろしくお願い致します。

  • CSSでliタグ内の横幅を変えたい

    「<li id="newpostcatch-2" class="widget-container widget_newpostcatch"><h3 class="widget-title">最近の投稿</h3><ul id="npcatch" > <li>ここのコンテンツの横幅を変えたい」 って感じになってます。 320ｐｘいっぱいいっぱい使って欲しいのですが、現状だと「ここのコンテンツの横幅を変えたい」の部分は、その半分強くらいの、200ｐｘくらいの変な位置で改行されてしまいます。 CSSになんと追記すればいいか教えてください。

    • ベストアンサー
    • CSS
  • HTMLでウエブサイトの横幅について

    ウェブデザインに詳しい方、アドバイスお願いします。 HTMLでウェブサイトの横幅について教えてください 何年か前に短期のウェブデザイン講習に通い、基本的なことを教わりました。 その際、ウェブサイトを作るときの基本的な考え方として、いろんなモニターサイズで見ている人がいるので、横幅は800pxで作るのがいいと教えられました。 質問1 たとえば現在、いろんなウェブサイトを見ていると、横幅が800pxで作られているとは思えないサイトの方が多いように見えます。、現在のウェブデザインの最前線の現場では、横幅についてはどのように考えられているのでしょうか。教えてください。 質問2 たまにですが、とてもまともな企業のウェブサイトが、左に寄って表示されているケースを何件か見かけました。講習では、モニターの左右のセンターに表示されるようにコードを書くように指導されましたが、まともな企業のウェブサイトが左寄りに表示されているのを見ると、何か世間の事情が変わり始めたのかと不思議に思ってしまいます。どういうことなのか、教えてください。 よろしくお願いします

  • 背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示する方法

    背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示するようにしたいと思ったのですが、背景画像も常に中央に表示されてしまいます。 そのため、上記の現象の対処法について何かご教示いただける方がいらっしゃいましたら、よろしくお願いします。 【やりたい事】 1. ブラウザの横幅が1024の際、背景画像を画面中央に表示したい。 2. ブラウザの横幅が1024の際、背景画像の上に表示されている画像を画面中央に表示したい。 3. ブラウザの横幅が1000以下の際、ヘッダーやコンテンツやフッターという文言の表示方法と同じように、左側を基準に表示したい。 4. ブラウザの横幅が1000以下の際、背景画像の上に表示されている画像は画面中央に表示したい。 【現状】 1,2,4は出来ています。 ただ、3については、ヘッダーやコンテンツやフッターという文言の表示方法と同一にする方法が分からず、画面中央に表示されてしまいます。 【ソースコード】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css"> <!-- body { text-align: center; margin:0; padding:0; } #wrapper_index_up, #wrapper_index_bottom { margin: 0 auto; text-align: left; } #wrapper_index_up, #wrapper_index_bottom, #header, #contents, #footer { width: 1000px; } #header { background-color:red; } #top_img_wrapper { background-image:url(http://cdn.oshiete.goo.ne.jp/images/top/search_bk.gif); background-repeat:no-repeat; background-position: center; } --> </style> </head> <body> <div id="wrapper_index_up"> <div id="header">ヘッダー</div> </div> <div id="top_img_wrapper"> <img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" alt="" width="139" height="92" /> </div> <div id="wrapper_index_bottom"> <div id="contents">コンテンツ</div> <div id="footer">フッター</div> </div> </body> </html> どうかよろしくお願いします。

    • ベストアンサー
    • HTML
  • CSS初心者　コンテンツ高さに合わせたメニュー領域の背景色

    CSS初心者です。 Win IE6　環境で制作しています。 「メニュー」部分（右側）と「コンテンツ部分」（左側）とに分けて２段組で外部CSSでのページレイアウトに挑戦しているのですが、なんとかテーブルでのレイアウトを全部外して、形にはなったのですが、表題のようにコンテンツの高さに合わせて、メニュー領域の背景色を付けることが出来ません・・・。 CSSは .contents { width:770px; text-align:center; }　（全体のコンテンツ領域） .contents-left { width:550px; float: left; text-align:center; }　（←コンテンツ部分） .contents-right { width:200px; vertical-align:100%; }　(←メニュー部分） .footer { width:770px; text-align:center; clear: both; }　（フッター） とし、 メニューを囲んでいるDiv要素には .menu_box { background-image:url(img/menuback.gif) ; width:197px; vertical-align:100%; } としています。 いといろと試行錯誤していて「vertical-align:100%;」または「vertical-align:bottom;」などを付けてみましたが、ダメでした。 教えてください。よろしくお願いします。

    • ベストアンサー
    • CSS
  • 指定した横幅内で文章を左寄せ(右寄せ)したい。

    初めまして。 現在、携帯電話向けのホームページを製作しているのですが レイアウト等の設定方法で自分では分からない箇所があったのでこちらに質問させて頂きました。 基本的に全てのコンテンツの横幅の上限を240pxで統一しています 加えてモバイルサイトとして製作中なんですけれど、 PCで閲覧した場合の見栄えも考慮したいので コンテンツをセンターに表示させる形式のレイアウトにしようと思っています。 そ　こ　で、質問です、 タイトルやボーダー等は画面のセンターに表示させ 目次等の各種文章をセンター240pxの範囲内で左寄せしたり右寄せしたいのですが テーブル系タグや、コンテンツの両サイドの余白を固定で設定して対応すると 閲覧環境によってはコチラが意図していない形で表示されてしまう事は無いのでしょうか？？ また、それ以外の方法で適しているタグやスタイルシートがあれば是非教えて下さい 宜しくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する