- ベストアンサー
横幅が可変の背景
ぜ り～（@-Jelly-）の回答
- ぜ り～（@-Jelly-）
- ベストアンサー率34% (132/383)
>そうすると、幅は800pxにしかならないじゃないですか。 >でもラインだけはウインドウ１００％にしたいんです。 ブラウザが８００ｐｘだとして、 ラインは１０００ｐｘにしたいとかそういうことですか？ つまり、ブラウザの枠を超えて表示させたい、と。 （自分の読み違いであることを祈ってますが。） もしそれれなら、無理です。 HTMLを「ブラウザで表示させている」のですから。
関連するQ&A
- ホームページの横幅が広くて、印刷すると切れてしまう。
会社のホームページを作っていて、横幅の設定について質問させて下さい。 横幅720pxで作成していたのですが、印刷する時に切れないように横幅を短くして欲しいと言われました。windowsのIEから印刷しようとすると、右側が切れてしまいます。印刷の設定を変えればよいのですが、その設定をしていない（分からない）人も多いようです。 大企業のHPを見てみると横幅700～780pxが多いので、これが主流だと思っていたのですが、やはり右側が切れずに印刷できるように横幅短め（600px以下？）で、ホームページを作成した方がよいでしょうか？ 私としては印刷幅に合わせると横幅がかなり狭くなるように思うので、モニタ表示を優先して作成したいのですが・・・ みなさんはどうしていますか？ご意見伺えたらと思います。
- ベストアンサー
- その他（インターネット・Webサービス）
- 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>
- 締切済み
- HTML
- 背景だけをフル画面表示したい
背景だけをフル画面で表示し、コンテンツ部分は 固定(例えば700ｐｘ×500ｐｘ)の大きさで常に中央に表示されるようにしたいのですが、やり方が分かりません。 どなたか お力をお貸し下さい。 よろしくお願いします。
- 締切済み
- Flash
- 【横幅を可変（？）】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/ どなたかご教授頂けたら幸いです。 よろしくお願い致します。
- 締切済み
- HTML
- 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 たまにですが、とてもまともな企業のウェブサイトが、左に寄って表示されているケースを何件か見かけました。講習では、モニターの左右のセンターに表示されるようにコードを書くように指導されましたが、まともな企業のウェブサイトが左寄りに表示されているのを見ると、何か世間の事情が変わり始めたのかと不思議に思ってしまいます。どういうことなのか、教えてください。 よろしくお願いします
- 締切済み
- その他（インターネット・Webサービス）
- 背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示する方法
背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示するようにしたいと思ったのですが、背景画像も常に中央に表示されてしまいます。 そのため、上記の現象の対処法について何かご教示いただける方がいらっしゃいましたら、よろしくお願いします。 【やりたい事】 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の範囲内で左寄せしたり右寄せしたいのですが テーブル系タグや、コンテンツの両サイドの余白を固定で設定して対応すると 閲覧環境によってはコチラが意図していない形で表示されてしまう事は無いのでしょうか？？ また、それ以外の方法で適しているタグやスタイルシートがあれば是非教えて下さい 宜しくお願い致します。
- 締切済み
- HTML
お礼
一つ追加補足。 ブラウザのウインドウは最大化して見た時の話です。 個人の使用環境によっては、小さい窓で見る方もいらっしゃるでしょうから。(^^;)
補足
回答ありがとうございます。 中々表現が難しいですね(^^;) >つまり、ブラウザの枠を超えて表示させたい、と。 >（自分の読み違いであることを祈ってますが。） 違います。 ウインドウ100％にしたいんですが、ブラウザを超えてではありません(笑) んー、どうやって説明したらいいんだろう（＞＜；） http://www.htaccesseditor.com/ 例えば上記参考ページ、ＴＯＰページで「Ctrl+A」をすると、 コンテンツ部分だけ選択された状態になりますよね？ 仮にそこの横幅は800pxとするじゃないですか？ でも、「.htaccess作成 オンライン上でいとも簡単に.htaccessファイルを作成」とある、緑のラインはウインドウ100％で表示されてますよね？ この表現方法が知りたいんです。 例えば私が思いついたこの表現方法のやり方は、 横100％のテーブルを一つ作って、その中に横800pxのテーブルを組む。 そうすると横100％の背景にx方向だけ繰り返しを指定すれば、 ラインはウインドウ100％でコンテンツは800pxの表示になるとは思います。 単純にこんな方法でいいのかわからなくて、もしかしたらもっと良い方法があるのではと思って質問しました。 分かられないですよね？？(^^;)