- ベストアンサー
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 この画像を見るとものすごい細い線が左右にあるのですが。 混乱中です。
- みんなの回答 （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タグで、文字を左に寄せてみましたが、これもこうするしかないですよね。
お礼
何度も回答してくださりありがとうございました。 またスタイルシートのことなど教えてください。