- ベストアンサー
http://www.tsurumi-u.ac.jp/admissio
http://www.tsurumi-u.ac.jp/admissions/index.html このページのように、コンテンツを真ん中に持ってきて、両サイドを灰色のバックグラウンド にしたいのですが、どのようすすればよいでしょうか。 ちなみに背景を、保存すると、一本の黒い線が出てきます。 これはどんな働きをしているのでしょうか。 http://www.tsurumi-u.ac.jp/common/base.gif この画像を見るとものすごい細い線が左右にあるのですが。 混乱中です。
- saori222
- お礼率36% (45/124)
- HTML
- 回答数5
- ありがとう数4
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
役に立つ情報か分かりませんが、一応 全体的な内容から ・中央にコンテンツを置きたい ・背景に画像を使いたくない ・ファイルを何枚も作りたくない ・スクロールバーを表示したくない こんな感じの事でいいのでしょうか？ heightの100％表示の方法です。試してみてください。 Html <body> <div id="wrap"> </div> </body> CSS * { margin: 0; padding: 0; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; text-align: center; background-color: #cccccc; overflow: hidden; } #wrap { margin: 0 auto; padding: 0; width: 800px; height: 100%; background-color: white; overflow: auto; } この方法ならスクロールバーを出しませんが、表示内容がブラウザの表示領域を超えてしまうとwrap部分にスクロールバーが表示されてしまいます。 役に立てばと思います。
その他の回答 (4)
- sora1tora2
- ベストアンサー率69% (27/39)
再びこんにちは ＞背景画像のx-repeatならこういう現象は起きないと。 との事でしたが、ブラウザのスクロースバーは背景に関係なく、高さを1000pxと設定した為では？ あと、背景画像の繰り返しはrepeat-x又はrepeat-yです。x-repeatとした場合、background-repeatは無効になってしまうと思うのですが？ コンテンツ（wrap）に背景色を設定したく無いのでしたらbodyの背景に背景色を設定し、コンテンツ（wrap）の部分に画像を設定すればよろしいかと思います。 まず、高さ1px、横（wrapの横幅）800pxの白い画像を制作し、保存、あとはCSSに body{ margin: 0; padding: 0; background-color: #cccccc; background-image: url(フォルダ名/ファイル名/拡張子); /*画像の繰り返し、垂直方向*/ background-repeat: repeat-y; /*背景の画像を中央の上に配置*/ background-position: center top; } こんな感じでは？ 正直どのようにされたいのか分かりません 的外れな回答かもしれませんが。
お礼
何度もありがとうございました。 repeat-xの間違いでした。 やはり白い画像を使って幅800px 縦1～10pxを中央からrepeatさせるしかない、とおもったのですが、 （基本に画像を使いたくない画像を使いたくない） frameの分割でできると今思いつきました。ちょっとやってみます。
補足
frameだと2枚3枚とページを作らなくてはいけないのでした・・・・。 frameのborder=0にすれば、画像を使わなくても中央を白の背景、 左右を灰色（なり黄色なり）にできるかと思ったのですが････。
- sora1tora2
- ベストアンサー率69% (27/39)
スイマセン text-align: left; です。
- sora1tora2
- ベストアンサー率69% (27/39)
補足読みました。 テキストを左揃え、に対してはCSSのwrapの所に text-align: center; を加える事で左揃えになります。 ただ、 >（右サイドバーが出てしまう） の部分ですが、理解力不足で申し訳ありませんが、どういう事でしょう？
補足
#wrap{ margin: 0 auto; padding: 0; width: 800px; height:1000px; background-color: #ffffff; } heightに1000pxと私が入れました。白のmain(body）を作るためです。 縦の長さは1000pxと長いですから、右にスクロールバーができてしまいますよね。 背景画像のx-repeatならこういう現象は起きないと。divにしてしまうとコンテンツの背景 というような解釈になってしまうんですね。
- sora1tora2
- ベストアンサー率69% (27/39)
こんにちは コンテンツを真ん中にするには、メインのコンテンツに対して左右のマージンをautoにします。 マージンautoが効かないIE5.5以下に対して、真ん中表示にするためにはtext-align: center;を使います。 背景画像の一本の黒い線はbodyに指定している背景画像(background-image)で、repeatにして画像を繰り返しています。通常、背景画像を指定しただけで、背景の画像はx方向、y方向に繰り返されます。 x軸方向のみなら、repeat-x y軸ほこうのみなら、repeat-y 繰り返したくないときは、no-repeat しかし、を灰色にとの事でしたので、単純に背景色(background-color)に灰色を指定すればいいかと思います。 例 Html <body> <div id="wrap"> </div> </body> CSS body{ margin: 0; padding: 0; text-align: center; /*背景画像*/ background-image: url(フォルダ名/ファイル名/拡張子); /*背景色*/ background-color: #cccccc; #wrap{ margin: 0 auto; padding: 0; width: 800px; } 参考になればと思います。
補足
========================= <html> <style> body{ text-align: center; margin: 0; padding: 0; background-color: #cccccc; } #wrap{ margin: 0 auto; padding: 0; width: 800px; height:1000px; background-color: #ffffff; } </style> <body> <div id="wrap"> <P align="left"> aaaaaaaa </P> </div> </body> </html> ======================= 詳しい説明ありがとうございました。 2つほどお聞きしたいことがあります。 id wrap に height 1000を加えてみました。 color指定した場合（画像ではなく）は、x-repeatのようなこと はできないわけですよね。 （右サイドバーが出てしまう） それから、 Pタグで、文字を左に寄せてみましたが、これもこうするしかないですよね。
関連するQ&A
- 背景画像を二つ指定
こんにちは。 全体の背景画像(斜めストライプの柄)と、 コンテンツ部分に背景画像(白で両サイドに線)を別々に指定したいのですが、 IEではうまく表示されましたがNetScape、Firefoxでは真ん中の画像が表示されません。。 URLはこちら http://ic.web6.jp/portfolio/rigtig.html 全体の背景はbodyに、 コンテンツにはdiv要素にrepeat-yで背景をそれぞれ指定しました。 どうすればIE以外でもうまく表示されるでしょうか？ 背景を指定しているCSSはこちら body { width : 762px; margin : 0 auto; background-image : url("images/top_bg.gif"); line-height:1.4; font-size:10pt; } div#wrap{ width : 762px; background-image : url("images/body_bg2.gif"); background-repeat: repeat-y; }
- ベストアンサー
- HTML
- ie6で数px画像がずれる
divに真ん中の背景を指定して <div> 上の画像 ～～～～～ 下の画像 </div> で角丸の背景を使ってデザインを実現したいのですが、なぜかIE6だけ画像と背景がずれています。 実際は～～～の部分にh2の画像とかを入れているのですが、これも同時にずれています。 他のブラウザと見比べると<div>＞画像の大きさでずれています。 これの解決方法や原因などご存じの方がいらっしゃいましたら教えてください！ お願いします・・・ <div class="r-contents"> <img src="img/r_bg_01.gif" /> <h2>画像<h2> <p>テテキストテキストキスト</p> </div> <img src="img/r_bg_03.gif" /> #u-right img { float: left; margin: 0px; } #u-right .r-contents h2 { margin: 0px; padding: 15px 0 20px 0; } #u-right .r-contents { background-image: url(img/r_bg_02.gif); background-repeat: repeat-y; } #u-right .r-contents p { margin: 0 0 0 0; padding: 15px; clear: left; } 色々試してぐちゃぐちゃです・・・
- 締切済み
- HTML
- CSSの事で質問があります。
始めまして、過去ログを色々みたのですが、CSSの記述もままならない状態でちんぷんかんぷんです・・ 何方か教えて下さい。 CSSを使いソフトはdreamweaverを使っているのですが 左右の余白を指定した背景を使い、真ん中にメインコンテンツを置きたいと考えています。 Dreamweaverで試行錯誤し、やってみたのですが、dreamweaver上では思ったとおりに行くのですが、IEで見てみると真ん中のメインコンテンツ部分がなくなっており、全て背景になってしまいました・・・お手上げ状態です。 タグは --html-- <title>○○</title> <link href="Untitled-3.css" rel="stylesheet" type="text/css"> </head> <body style="margin:0"> <div style="background-color:FDE9FC;width:550px;height:800px;margin:auto"> <img src="top.gif" alt="○○" width="550" height="150"></div> </body> </html> --CSS-- body { background-image: url(kabe_bsp111.gif); background-color: #FFFFFF; background-repeat: repeat-y,x; margin-left: 35px; } です。 また、普通に見れてるdreamweaver上で、メインコンテンツ部分の一番上に画像を張り、画像の下に文字を打つため改行をすると、最上部の画像の上に余白ができてしまいます。 この現象もまったくもって？？です。 何方かこんな無知な奴にお力を貸して下さい・・・ 先輩方よろしくお願いします！！
- ベストアンサー
- CSS
- 背景画像について
ブログの左右に空きがあるので空きの背景に イラストを入れました。 左右別のイラストを入れたいと思っていますがカラムを増やさずに 左端と右端にイラストを入れた１０００PXのGIFを使って背景を設定しましたが、PCのディスプレーによって左右の幅が自動調整されているようです。 固定する方法を教えてください。 スタイルシート body {background: url("http://***.ne.jp/***/image/user/1170964897.gif") repeat-y; background-position:0px 0px; padding: 1;}
- ベストアンサー
- ブログ
- 背景について
ブログの左右に空きがあるので左右別々のイラストつきの背景を入れたいのですが… ４カラムにすればよいのでしょうが、今は１０００PXのGIFを使って左右にイラストを使っています。 PCによっては左右の空きの幅が違う様なので、同じにしたいのですが どうすればよいのでしょうか？ スタイルシート body {background: url("http://***.ne.jp/***/image/user/1170964897.gif") repeat-y; background-position:0px 0px; padding: 1;} 多分もっと広い範囲を記述すれば良いのでしょうが １６００字以内とエラーになりましたので・・・
- ベストアンサー
- ブログ
- 背景画像を任意の位置に置きたい
こんにちは、Santaと申します。 いつもお世話になっております。 Firefox ８．０ Chrome １６．０ 背景画像を任意の位置に置きたいです。 画像のとおりです。 背景画像の大きさは width:950px; height:800px; です。 左右にオレンジ色の矩形を置いております。オレンジの矩形の間の白いところは、白の矩形です。 左右では、center真ん中に来るように、上からは200px;の位置に置きたいと思っております。 自分の書いたCSSでは、絵柄が少し表示されるだけで、全体の画像も表示することができませんでした。 css --------------------------------- body { background-image:url(../images/background_line_wall.gif); background-position:50% 50%; background-repeat:no-repeat; } ----------------------------------- どのように書きましたら、上から２００pxの位置へ、左、右からは中央へセンタリングできますでしょうか？ よろしくお願いいたします 失礼致します。
- ベストアンサー
- CSS
- 使用されている色を具体的に知るには
はじめまして。 会社のHPをちょっと修正するように頼まれました。 サイズ変更だけだったので、簡単だと思ったのですが、やっかいなことが出来てしまいました。 背景色部分なんです。画像が薄い灰色が左少しにあり、濃い灰色が残り大半数を占めているgifファイルをbackground-repeatで伸ばしてるようですが、サイズ変更により、そのgifファイルも作りなおししなければいけなくなってしまいました。 そこで問題なのですが、そのgifファイルがどの色（具体的なRGBの％）を知りたいのですが、知る方法をはないでしょうか？ または、そのgifファイルをどうにかして同じまま拡大することができないでしょうか？ 宜しくお願いいたします。 ちなみに、イラストレーター8.0しか会社にはなく、HP自体は業者に頼んで作成してもらったもので、その業者はありません。
- ベストアンサー
- グラフィックソフト
- CSS:3カラム センター固定
質問させてください。 コンテンツを挟んで左右違う背景をつけたウェブサイトを作ろうと思います。 3カラムのうちセンターのカラムだけは900px固定の中央配置で 左右のカラムはウィンドウ幅に合わせて可変幅にしたいのですが、 HTMLを <div id="left_box"> <!-- left background --> </div> <!-- /left background --> <div id="main"> <!-- main contents --> <div id="header"></div> <div id="contents"></div> <div id="footer"></div> </div> <!-- /main contents --> <div id="right_box"> <!-- right background --> </div> <!-- /right background --> としたときのCSSの適用の仕方について教えてください。 左右カラムには縦に長い異なった画像をbackground-imageで 横にタイルしていく方法にしようと思っています。 よろしくお願いいたします。
- ベストアンサー
- HTML
- 両端に背景画像を入れる
画面の左右両端に、縦に繰り返しで、画像を背景として入れたいのですがどうすればよいのでしょうか？ <STYLE type="text/css"> <!-- BODY { background-image : url("～～.gif"); background-position: left; background-repeat: repeat-y;} --> </STYLE> スタイルシートを使って、とりあえず左にだけ入れることは出来ました。 このあとを教えてください。お願いします。
- ベストアンサー
- HTML
- cssで左カラムと右コンテンツの長さをそろえる方法
cssで左カラムと右コンテンツの長さをそろえる方法 今ホームページを作っているのですが、左カラムの背景と右コンテンツの長さがそろわず困っています。 左は短めなので右が長くなっても左は短いままなのです。 【background-repeat:repeat-y;】で左の背景を繰り返しています。 どなたか分かるかた教えてください。 下のようになっています。 #wrapper…左カラムと右コンテンツ部分 #side…左カラム #main_contents…右コンテンツ部分 body{ width:930px; float:left; margin:0px; padding:0px; font-size:12px; background-color:#CCCC99; color:#333333; font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅"; line-height: 150%; height:100%; } #wrapper { margin:0px auto; background-color:#ffffcc; height:auto; min-height:100%; } #side { background-image:url(left_bg.gif); background-repeat:repeat-y; width:230px; float:left; margin:0; padding:0; } #main_contents{ width:685px; color:#333333; font-size:13px; font-family:"Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅"; line-height:170%; float:right; background-color:#ffffcc; padding-left:15px; margin:0; padding-bottom:200px; }
- ベストアンサー
- その他(ソフトウェア)
お礼
何度も回答してくださりありがとうございました。 またスタイルシートのことなど教えてください。