- 更新日: 2020年10月07日
- 公開日: 2018年12月04日
【初心者向け】HTMLで背景色を設定する簡単な方法
HTMLで文章を書いたり写真を載せられるようになったら、次は背景にも一工夫してみましょう。
今回はHTMLの背景に好きな色を表示したり、背景をグラデーションにする方法を入門者にもわかりやすいように解説します！
HTMLの背景色を指定するメリット
HTMLでは、背景色を設定しない初期の背景は、真っ白。真っ白な背景を変更したほうがいいのは、主にデザイン面でのメリットがあるからです。例えば、こんな時に変更するとよいでしょう。
背景色を指定したほうがよいのはこんな場合！
1.文字色を指定しているとき
コンテンツや写真に合わせて、文字の色を変えたい時は、背景色も合わせて決めてしまいましょう。HTMLページを見るスマホやブラウザによっては、文字色が見づらくなってしまうかもしれません。
こちら、見づらい文字色ですね。
背景を濃い色にすれば、安心して読めます。
2.画像を使わず華やかにしたいとき
HTMLページを華やかにしたい時、ついつい背景に画像を使ってしまうとあまりにうるさくなりすぎる時もあります。そんなときは、シンプルに色を変更することで、見やすさと華やかさを両立しましょう。
こちら、キレイな背景ですが、ちょっとうるさく見えてしまいます。
背景色にグラデーションを設定しました。こちらのほうが、すっきり見えます。
3.写真を引き立てたいとき
さきほどのグラデーションの背景もよいのですが、せっかくの素敵な写真が埋もれてしまっています。文章や写真を引き立てるために、背景をシンプルに設定するのもよい手法です。
最初の白背景ではこんな感じのページでした。
黒背景にすると、ぐっと写真が引き立ちましたね。
HTMLの背景色を指定するタグとCSS
つぎは、実際に背景色を変更していきましょう。背景色を変更するタグは、HTMLの上のほうにあるbodyタグに追記する形で、このように書きます。
<body bgcolor="背景色" text="文字色">
赤文字の部分が、色名またはカラーコードを設定する部分です。また、文字色を設定する場合は、リンクの文字色、選択中リンク文字色、訪問済みリンク文字色も同時に設定しましょう。せっかく文字色を設定しても、リンクになっている文字が見えづらくなっては困りますからね！こちらのコードのようにまとめて設定するのが一般的です。
<body bgcolor="背景色" text="文字色" link="リンク文字色
" alink="選択中リンク文字色" vlink="訪問済みリンク文字色">
各文字色の指定は、 red、green、blueなどの色名での指定や、*#10100E、#cccccc"などのカラーコードで指定する方法があります。
さて、先ほどのbodyタグに追記する方式ですが、最新のHTML5では非推奨とされる書き方となっています。現在は、CSS(スタイルシート)に色やフォント、サイズなどのデザイン指定をまとめる書き方が推奨されています。
スタイルシートで背景色を指定する書き方も紹介しておきます。現在は、どちらの書き方でもきちんと反映されますよ。
body {
background-color: 背景色;
color: 文字色;
}
background-color: 背景色;
color: 文字色;
}
スタイルシートでは、bodyの設定にはリンクの色の設定は含まず、別でまとめるのが一般的です。あえてbodyタグの記載と同様にするなら、以下のようになります。
body {
background-color: 背景色;
color: 文字色;
a🔗 リンク文字色;
a:active: 選択中リンク文字色;
a:visited: 訪問済みリンク文字色;
}
background-color: 背景色;
color: 文字色;
a🔗 リンク文字色;
a:active: 選択中リンク文字色;
a:visited: 訪問済みリンク文字色;
}
単色の背景色に設定してみよう
実際に背景色を変更するコードを見てみましょう。bodyタグで変更する方法と、CSSで変更する方法の両方のコードを掲載しました。見比べてみてくださいね。
背景の変更前HTMLページ
背景の変更後HTMLページ
HTMLのbodyタグに背景色を指定したサンプルコードはこちらです。
<!DOCTYPE html>
<html>
<head>
<title>よぞらけんきゅうかい</title>
</head>
<body bgcolor="#10100E" text="#cccccc">
<div class="imgt">
<p class="title">YOSORA KENKYUKAI</p>
<img src="photo01.jpg"><br>
We are a circle collecting photos of sunsets and the night sky.
</div>
<div class="menu">
<p>about us</p>
<p></p>
<p>blog</p>
<p>gallery</p>
<p>SNS</p>
<p>contact</p>
</div>
<!-- 文字、写真のデザインを指定するスタイルシート -->
<style>
div.imgt {
position:absolute;
top:1em;
left:20em;
//border: 1px solid;
padding: 0px;
}
p.title {
font-family: 'Arial Black','ヒラギノ角ゴシック','Hiragino Sans','メイリオ', Meiryo,'ヒラギノ角ゴ StdN','Hiragino Kaku Gothic StdN',sans-serif;
color: #eaf4fc;
font-size:4em;
line-height:80%;
margin: 0px;
}
div.menu {
position:absolute;
top:4em;
left:3em;
border:1px solid;
padding:10px;
font-size: 2em;
line-height:120%;
font-family: 'Arial Black','ヒラギノ角ゴシック','Hiragino Sans','メイリオ', Meiryo,'ヒラギノ角ゴ StdN','Hiragino Kaku Gothic StdN',sans-serif;
color:#cccccc;
//background-color:black;
}
</style>
</body>
</html>
CSS(スタイルシート)を使ったサンプルコードはこちらです。
HTMLファイル
<!DOCTYPE html>
<html>
<head>
<title>よぞらけんきゅうかい</title>
</head>
<body>
<div class="imgt">
<p class="title">YOSORA KENKYUKAI</p>
<img src="photo01.jpg"><br>
We are a circle collecting photos of sunsets and the night sky.
</div>
<div class="menu">
<p>about us</p>
<p></p>
<p>blog</p>
<p>gallery</p>
<p>SNS</p>
<p>contact</p>
</div>
</body>
</html>
CSSファイル
body{
/* 背景色指定 */
background-color:#10100E;
color:#cccccc;
}
div.imgt {
position:absolute;
top:1em;
left:20em;
padding: 0px;
}
p.title {
font-family: 'Arial Black','ヒラギノ角ゴシック','Hiragino Sans','メイリオ', Meiryo,'ヒラギノ角ゴ StdN','Hiragino Kaku Gothic StdN',sans-serif;
color: #eaf4fc;
font-size:4em;
line-height:80%;
margin: 0px;
}
div.menu {
position:absolute;
top:4em;
left:3em;
border:1px solid;
padding:10px;
font-size: 2em;
line-height:120%;
font-family: 'Arial Black','ヒラギノ角ゴシック','Hiragino Sans','メイリオ', Meiryo,'ヒラギノ角ゴ StdN','Hiragino Kaku Gothic StdN',sans-serif;
color:#cccccc;
//background-color:black;
}
グラデーションの背景色を設定してみよう
スタイルシートを使って設定を行うことで、背景色にグラデーションも指定できます。早速書き方を見てみましょう。
background: linear-gradient(角度または方向, 開始色,終了色);
たとえば、このように使います。
/* 45度に傾いたグラデーションで、赤から黒に */
linear-gradient(45deg, red, black);
/* 右下から左上に向かうグラデーションで、青から赤に */
linear-gradient(to left top, blue, red);
詳しくは、こちらの記事も読んでみてくださいね。
CodeCampus記事：
超便利！CSSグラデーション基礎と簡単に作れるジェネレーターまとめ
今回のサンプルで使用したコードはこちらです。先ほどのCSSを使ったサンプルの指定部分と入れ替えて、試してみてください。
グラデーションのCSSサンプル
body{
/* 背景をグラデーションにする */
background: linear-gradient(45deg, #10100E, #A72F37);
color:#cccccc;
}
＼Webサイト担当者としてのスキルが身に付く／
まとめ
背景色の変更にとりかかると、文字色やリンクの色などにもこだわりたい気持ちが出てくることと思います。色の組み合わせや配色に悩んだら、こちらの記事も参考にしてみてくださいね。
CodeCampus記事：
素人でもプロ並みの配色ができるデザインパターン参考サイト21選
背景色をうまく使って、わかりやすく華やかなHTMLページを作ってみてください。
- この記事を書いた人
- のりぴよ
