背景色を指定する
上部
スタイルシートを使ってボックスの背景色を指定する方法について説明していくよ。
背景色を指定するには「background-color」を使うんだよ。
色の指定は色の指定方法で説明した方法を使おう。
背景色を指定する
例えば、ページ全体の背景色を青色にしたい場合はスタイルシートに次のように書こう。
body{background-color:#0000ff;}
例えば、「見出し２」の背景色を赤色にしたい場合はスタイルシートに次のように書こう。
h2{background-color:#ff0000;}
学
なるほど。わかりましたー。
背景色を指定する際の注意
上部
文字色と背景色が似たような色になると文字が読みづらくなるので注意しよう。
また、見る人にとって目が疲れないような背景色を考えよう。
学
なるほど。わかりましたー。
では、早速僕の自己紹介の「見出し２」と「見出し３」の背景色を変えてみます。
h1{
text-align:center;
font-size:20px;
color:#0000ff;
}
h2{
font-size:15px;
color:#3366ff;
background-color:#FFFF99;
}
h3{
font-size:13px;
background-color:#CCFFFF;
}
p{
font-size:12px;
line-height:1.5em;
}
ul{font-size:12px;}
table{font-size:12px;}
学
「見出し２」の背景色を黄色っぽい色に、「見出し３」の背景色を水色にしてみましたよ。
学の自己紹介を新しいウィンドウで開く
お！なかなかいい色使いになりました。
