ページや枠の背景色を設定する - CSS
CSSを用いてページや枠の背景色を変更するコードを紹介します。
ページの背景色を変更する
コード
PageBackgroundColor.css
body {
background-color:#76cff1;
}
PageBackgroundColor.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="PageBackgroundColor.css" />
</head>
<body>
</body>
</html>
解説
スタイルシートのbackground-colorプロパティを設定することで、背景色を変更します。上記の例ではBodyタグのスタイルでbackground-colorに#76cff1を指定しているため、ページ全体の背景色が#76cff1になります。
実行結果
HTMLページをWebブラウザで表示します。下図のページが表示されます。背景色が"#76cff1"になります。
枠の背景色を変える
コード
FrameSimple.html
.SimpleFrame {
background-color:#76cff1;
width:320px;
height:120px;
margin-left:96px;
margin-top:96px;
border:3px solid #ff6a00;
}
FrameSimple.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="FrameSimple.css" />
</head>
<body>
<div class="SimpleFrame">フレーム</div>
</body>
</html>
解説
background-colorを指定することで要素の背景色を変更できます。上記の例ではdiv枠に設定したクラス"SimpleFrame"のbackground-colorを#76cff1に指定することで、div枠の背景色が#76cff1になります。
実行結果
HTMLページをWebブラウザで表示します。下図のページが表示されます。DIV枠内の背景色が"#76cff1"になります。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
