- ベストアンサー
スタイルシート：1段組のレイアウトで両側の余白に色をつけたい。
http://www.oakis.co.jp/ 上記のページのように、HPの中身の部分は1段組のレイアウトにして、その両側の余白のレイアウトに色をつけたいのですが、どのようにすれば実現できるのでしょうか？ 今自分で作っているものとしては、<div>でbodyの全体をくくって、スタイルシートで幅を設定して配置を中心にすることで上のページのようなレイアウトにはしているのですが、両側の余白に色のつけ方が分かりません。 よろしくお願いします。
- nabewari
- お礼率39% (416/1045)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
bodyに背景色を指定すればいいと思います。
その他の回答 (1)
- indigo_sea
- ベストアンサー率46% (45/96)
参考ページ
関連するQ&A
- divをつかった2段組について教えてください。
すみませんが、思うように段組ができないので、教えてください。 divを使って、次のようなレイアウトを実現させようとしています。 「メインとサブからなる2段組で、メインは幅400px以上、サブは幅200px固定、スクリーンにあわせてメインは大きくなる」(このサイトのようなレイアウトです。) メインを固定でならできるのですが、スクリーンの大きさに合わせる方法が分かりません。 たたき台のコードを添付します。どこを直せばよいのか、教えていただけると幸いです。 -------------------------------------------html------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="/style.css" type="text/css"> </head> <body> <div id="header"> ヘッダ </div> <div id="box"> <div id="boxMain"> いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい </div> <div id="boxSub"> ううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう </div> </div> <div id="footer"> フッタ </div> </body> </html> ------------------------------css-------------------- div#header { width: 600px; } div#box { } div#boxMain { float: left; margin: 0px; } div#boxSub { width: 200px; float: right; } div#footer { clear: both; width: 100%; }
- ベストアンサー
- HTML
- 左右の余白に色指定
左右の余白に色指定というのは、以下のようなものです。 http://www.kandamasanori.com/ このように灰色の背景の上にページが乗っかっているようなページを作りたいと思っています。 そこで、スタイルシートで body{ background-color:#cccccc } と指定したうえで、ページの各部分において、 div block1{ background-color:#ffffff } というふうにしてみたのですが、これだと、たとえばblock1とblock2の間の余白部分が灰色（#cccccc）になってしまいます。 私の説明では舌足らずかと思いますが、何かいい方法があればアドバイスよろしくお願いいたします。
- ベストアンサー
- ブログ
- スタイルシートで三段組を作りたいのですが
私はテキスト主体のサイトを持っているのですが、今まではテーブルを使ってレイアウトを構成してきました。 上下左右のマージンをパーセントやピクセルで指定してメインであるテキストがあるテーブルは可変というスタイルです。 数年前まではディスプレイの解像度がそれほど多様ではなかったので、これでも大丈夫だったのですが、最近の横長ディスプレイの普及のため、この方法では環境によっては横に長く表示されてしまうため、divタグを使っての段組に変えて行こうと思いました。 そこで段組のスタイルシートについて説明しているサイトなどを見てみたのですが、私がやりたいと思っているレイアウトが見つからなくて困っています。 ようは三段の段組を作りたいのですが、ボーダー壁紙を使うことが多いので左部分を空けたいのです。 A、B、Cの三段組で右に寄っているレイアウト、つまりBに720ピクセル、Cに80ピクセルの幅を持たせ、一番左のAの部分を可変にしたいのですが、これは可能ですか？ 私の調べたところ、AとBを指定してCを可変にするレイアウトはあったのですが、上記のようなものは見当たりませんでした。 それともう一つ、Bの720ピクセルのボックスをページの中央にレイアウトする場合は、左右のボックスはどういう指定をすればいいのでしょうか？ 上記のような段組の作り方、あるいは説明しているサイト等ありましたら、教えて下さい。 よろしくお願いします。
- ベストアンサー
- HTML
- ホームページの余白に色をつけたい
質問の趣旨は、以下のようなホームページを作りたいということです。 http://www.kandamasanori.com/ このように灰色の背景の上にページが乗っかっているようなページを作りたいと思っています。 そこで、スタイルシートで body{ background-color:#cccccc } と指定したうえで、ページの各部分において、 div block1{ background-color:#ffffff } というふうにしてみたのですが、これだと、たとえばblock1とblock2の間の余白部分が灰色（#cccccc）になってしまいます。 私の説明では舌足らずかと思いますが、何かいい方法があればアドバイスよろしくお願いいたします。
- ベストアンサー
- HTML
- word 2007の文字数・２段組みのレイアウト
Ward ２００７ ビスタを使っています。来週〆切りの文集の編集でてこづっています。いくら調べても原因がわかりません（泣） ２９文字×３０行２段組み 余白 A4上下２０ｍｍ 左右２５ｍｍが指定通りにいきません。 Ward ２００７ ビスタを使っています。 来週〆切りの文集の編集で（PTAの広報部）てこづっています。いくら調べても原因がわかりません（泣） 原稿指定で、２９文字×３０行 ２段組み 余白 A4 上下２０ｍｍ 左右２５ｍｍ なのですが、指定をしても、 ２９文字にならないどころか、打ちこんでいる時点で (上)にずれていて、余白がしたがかなり広く(上)が狭い状態です。 文字数も２４文字になっています。 他の部員さんは、皆普通に指定したら 難なくちゃんと指定通りにできたということで 綺麗に印刷をしてきたんですが、 同じように指定しても 私の場合はまったく違う形になってしまいます。 もちろん印刷しても、そのままで印刷されて 他の方のとは余白もレイアウトもまったく違います。 いろいろと自分なりに調べたのですが まったく原因がわかりません。 来週までに１１人分の文集の原稿を 打ちこんでプリントアウトしなければならず焦っています。 どなたかお知恵を貸して下さい。 添付画像のように ↓の余白が多くなって 上が狭いです。 設定は何度見なおしても ページ設定の 上下２０ｍｍ 左右２５ｍｍ 文字数 ２９文字 行数３１ 用紙A4 ヘッダーフッダ― １０ｍｍ となっています。 いろいろ調べても 上の状態でちゃんとレイアウトできるようなのですが・・・
- ベストアンサー
- オフィス系ソフト
- ワードの2段組みで
こんにちは いつもお世話になっています。 ワード2010を使っています。 段組みで2段にしたときに特定行を二段目の最初の行に配置する方法を教えてください。 例えば、元の文書が一段でA-Bというパラグラフ構成になっています。 Bの最初の行に段区切りを置いて二段の段組みにすると、Aパラグラフが長くて二段のまま改ページしてしまい、次のページで二段目にBがきています。 Aパラグラフは二段組みの一段目に改行しても納めて、BパラグラフはAパラグラフの最初の行と同じ行に二段組みの二段目に配置したいのです。 説明下手ですみません。サンプルつけました。現状が「前」で、「後」のようにしたいです。よろしくお願いします。
- ベストアンサー
- その他MS Office製品
- [スタイルシート] マージンとその他の部分を違う色にしたい
検索等で調べてみましたが、 方法を見つけることが出来なかったので 質問させていただきます。 今までテーブルを使ってレイアウトをしていましたが、 余裕も出てきたのでスタイルシートを使うことにしました。 テーブルの場合は<body bgcolor="color1">と <tr bgcolor="color2">で2つの背景色を使えたのですが、 スタイルシートでこれを実現するにはどうすればいいのでしょうか。 全体を<div>や<p>で囲んでbackground-colorを指定するという 強引な事も思いつきましたが、もっとまとも(?)な方法を探しています。 ちなみにスタイルシートは外部のものを読み込ませるようにしています。 テーブルは表のためだけに使うべきだと思うので、 テーブルを使わない方法でよろしくお願いします。
- ベストアンサー
- CSS
- ブログのレイアウトを両サイドバー三段組にしたいのですが・・・
こんばんはlivedoorブログのレイアウトに関して質問をさせてください。 現在自分のブログのレイアウトを両サイドバーの三段組にしようと思っております。毎日コミュニケーションズの『ポータル、ブロバイダ別 blogデザインカスタマイズ辞典』には document.write('</div><divide="links2">'); というタグを作成し、side2.jsの名でそれを保存し、アップロードするように書いてあります。しかしlivedoorブログでアップロード可能なファイルは GIF, JPG, PNG, BMP のみらしく、何度試みてもエラーが発生してしまうのです。それとも僕のやり方が間違っているのでしょうか？ ご回答はお時間がある時で結構です。よろしくお願いします。
- ベストアンサー
- ブログ
- スタイルシートdivについて
こんばんは。 スタイルシートのDIVについて教えて下さい。 今、幅720pxのテーブルをDIVに変えようと悪戦苦闘している最中です。 DIVについてはほとんど無知なので、あちこちのサイトのスタイルシート講座を覗きながらなんとか作ってみました。 ようは幅720pxのボックスの中に文字を左寄せで配置し、ボックス自体は画面の中央に(左右のマージンを同じに)したいのです。 そのソースなのですが、スタイルシートを div#main{width:720px; margin-left:auto; margin-right:auto; text-align:left; line-height:175%;} と記述し、 HTMLを <div id="main">○○○</div> としました。○○○がテキスト部分です。 でもIE7で確認したところ、ボックスが左寄りになってしまっています。 しかし、どういうわけかFirefoxとOperaではちゃんと中央に配置されているのです。 いったいどこに問題があるのでしょうか。 わかる方、いらっしゃいましたら教えて下さい。
- ベストアンサー
- HTML
