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

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

HTML5の新要素 <header> <footer> も使ってみましょう。

使用する要素
(HTML5)
<body> 〜 </body>
<div> 〜 </div>
<header> 〜 </header>
<footer> 〜 </footer>

サンプルファイルのダウンロードはこちら

★今回からサンプルは直接ダウンロードできるようにしました。
→本日のサンプル(sample13-1set.zip (10k))をダウンロード

まずは背景全体に色をつけてみよう(sample13-1-1.html)

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

body {
 	width:100%;
 	margin:0;
 	padding:0;
 	color:#666;
 	font-family:Arial, sans-serif;
 	line-height: 18px;
 	background: #9F737C;
 	}

CSSのプロパティ「background」は背景色や背景画像に関する指定をします。
色指定は16進法で指定します。(ここでは赤褐色(#9F737C)を指定しています)

上のソースでこのように↓画面全体に色がつきます。
honttoni13-1-1.html
実際のHTMLファイルを見た方がわかりやすいですね。ソースも書いておいたのでご確認ください。
実際のHTMLファイル「sample13-1-1.html」を開く(別ウィンドウで開きます)。

★メモ★
背景色を指定するCSSプロパティは、厳密には「background-color」です。
「background」は「ショートハンドプロパティ」と言われるもので、複数のプロパティの値をまとめて記述することができます。

「background-color」やbackgroundのショートハンドについては、
【15-1】background関連のプロパティ(1/4)をご覧ください。

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

本文の背景を別の色にして読みやすくしよう(sample13-1-2.html)

背景に濃い色がついたので、文字が読みにくいですね。
ですので、本文の背景だけを白にしてみましょう。

サンプルでは、<body>要素の内側を id名「container」という<div>要素で囲んでいて、その中に本文が入っています。
下記がサンプルのHTMLです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ほんっとにはじめてのHTML(13-1-2)背景に色をつけてみよう_[2]</title>
<meta name="description" content="はじめてのHTML。サイトの背景にCSSで色をつけてみましょう">
<meta name="keywords" content="ほんっとにはじめてのHTML,CSS3,html5">
<link rel="stylesheet" type="text/css" href="css/default.css" media="screen, tv, projection">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
(ここに本文が入ります)
</div>
</body>
</html>

↑ 9〜11行目の、[if]から[endif]までは、IE8以下にHTML5の新要素を読み込ませるためのオープンソース
本日の記事の下のほうで説明しています。

この <div id="container"> の「background」を白に指定します。

#container {
	width: 600px;
	margin: 0px auto;
	padding: 30px;
	background: #fff;
}

白は #ffffff と書いてもいいのですが、RGBそれぞれを一桁(ひとけた)に省略できるので、
#fffと書いてOK。

上のソースでこのように、テキストが読みやすくなりました。
honttoni13-1-2.html
実際のHTMLファイル「sample13-1-2.html」を開く(別ウィンドウで開きます)。

<header>要素の背景色を変えてみよう。(sample13-1-3.html)

以前は <div> に「header」などのid名をつけて、サイトのタイトルなどを入れていましたが、
HTML5では、新しいHTML要素として <header> が加わりました。

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

honttoni13-1-3.html

実際のHTMLファイル「sample13-1-3.html」を開く(別ウィンドウで開きます)。

下記がサンプルのHTMLです。

<!DOCTYPE html>
<!--省略-->
<body>
<header> <!--<body>のすぐあと、<div id="container">の上にいれました-->
<h1>SITE TITLE</h1>
</header>
<div id="container">
<!--「header」を「container」の幅に合わせたければ、ここにいれますよ。OK? -->
(ここに本文が入ります)
</div>
</body>
</html>

このサンプルでは <header> の中に <h1> を入れ、サイトのタイトルを入れています。

この <header> に対して、CSSで下記のように指定をします。

header {
	padding: 30px;
	background: #333;
	color: #FFF;
}
h1 {
	font-weight: bold;
	font-size: 240%;
}

<header> の background は濃いグレー#333にしました。
それに伴い、headerのテキストの色は白(#FFF)にして、
h1のテキストはボールドに(font-weight: bold)、サイズは240%に拡大しました。

ページ下部に <footer> をつけよう。(sample13-1-4.html)

<footer> も、HTML5で新しい要素としてが加わりました。
こちらも以前は <div> に「footer」などのid名をつけていました。
コピーライト(著作権関係の表示)やアドレス等を書きます。
別にページの一番下に入れなくても使えるんですが、ま、普通は一番下がいいですよね。

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

<!DOCTYPE html>
〜省略〜
<body>
<header>
<h1>SITE TITLE</h1>
</header>
<div id="container">
(ここにテキスト)
<pre>(ここにソース)</pre>
<!--「footer」を「container」の幅に合わせたければここにいれますよ。OK? -->
</div>
<footer>
Copyright © グラフィックデザイナーのためのHTMLメモ All Rights Reserved.
</footer>
</body>
</html>

<footer> に対して、CSSで下記のように指定をします。

footer {
	font: bold 80%/1em Arial, Helvetica, sans-serif;
	color: #FFF;
	text-align: center;
	padding: 10px;
	background: #000;
}

<footer> の background は黒#000にし、テキストは白(#FFF)にしました。
「Copyright © 」のくっきり表示のために、フォントファミリーも指定しなおしました。

上のソースでこのように <footer> が加わりました。
honttoni13-1-4.html
実際のHTMLファイル「sample13-1-4.html」を開く(別ウィンドウで開きます)。
(このサンプルはFC2の無料サーバを使っているので、footer下にFC2のクレジットが出ていますが、 普通のサーバなら、ページの一番下にfooterがフィットします)

オールドIEにHTML5の新要素を理解させるソースについて

IE8までは、今回の <header> のようなHTML5の新要素に対応していません
IE8以下への対応が必要な場合は「document.createElement(新要素名);」と記述し、HTML5の新要素を理解させる必要があります。

ただ、HTML5の新要素はけっこう数があるので、1コずつ記述するのは大変!
というわけで、Googlecodeが、便利なオープンソースを用意してくれています。
下のJavaScriptがそれ。head内に記述して使います。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

[if lt IE 9]と[endif]で囲まれていますが、これはIEだけの仕様で、
この記述によってIEだけが「もしIE9未満だった場合にのみ実行する」と解釈するそうです。

この部分は書き換えました(2017年3月記)

少し前までは「HTML5の新要素を IE8以下で表示させるコード」(html5shiv というオープンソース)をhead内に記述するのが慣例でした。でもHTML5が標準になっている今は、もう不要かと思います。
そのあたりについて、[3] !DOCTYPE宣言をしよう 内の「HTML5の新要素を IE8以下で表示させる」に書いていますので、ご興味ある方はご覧ください。
IE8以下をターゲットにする場合のために html5shiv のコードも書いておきました。

次回予告

いかがでしたか?
今回はソースをたくさん書く必要があり、記事が長くなって読むのが大変でしたね。(内容は別段むずかしくはないんですが…。)

次回は、サイトの背景に画像を配置してみましょう。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

No title

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

Re: No title

コメントありがとうございます。書き換えておきました。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 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 -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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