背景色を変更する。

2015年6月20日

タイトルの通り文背景の色を変更していきます。

背景を変更するときに使用するプロパティは
background-colorです。これに値を設定します。
background-color:red; /*背景を赤色　英単語で色を指定できます。*/
background-color:#ff0000; /*背景を赤*/
background-color:#000000; /*背景を黒*/
background-color:#0000ff; /*背景を青*/

サンプルコードのように、背景を設定したクラスと
HTMLタグ内でのタグ指定時にclassを設定して使います。
説明では分かりづらいので、サンプルコードをご覧ください。

ちなみに、CSSファイル4行目「*{margin:0;padding:0;}」の
「*」は全称セレクタと呼ばれるもので、すべてのタグに適用する場合に
使用します。この場合に「p」タグにあらかじめ設定されている値も
０にしています。「margin,padding」は空間を設けるために使用する
プロパティです。

pタグの背景色も変更することができます。

    #container{
        background-color: greenyellow;
    }
    *{margin:0;padding:0;}
    .bgred{
        width:150px;
        height:50px;
        background-color:#ff0000;}
    .bgblue{
        width:150px;
        height:50px;
        background-color:#0000ff;}
    .bggreen{
        width:150px;
        height:50px;
        background-color:#00ff00;}
    p{
        background-color:aqua;
    }

#container{

background-color: greenyellow;

}

*{margin:0;padding:0;}

.bgred{

width:150px;

height:50px;

background-color:#ff0000;}

.bgblue{

width:150px;

height:50px;

background-color:#0000ff;}

.bggreen{

width:150px;

height:50px;

background-color:#00ff00;}

background-color:aqua;

}

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>HTMLのメモ</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>

<div id="container">
    
    <div class="bgred"></div>
    <div class="bgblue"></div>
    <div class="bggreen"><p>こんにちは。</p></div>
</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>HTMLのメモ</title>

</head>

<body>

<div class="bggreen"><p>こんにちは。</p></div>

</div>

</body>

</html>