ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

ページの背景色を変える

背景色を変更するスタイル

ページの背景色を変更するには、background-colorプロパティで色を指定します。

.haikei {
background-color:#指定する色;
}

色の指定は、カラーコードやキーワードで指定します。
例えば赤色にしたい場合は「F00」、青色の場合は「00F」などを指定します。

※カラーコードについては「Webページ用のカラーコード一覧表」で詳しく説明しています。

ページの背景色を変更する

例えば、下画像のような背景色が真っ白のページがあるとします。

背景色の変更方法

こちらの背景色を青に変更する場合、以下のように記述します。

[CSSの記述例] ページの背景色を丸ごと変更するので、.(ドット)や#(シャープ)は付けずにbodyだけにします。
body {
background-color:#39C;
}
[HTMLの記述例]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>背景色の変更</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<h1>背景色の変更</h1>

<p>ページ背景色の変更サンプルページです。</p>

</body>
</html>

[表示サンプル]
背景色を変更した図

これで背景色が青色に変更されました。
この例では<body>~</body>、つまりページ全体の背景色を一気に変更しています。

覚えておきたいポイント

一度設定してしまえばOK

一度bodyに背景色を設定してしまえば、これまでに作ったページや新規に作成するページにも背景色が表示されます。

エリアごとに背景色を指定する

エリア(コンテンツ)ごとに背景色を変更するには、任意のセレクタのbackground-colorプロパティで色を指定します。

例えば、下画像ページの「ヘッダー」「サイドナビ」「フッター」をそれぞれ違う色に指定するとします。

エリアごとの背景色設定方法
[CSSの記述例] ※実際はもっと多くのプロパティを使っていますが、説明のため省略しています。

header { ←ヘッダー
background-color:#C00;
}

#sidenavi { ←サイドナビ
background-color:#F93;
}

footer { ←フッター
background-color:#3CF;
}

[HTMLの記述例]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>背景色の変更</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<div id="wrap">

<header>
<h1>ヘッダー</h1>
</header>

<div id="sidenavi">

<h2>サイドナビ</h2>
<nav>
<ul>
<li>サイドナビ</li>
<li>サイドナビ</li>
<li>サイドナビ</li>
<li>サイドナビ</li>
<li>サイドナビ</li>
<li>サイドナビ</li>
</ul>
</nav>
</div>

<article id="contentsbox">

<section>
<h2>メインコンテンツエリア</h2>
<p>テキストテキスト</p>
</section>

<section>
<h2>テキスト</h2>
<p>テキストテキスト</p>
</section>

</article>

<footer>
<h2>フッター</h2>
<address>テキストテキスト</address>
</footer>

</div>

</body>
</html>

[表示サンプル]
背景色を変更した例

このように、ページ全体だけではなく任意のコンテンツの背景色も変更することが可能です。

目立たせたいコンテンツや、サイドナビなどのナビゲーションの背景色を変更しておけば、見やすく使いやすいページにすることができます。

一気にページ全体を変えるにはbodyに。
エリアごとに変えるには.(ドット)や#(シャープ)を使い、任意のエリアにスタイルを適用すると覚えておけばOKです。

覚えておきたいポイント

目的に応じて使い分け

ページ全体の背景を変更する場合は、bodyセレクタのbackground-colorプロパティで色を指定します。

それぞれ異なったコンテンツの背景色を変更する場合には、任意のセレクタのbackground-colorプロパティで色を指定します。

背景に画像を表示する
« 前のページへ インデントの幅を調整する

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。