HTMLで背景色を指定する基本
Webページの背景に色を付けたい場合、CSSのbackground-colorプロパティを使用して背景色を指定します。以下の2つの要素を理解することで、背景色を自由に設定できます。
- background-colorプロパティの書き方
- 色を表現する方法
それぞれの要素には特徴があり、組み合わせて使用することで効率的に背景色を設定できます。以下では各要素について詳しく解説していきます。
【PR】プログラミングや生成AIを無料で学べる「コードキャンプフリー」
background-colorプロパティの書き方
background-colorプロパティは、HTML要素の背景に色を適用するCSSプロパティです。プロパティとは、要素のスタイルを定義するための設定項目のことです。このプロパティをbodyタグに適用することで、ページ全体の背景色を設定できます。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<h1>背景色を指定したページ</h1>
</body>
</html>
上記のコードでは、styleタグ内でbodyセレクタに対してbackground-colorプロパティを指定しています。この方法により、ページ全体の背景が薄いグレー(#f5f5f5)に設定されます。
色を表現する方法
背景色の値には、カラーコードまたはカラーネームを使用して色を指定します。カラーコードは#ffffffのように16進数で記述し、カラーネームはredやblueなどの英語の色名で指定します。
<!DOCTYPE html>
<html>
<head>
<style>
.box1 {
background-color: #ff6347;
}
.box2 {
background-color: tomato;
}
</style>
</head>
<body>
<div class="box1">カラーコードで指定</div>
<div class="box2">カラーネームで指定</div>
</body>
</html>
カラーコードは細かい色の調整が可能で、カラーネームは直感的に色を選べる利点があります。両方の指定方法で同じ色を表現でき、上記のコードでは両方ともトマト色が表示されます。
【PR】『Python』を学べる企業・個人向けのプログラミングコース
CSSを記述する3つの場所
背景色を設定するCSSは、記述する場所によって以下の3つの方法に分類されます。
- インラインスタイル
- 内部スタイルシート
- 外部スタイルシート
それぞれの方法には適した使用場面があり、プロジェクトの規模や管理のしやすさに応じて選択できます。以下では各記述場所について詳しく解説していきます。
インラインスタイル
インラインスタイルは、HTMLタグに直接style属性を記述してCSSを適用する方法です。特定の要素だけを素早く装飾したい場合に便利ですが、複数箇所を管理する際は効率が悪くなります。
<!DOCTYPE html>
<html>
<body style="background-color: #e6f3ff;">
<h1>インラインスタイルで背景色を設定</h1>
<p style="background-color: #ffffcc;">この段落だけ背景色が異なります</p>
</body>
</html>
上記のように、HTMLタグ内のstyle属性に直接CSSを記述することで、その要素にのみスタイルが適用されます。ただし、コードの可読性が低下するため、大規模な開発では推奨されません。
内部スタイルシート
内部スタイルシートは、HTMLのhead要素内にstyleタグを記述してCSSを定義する方法です。1つのHTMLファイル内でスタイルをまとめて管理できるため、単一ページのデザインに適しています。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f5f5f5;
}
.highlight {
background-color: #ffeb3b;
}
</style>
</head>
<body>
<h1>内部スタイルシートで背景色を設定</h1>
<p class="highlight">この部分が強調されています</p>
</body>
</html>
この方法では、セレクタを使用して複数の要素に対して一括でスタイルを適用できます。インラインスタイルよりも保守性が高く、スタイルの一元管理が可能です。
外部スタイルシート
外部スタイルシートは、CSSファイルを別に作成してHTMLから読み込む方法です。複数のHTMLファイルで共通のスタイルを使用できるため、大規模なWebサイトの開発に最適です。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>外部スタイルシートで背景色を設定</h1>
</body>
</html>
/* style.css */
body {
background-color: #ffffff;
}
外部スタイルシートを使用することで、HTMLとCSSを分離して管理できるため、メンテナンス性が大幅に向上します。Webサイト全体のデザインを統一する際に最も推奨される方法です。
※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。
ITやプログラミングに関するコラム
【AWS】認定資格12種類の一覧や難易度、費用などを解説
Canvaとは？使い方やアカウント登録などを初心者向けに解説
git configで設定情報を確認・表示する方法
「Pythonはやめとけ」と言われる理由と学習するメリット
Ubuntuのversionを確認する方法
