タイトルの通り文背景の色を変更していきます。
背景を変更するときに使用するプロパティは
background-colorです。これに値を設定します。
background-color:red; /*背景を赤色 英単語で色を指定できます。*/
background-color:#ff0000; /*背景を赤*/
background-color:#000000; /*背景を黒*/
background-color:#0000ff; /*背景を青*/
サンプルコードのように、背景を設定したクラスと
HTMLタグ内でのタグ指定時にclassを設定して使います。
説明では分かりづらいので、サンプルコードをご覧ください。
ちなみに、CSSファイル4行目「*{margin:0;padding:0;}」の
「*」は全称セレクタと呼ばれるもので、すべてのタグに適用する場合に
使用します。この場合に「p」タグにあらかじめ設定されている値も
0にしています。「margin,padding」は空間を設けるために使用する
プロパティです。
pタグの背景色も変更することができます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#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; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!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> |