新規無料会員登録で1000名様に電子コミック1000円分が当たる!!

初めて質問させていただきます。
当方はCSS初心者です。

画像(グラデーションのある角丸四角枠)を3分割し、それを背景画像として配置したいのですが、WinIE6などで表示するとどうしても画像に隙間ができてしまうのです。
IE7、FireFoxでは無事に希望通りに表示されています。

【HTML】
<div id="wrapper">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>

【CSS】
#wrapper{
width:680px;
height:auto;
border:0 auto;
padding:0;
}

.top{
width:650px;
height:10px;
background-image:url(img/01.gif);
background-position:top center;
background-repeat:no-repeat;
margin:0 auto;
padding:0;
}

.middle{
width:650px;
background-image:url(img/02.gif);
background-repeat:repeat-y;
margin:0 auto;
padding:0;
}

.bottom{
width:650px;
height:13px;
background-image:url(img/03.gif);
background-repeat:no-repeat;
background-position:bottom center;
margin:0 auto;
padding:0px;
}

といった感じで、ざくっとwrapperの中に背景画像をセンターで敷きたいのです。
.topと.middleの間には隙間は出来ないのですが、.middleと.bottomの間に数pxの隙間が出来てしまうのです。

制作環境はDreamweaver8、MAC/OSXですが、動作確認はWin/XPでも行っています。
何卒ご教示下さい。

このQ&Aに関連する最新のQ&A

A 回答 (6件)

隙間ができる方のCSSにfont-size:0px;で改善すると思います。



いかがでしょう?

ちなみに色々書いているので、また時間があるときにでも見てみてください。

参考URL:http://webnooboegaki.blog33.fc2.com/
    • good
    • 0

解決おめでとうございます。



>.titがh1だった部分です。
>もしかしたら解消できたのは他に理由があるのかもしれませんが
確認方法は簡単です。
その、上手くいっている状態のソースで、
<div class="tit">見出し</div> を
<h1>見出し</h1> に変えてみましょう。
問題ないようなら、
<h1 class="tit">見出し</h1> で。
    • good
    • 0

> ですが・・・この角丸四角枠は同一ページ内に数カ所に設置してあるのですが、隙間が解消できているものと解消できていないものがあるのです。


> ソース上では隙間が解消出来ている角丸四角枠ソースをコピペして多用しているので、なぜ隙間があったりなかったりするのかが分からないのです(涙)
> しかも今度はIE7では無事に表示出来ていてもWin/FireFoxやMac/IE5.2では隙間ができていたり・・・。
> ブラウザによっては希望通りに表示出来ているものもありますので、何が原因なのかさっぱりです。。。

"margin: 0 auto;"でIEでもセンタリングが成されているということは、標準準拠モードですよね。以下の様にサンプルを作成し、検証してみました。
IE6.0/7.0、Firefox2.0~、Opera9.25 on Windows XP、Safari2.x on Mac OSX、で同様の表示結果を得ています。
---------------------------------------------------------------------
【HTML】
---------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<link rel="stylesheet" href="./common.css" type="text/css" media="all" />
<title>サンプル</title>
</head>

<body>

<div id="wrapper">
<div class="top"></div>
<div class="middle">テキストテキストテキスト…</div>
<div class="bottom"></div>
</div>

</body>
</html>
---------------------------------------------------------------------
【CSS】
---------------------------------------------------------------------
body {
margin: 0;
padding: 0;
font-size: 12px;
line-height: 140%;
}
#wrapper {
width: 680px;
height: auto;
padding: 0;
}
.top {
width: 650px;
height: 10px;
background: url(img/01.gif) bottom center no-repeat;
margin: 0 auto;
padding: 0;
font-size: 1px;
line-height: 0;
}
.middle {
width: 650px;
background: url(img/02.gif) repeat-y;
margin: 0 auto;
padding: 0;
}
.bottom {
width: 650px;
height: 13px;
background: url(img/03.gif) top center no-repeat;
margin: 0 auto;
padding: 0;
font-size: 1px;
line-height: 0;
}
---------------------------------------------------------------------
オリジナルのCSSからの変更点は以下の通りです(本件の不具合とは直接関係ないものを含みます)。

・"#wrapper"の"border: 0 auto;"ですが、borderの値に"auto"というのはありません。初期値は0ですので、borderの定義は不要です。
・各classのbackgroundプロパティを一括表記でまとめました。
".top"と".bottom"のbackground-positionの値を逆にしました(ANo.1で回答済)。
・".top"と".bottom"には"line-height: 0;"と"font-size: 1px;"を追加。前者はANo.1で回答済みですが、後者は今回新たに付け足しました。角丸画像の高さが結構小さ目なので、親要素で定義されているfont-sizeの方が相対的に高さがオーバーしてしまうケースも考えられます。そうなるとheightが定義されていても、IE6では超えた分だけそのブロックの高さを広げてしまう(IE7や他のモダン・ブラウザでは広がりません)ので、更なる回避策として追加しました。

この状態で、<div class="top"></div><div class="middle">テキストテキストテキスト…</div><div class="bottom"></div>(以下、これをひとまとめにして「角丸ブロック」と呼ばせて頂きます)の部分をいくつもコピペして表示して見ましたが、いずれも不具合は起こりませんでした。箇所によって不具合が起きたり起きなかったり、ということであれば、この角丸ブロックが入るそれぞれの直近の親要素(があるならば)から何かを継承してしまっているのかもしれません。もしくは、角丸ブロックの中の<div class="middle">~</div>の中に入る要素が、ケースバイケースでレイアウトを崩す様なスタイルになってしまっているのかも…。

※ちなみに、MacのIE5.2は「非常に」CSS関連の挙動が不審な為、その不具合を解消しようとすると不必要にマークアップが入り組んでしまったりHackを使いまくったりしなければならない事が多いです。その為だけにHTMLやCSSの記述がごちゃごちゃしてくるのは効率が悪いですし、Mac版IEについては5.2を最後に数年前からMicrosoftは開発を中止してしまっており、もうモダン・ブラウザとは言えないと思いますので、考慮はしていません。MacユーザならSafariで充分事足りますし、他のモダン・ブラウザを使うという選択肢も沢山あるので…

> 再度ソースを見直してみたいと思います。

そうですね、一度"#wrapper"の中味を空にして、少しづつコンテンツを復活させて行きながら、不具合の起きるポイント毎にそこまでのCSSの定義やHTMLのマークアップをチェックして行けば、手掛かりが掴めるかもしれません。
    • good
    • 0
この回答へのお礼

誠に丁寧なアドバイスをありがとうございます!!!
「回答3」にも書かせて頂きましたが、なぜか問題が解消することができました!

【HTML】
<div class="top"></div>
<div class="middle">
<div class="tit">見出し</div>
<ul>
<li>テキストテキストテキスト</li>
<li>テキストテキストテキスト</li>
<li>テキストテキストテキスト</li>
<li>テキストテキストテキスト</li>
<li>テキストテキストテキスト</li>
</ul><br />
</div><div class="bottom"></div>

【CSS】
.top{
width:650px;
height:10px;
background-image:url(img/01.gif);
background-repeat:no-repeat;
background-position:bottom center;
margin:0 auto;
padding:0;
}

.middle{
width:650px;
background-image:url(img/02.gif);
background-repeat:repeat-y;
margin:0 auto;
padding:0;
}

.bottom{
width:650px;
height:13px;
background-image:url(img/03.gif);
background-repeat:no-repeat;
background-position:top center;
margin:0 auto;
padding:0;
line-height:0;
}

.tit{
font-size:16px;
color:#000066;
border-bottom:2px solid #66CCFF;
width:90%;
height:auto;
padding:0;
margin-left:20px;
font-weight:bold;
}

上記のソースは一部です。
もしかしたら不要・無効なものも含まれてるかもしれませんが、なぜかこれで表示が崩れずに済みました。
.titがh1だった部分です。
もしかしたら解消できたのは他に理由があるのかもしれませんが(汗)

とにかく貴重なアドバイスを誠にありがとうございました。
大変感謝しております!

お礼日時:2008/04/11 22:47

>残念ながら「隙間が出来る」という不具合は修正されませんでした。


へんですね、当方それで問題なくくっつきましたが。

上記ソースのみのtestページを作って(top、bottomは修正したもの)確認しても、隙間はできますか?
画像そのものに余白がついてるとかは……あ、IE7では問題ないんでしたっけ。

.bottom{} に font-size:13px; を加えるとどうでしょう?
    • good
    • 0
この回答へのお礼

重ね重ねアドバイスをありがとうございます。
実は・・・解決しました!!!
しかも私には本当によく分からない理由で解決しました!

角丸四角枠の中に、<h1>で見出しを付け、<ul>などのリストも使用していたのですが、まず<h1>で付けてた見出し内容を<h1>ではなくclassで差し替えました。
そしてリスト<ul>~</ul>の後に改行タグを入れました。
そうするとなぜか?角丸四角枠は隙間なく、どのブラウザでもきれいに表示されました!!!
以上のことが解決策になったのか少し疑問のままですが、とりあえず不具合は解消されましたのでご報告いたします!

お忙しい中を本当に丁寧なアドバイスを戴き、誠にありがとうございました。

お礼日時:2008/04/11 22:28

3分割上の背景は下配置(上が空白になっても中央ブロックにくっつく)、3分割下の背景は上配置(下が以下同文)にするべきでは。


.top{ background-position:top center;
.bottom{ background-position:bottom center;
 ↓
.top{ background-position:bottom center;
.bottom{ background-position:top center;
    • good
    • 0
この回答へのお礼

アドバイスをありがとうございます!
そのミスに全く気づいていませんでした。。。
早速修正させていただきましたが、残念ながら「隙間が出来る」という不具合は修正されませんでした。
ですが、本当に助かりました。
大変貴重なアドバイスをありがとうございました!

お礼日時:2008/04/11 08:56

今、IE6での検証ができない状態なので以下は全て推測ですが。



親要素から継承された行間や、コード中の改行コードによって隙間ができる事もあるのですが、本件は全要素が<div>で構成されているので当てはまらないかもしれません。だめもとで".bottom"に"line-height: 0;"を定義し、<div class="middle">テキスト</div>と<div class="bottom"></div>の間の改行コードを削除(もしくはコメントで隠す)を試してみては。
それから、別件で隙間のできるブロックのheightを0にして替わりにpadding-topにその値を定義したら解消された、というケースがありましたが、その場合も<div>ではないマークアップだったので、これも当てはまらないかも…
あと、背景画像の位置指定に関して、".top"が"background-position: top center;"で".bottom"が"background-position: bottom center;"と定義されていますが、上下の角丸背景画像を中央の".middle"に対してくっつけるのであれば、逆の指定の方が相応しい(上の画像を下合わせに・下の画像を上合わせに、という意味で)かと思います。勿論、それぞれの背景画像の実際の高さが各ブロックで定義されている高さと一致しているなら、結果はどちらでも同じなのですが。万が一、".bottom"の背景画像"03.gif"の高さが13pxより小さかったりすると、現状の位置指定では上方向に余白ができる事になります。

実地検証をしていないので、どなたか他の方が検証済みの上、的確な回答をして下さった場合はそちらを参考にして下さい。
    • good
    • 0
この回答へのお礼

ご丁寧なアドバイスをありがとうございます!
アドバイス頂いた項目は全て追加&修正してみました。
DIV間の改行コードを削除し、画像高さをチェックもしました。
画像高さに修正はありませんでした。
そして、"line-height:0;"を追加しますと、隙間が解消できました!!!
ですが・・・この角丸四角枠は同一ページ内に数カ所に設置してあるのですが、隙間が解消できているものと解消できていないものがあるのです。
ソース上では隙間が解消出来ている角丸四角枠ソースをコピペして多用しているので、なぜ隙間があったりなかったりするのかが分からないのです(涙)
しかも今度はIE7では無事に表示出来ていてもWin/FireFoxやMac/IE5.2では隙間ができていたり・・・。
ブラウザによっては希望通りに表示出来ているものもありますので、何が原因なのかさっぱりです。。。

再度ソースを見直してみたいと思います。
貴重なアドバイスをご丁寧に戴けた大変感謝しております。
本当にありがとうございます!

お礼日時:2008/04/11 09:58

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q背景画像をブラウザ上部に隙間なく張る

HTML タグだと思うのですが、たとえば88×38 の画像を
ブラウザ画面上部に隙間をあかないように貼るにはどうしたらいいのでしょうか。
例えば以下のように、

<TABLE border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#63cf63" background="gif/line.gif">

とかやると、いっけん、きっちり貼れているように
見えるのですが、リロードしたり、リンクからページを
たどったりすると、時々画面右側が丁度スクロールバー
ぶんくらいのスペースが空いてしまい、白く抜けて
しまいます。
非常に見苦しいので、なんとかしたいです。。。

Aベストアンサー

こんにちは。
いくつか方法あると思いますが、一番簡単なのは、88*38の画像の高さを3000くらいにして、余白をとった画像にしちゃって、<BODY>タグに背景指定する方法かな、と思います。
高さは、縦スクロールが最大に出た場合のページの高さ以上、が目安です(大抵、3000もあれば、事足ります)。

あとは、スタイルシートを使用する、という方法です。
横にだけ繰り返す、縦にだけ繰り返す、など指定できます。

横にだけ繰り返したいのであれば、

<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
<STYLE type="text/css">
<!--
BODY {
background: white url(画像URL);
background-repeat: repeat-x
}
-->
</STYLE>
</HEAD>
<BODY>
.....

というような感じで、スタイルシートを<HEAD>タグ内に記述します。
『repeat-x』とすると背景画像を横に1列だけ表示できます。縦なら、『repeat-y』に。

ただ、使い方や、ブラウザによってはスタイルシートの機能が使えなかったり、使えても、ユーザ側で使用しない、にチェックしてるとだめなので、微妙・・・・かな。

スタイルシートの詳しい解説については、以下を参照ください。

参考URL:http://www.zspc.com/stylesheets/

こんにちは。
いくつか方法あると思いますが、一番簡単なのは、88*38の画像の高さを3000くらいにして、余白をとった画像にしちゃって、<BODY>タグに背景指定する方法かな、と思います。
高さは、縦スクロールが最大に出た場合のページの高さ以上、が目安です(大抵、3000もあれば、事足ります)。

あとは、スタイルシートを使用する、という方法です。
横にだけ繰り返す、縦にだけ繰り返す、など指定できます。

横にだけ繰り返したいのであれば、

<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
<STYLE ty...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

QCSS、width100%でもできる余白

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<div id="logo"></div>
<div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div>
</div>
</div>
<div id="contents"><div class="centerbox">contents</div></div>

<div id="footer"><div class="centerbox">footer</div></div>

</body>
</html>


CSS

body{color:white; width:100%;}
.centerbox{width:500px; height:100%;}
a:hover{background-color:red;}

/*base layout*/
#header{width:100%; height:auto; text-align:center; background-color:black;}
#lang{text-align:right;}
#lang li{list-style:none; display:inline; margin-left:10px}
#logo{float:left; width:150px; height:80px; background-color:white;}
#menu{text-aign:right; margin-top:50px;}
#menu li{list-style:none; display:inline; margin-left:10px}
#contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;}
#footer{width:100%; height:100px; text-align:center; background-color:black;}

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<di...続きを読む

Aベストアンサー

スタイルシートの書き始めに、
html,body{margin:0;padding:0;}
の一行を入れておくようにすれば回避できます。
 これは常に入れておきましょう。

 なお、今後のために・・・どの部分が影響しているかは
*{border:solid 1px red;}
を入れてみると、わかりやすいです。

また、firefoxの開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にあるFirebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/details/1843 )を使うと、このあたりがよくわかると思います。

Qframeset要素を使わずに画面を分割したい

アンテナ(下記サイト)のように左にメニュー画面を、右にコンテンツを表示するホームページを作成したいと考えています。
https://antenna.jp/

ひとつのウインドウで画面を2つにわけるためにはhtmlのframeset要素を使えばできることは把握しているのですが、上記サイトのアンテナではframesetを使わずに画面分割をしています。

見た目やレスポンシブ対応のしやすさも考え、できればframesetを使わずに画面分割を行いたいのですが、どのようにすれば可能でしょうか。
メニュー部分とコンテンツ部分を別々にスクロールできるようにしたいです。

どなたか分かる方教えてください。

Aベストアンサー

長くなるから、参考ページ参照。

参考URL:http://www.geocities.jp/eijispace/2012/0419.html

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL:http://www.htmq.com/style/border-spacing.shtml

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Q訪問済のリンク色を変えない方法

テキストリンクをクリックすると、次から色が変わりますよね?クリック前とクリック後と一緒の色にしたいんです。前に教えてもらったんですが、ページ内の全てのリンクの色が同じ色になってしまったんですが、そういうものなんですか?文字別に色を変えて指定することはできますか?どういうタグを入れたら良いか教えて下さい。

Aベストアンサー

BODYタグをいじります。
<body link="クリック前の色" vlink="クリック後の色">
のようにします。色の部分は#3333FFとか#FFFFFFのように
お好みの色をいれます。

文字別に色を指定するときも
<a href="link_saki.htm"><font color="#FF0066">リンク</font></a>
のように<a>の中に<font color>で指定すれば可能です。

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

QHTML/CSS 背景

下記のように背景の色を3色にしたいのですが、どのようにすればよいのでしょうか?
BODとDIVを二つ作り、いろいろやったのですがうまく行きません。

初歩的な質問だとは思いますが、よろしくお願いします。

Aベストアンサー

1例です(あらゆるブラウザーでは試してませんが)
<meta charset="UTF-8">
<title>HTML 5 complete</title>
<style type="text/css">
#piyo {background-color:gray;
position:absolute;
top:30%;
left:0px;
width:100%;
height:100%;
}
#hoge {background-color:green;
position:absolute;
top:0px;
left:0px;
width:100%;
height:30%;
}
#fuga {background-color:yellow;
position:absolute;
top:25%;
left:33%;
width:33%;
height:100%;
}
</style>
</head>
<body>
<div id="hoge">緑色緑色緑色緑色緑色緑色緑色緑色緑色緑色緑色緑色緑色緑色緑色緑色</div>
<div id="piyo">灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色</div>
<div id="fuga">黄色黄色黄色黄色黄色黄色黄色黄色黄色黄色黄色黄色黄色黄色黄色黄色黄</div>
</body>
</html>

1例です(あらゆるブラウザーでは試してませんが)
<meta charset="UTF-8">
<title>HTML 5 complete</title>
<style type="text/css">
#piyo {background-color:gray;
position:absolute;
top:30%;
left:0px;
width:100%;
height:100%;
}
#hoge {background-color:green;
position:absolute;
top:0px;
left:0px;
width:100%;
height:30%;
}
#fuga {background-color:yellow;
position:absolute;
top:25%;
left:33%;
width:33%;
height:100%;
}
</style>
</head>
<body>
<div id="hoge">緑色緑色緑色緑色緑色緑色緑...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング