• ベストアンサー
  • 困ってます

http://www.tsurumi-u.ac.jp/admissio

  • 質問No.5620847
  • 閲覧数119
  • ありがとう数4
  • 回答数5

お礼率 36% (45/124)

http://www.tsurumi-u.ac.jp/admissions/index.html

このページのように、コンテンツを真ん中に持ってきて、両サイドを灰色のバックグラウンド
にしたいのですが、どのようすすればよいでしょうか。

ちなみに背景を、保存すると、一本の黒い線が出てきます。

これはどんな働きをしているのでしょうか。

http://www.tsurumi-u.ac.jp/common/base.gif

この画像を見るとものすごい細い線が左右にあるのですが。
混乱中です。

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

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

ベストアンサー率 69% (27/39)

役に立つ情報か分かりませんが、一応

全体的な内容から

 ・中央にコンテンツを置きたい
 ・背景に画像を使いたくない
 ・ファイルを何枚も作りたくない
 ・スクロールバーを表示したくない

こんな感じの事でいいのでしょうか?

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部分にスクロールバーが表示されてしまいます。

役に立てばと思います。
お礼コメント
saori222

お礼率 36% (45/124)

何度も回答してくださりありがとうございました。
またスタイルシートのことなど教えてください。
投稿日時:2010/01/30 20:21

その他の回答 (全4件)

  • 回答No.4

ベストアンサー率 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;
}

こんな感じでは?

正直どのようにされたいのか分かりません
的外れな回答かもしれませんが。
 
補足コメント
saori222

お礼率 36% (45/124)

frameだと2枚3枚とページを作らなくてはいけないのでした・・・・。
frameのborder=0にすれば、画像を使わなくても中央を白の背景、
左右を灰色(なり黄色なり)にできるかと思ったのですが・・・・。
投稿日時:2010/01/26 13:29
お礼コメント
saori222

お礼率 36% (45/124)

何度もありがとうございました。
repeat-xの間違いでした。

やはり白い画像を使って幅800px 縦1~10pxを中央からrepeatさせるしかない、とおもったのですが、

(基本に画像を使いたくない画像を使いたくない)

frameの分割でできると今思いつきました。ちょっとやってみます。
投稿日時:2010/01/26 13:20
  • 回答No.3

ベストアンサー率 69% (27/39)

スイマセン 

text-align: left;

です。
  • 回答No.2

ベストアンサー率 69% (27/39)

補足読みました。

テキストを左揃え、に対してはCSSのwrapの所に

text-align: center;

を加える事で左揃えになります。

ただ、

>(右サイドバーが出てしまう)

の部分ですが、理解力不足で申し訳ありませんが、どういう事でしょう?
補足コメント
saori222

お礼率 36% (45/124)

#wrap{
margin: 0 auto;
padding: 0;
width: 800px;
height:1000px;
background-color: #ffffff;
}

heightに1000pxと私が入れました。白のmain(body)を作るためです。
縦の長さは1000pxと長いですから、右にスクロールバーができてしまいますよね。

背景画像のx-repeatならこういう現象は起きないと。divにしてしまうとコンテンツの背景
というような解釈になってしまうんですね。
投稿日時:2010/01/26 01:16
  • 回答No.1

ベストアンサー率 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;
}

参考になればと思います。
補足コメント
saori222

お礼率 36% (45/124)

=========================

<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タグで、文字を左に寄せてみましたが、これもこうするしかないですよね。
投稿日時:2010/01/25 18:54
関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ