柔軟に働き方を選ぶ時代に必要なこと >>

画像の白い部分に色を付けるにはどうすればいいでしょうか?

<div id="main">の中には、赤、線には青の色を付けることはできたのですが、
<div id="main">の外側に色を付けるにはどうすればいいですか?

コードは、
<style type="text/css">
#main{width: 70%;
margin: 0 auto;
text-align: left;
background-color:red;
border:30px solid blue;}
</style>

</head>

<div id="main">
test
</div>

としています。

よろしくお願いします。

「<div id="main">の外に色を」の質問画像

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

A 回答 (3件)

div#main{position:relative;min-height:300px;border:10px blue solid;background-color:red;}


div#main:before{content:"";display:block;width:110%;height:110%;top:-5%;left:-5%;position:absolute;background-color:yellow;z-index:-5;}

borderは簡略化プロパティですから
border-style,border-width,border-colorをあわせて指定します。
    • good
    • 0
この回答へのお礼

ありがとうございました。

お礼日時:2014/11/07 22:26

HTMLを勉強するのであれば略さずにしっかりと書いたほうがいいと思います。


<body>は内容がある場合と最初の要素がstyleの場合は必須です。更に、<style>は<head>中になければなりません。
構文違反をしてもブラウザ上ではうまいこと解釈してくれますが、これから将来もっと本格的なものを作るにあたって、もしかしたらブラウザによって挙動が変わって面倒なことになるかもしれません。

表示とはあまり関係ないことですがborder:30pxというのは少しborderの意味から逸れている気がします。


さて、本題ですが。
<body>を略さず囲ってbodyに対してbody {background-color:色}と書いてみたらどうでしょう。


<html>
<head>
<title>title</title>
<style>
body { background-color:black; }

#main{
width: 70%;
margin: 0 auto;
text-align: left;
background-color:red;
border:30px solid blue;
}
</style>
</head>
<body>

<div id="main">
test
</div>

</body>
</html>
    • good
    • 0
この回答へのお礼

ありがとうございました。

お礼日時:2014/11/07 22:26

こんにちは



背景に色をつけるという解釈ですと
<body bgcolor="#808080">
<div id="main">
test
</div>
</body>
で色が変わります

スタイルシートで対応する場合は
<style type="text/css"> ~ </style>の中に
body {
background-color: #808080;
}

のように指定すれば背景色が変わります
    • good
    • 0
この回答へのお礼

ありがとうございました。

お礼日時:2014/11/07 22:26

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

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


人気Q&Aランキング