[13-1] サイトの背景に色をつけてみよう(CSS使用)

最終更新日:2017年09月22日  (初回投稿日:2011年04月15日)

これまでは、背景色を特に色指定していなかったので、ブラウザのデフォルト色でした。
今回は、CSSを使って背景色を自由に指定してみましょう。

要素に CSSで「background: 色指定」と指定するだけで 背景色がついて、ガラッとページの雰囲気が変わります。

今回はついでに、HTML5からの新要素 <header> <footer> も使ってみます。

使用する要素 <body> 〜 </body>
<div> 〜 </div>
<header> 〜 </header>
<footer> 〜 </footer>
使用する
CSSプロパティ
background

まずは背景全体に色をつけてみよう

サイト全体に背景色をつけるには、CSS で <body>要素に背景色を指定をします。

body {
 	background: #b3d7db
 	}

これで、このように↓画面全体に色がつきます。

(画像クリックで、実際のファイルが 別ウィンドウで開きます)

( HTML や CSS のコードは サンプルファイル内に書いてあります)

CSSの backgroundプロパティは、要素の「背景(バックグラウンド)」に関する指定をします。

上記の「background: 色指定」という指定は、実は ショートハンド という 複数のプロパティを一発でまとめて書く方法です。
本来の背景色の指定は「background-color: 色指定」です。
(今回は簡単に書けるほうが覚えやすいかなと思い、ショートハンドを使いました)

background-colorプロパティに関しては、
「はじめてのCSS」カテゴリーの【15-1】background関連のプロパティ(1/4)をご覧ください。

「#b3d7db」は色。これは 16進数 の指定方法。
「色指定」に関しては、
[14-4] 色指定について(16進数, 色名, 10進数, HSL, accessibility)を参考にしてください。

本文部分の背景を別の色にして読みやすくしよう

背景色がついたら、文字が読みにくい!
ですので、本文部分の背景を白にしてみましょう。

<body>要素の内側に <div>要素を置いて、本文部分を囲んでいます。この <div> に id名「container」と付けてます。
この <div id="container"> の背景色を白にします。

このように、テキストが読みやすくなりました。

(画像クリックで、実際のファイルが 別ウィンドウで開きます)

サンプルファイル内に HTMLや CSS のコードを書いておきましたが、ここでも貼っておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル1 [13-1] 背景に色をつけてみよう | ほんっとにはじめてのHTML5とCSS3</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<p>テキスト</p>
<pre>ソース</pre>
<pre>ソース</pre>
</div>
</body>
</html>
#container {
	width:80%;  /*このdiv要素の幅は、ウィンドウ幅の80%*/
	max-width:900px;  /*でも最大値は900pxまで*/
	margin:auto;  /*左右autoでセンター合わせに(上下マージンは0)*/
	padding:30px;  /*内側の空きは上下左右30px*/
	background:white
    }

白はウェブカラーネームで「white」と指定していますが、「#ffffff」と書いても「#fff」と書いてOK。
詳しくは [14-4] 色指定について(16進数, 色名, 10進数, HSL, accessibility) をご覧ください。

<header>要素の背景色を変えてみよう

HTML5から登場した <header>要素は、ページのタイトルなど「ヘッダー」部分の表示を担います。ページ全体だけじゃなく、セクションのヘッダーに使ってもOK。

サンプルでは、<div id="container"> の上に <header> を入れました。
こうすると、<header> はページの左右いっぱいの幅にできるので。(<div id="container"> の中に書けば、その幅に収まります)
このように、上部にサイトのタイトルが入りました。

(画像クリックで、実際のファイルが 別ウィンドウで開きます)

<!DOCTYPE html>
<!--省略-->
<header>
<h1>SITE TITLE</h1>  <!--header要素内にh1要素を入れています-->
</header>
<div id="container">
<p>テキスト</p>
<pre>ソース</pre>
<pre>ソース</pre>
</div>
</body>
</html>
header {
	display:block;  /*古めのブラウザ対策のため、一応ブロックレベルに*/
	padding:30px;
	background:#333;
	color:white
	}
h1 {
	font-size:240%
	}

HTML5からの新要素は、古めのブラウザには「未知の要素」となり「インライン」のデフォルトスタイルで表示されます。
ですので display:block(CSSの2行目)と指定し、ブロックレベルにしてあげる必要がありました。
HTML5対応の現在のブラウザだけを対象にする場合は不要。最初っからブロックレベルになってます。

ページ下部に <footer> をつけよう

<footer>要素も、HTML5で新しく登場。
こちらは、コピーライト(著作権関係の表示)やアドレス等の「フッター」部分の表示用です。ページのフッターだけじゃなく、セクションのフッターに使ってもOK。

サンプルでは、<div id="container"> の下に <footer> を入れてます。
<header>と同じようにページの左右いっぱいの幅にするため。
<div id="container"> の中に書けば、その幅になります。

このように <footer> が加わりました。

(画像クリックで、実際のファイルが 別ウィンドウで開きます)

<!DOCTYPE html>
〜省略〜
<body>
<header>
<h1>SITE TITLE</h1>
</header>
<div id="container">
<p>テキスト</p>
<pre>ソース</pre>
<pre>ソース</pre>
</div>
<footer>
Copyright © <a href="">ほんっとにはじめてのHTML5とCSS3</a> All Rights Reserved.
</footer>
</body>
</html>
footer {
	display:block;  /*古めのブラウザ対策のため、一応ブロックレベルに*/
	background:#333;
	color:white;
	font-weight:bold;  /*太く*/
	font-size:85%;  /*ちょっと小さい文字で*/
	line-height:1em;  /*行の高さは1文字分(全体が 1.6文字分になってるので詰めた)*/
	text-align: center;  /*テキストはセンター合わせに*/
	padding: 10px  /*パディングを10pxに*/
	}
footer a {color:#ccc}
footer a:hover {color:#6c9}

display:block(CSSの2行目)の指定は、さっきの <header>要素と同じで、 HTML5からの新要素は、古めのブラウザには「未知の要素」となり「インライン」のデフォルトスタイルで表示されるから、一応書いてます。
HTML5対応の現在のブラウザだけを対象にする場合は不要。最初っからブロックレベルになってます。

今回のサンプルをダウンロード

今回のファイルセットをダウンロードできるようにしました。
一番最後のサンプル(<header> も <footer> も付いてるヤツ)のファイルセットです。

↓クリックでダウンロード用のページが別ウィンドウで開きます。
サンプル ダウンロードページへ

次回予告

いかがでしたか?
今回は、初めて見る CSSのプロパティがたくさん出てきて、読むのが大変だったかもですね。

次回は応用バージョンとして、サイトの背景に「画像」を配置してみましょう。
これも今回と同じく CSSの backgroundプロパティを使って、画像の指定をします。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

No title

オールドIEにHTML5の新要素を理解させるソースについて
のところは今はもう使えないですね・・・

Re: No title

コメントありがとうございます。書き換えておきました。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.