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

最終更新日:2019年03月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 のコードを書いておきましたが、ここでも貼っておきます。
まずは HTML。

<!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>

続いて CSS です。

#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"> の中に書けば、その幅に収まります)
このように、上部にサイトのタイトルが入りました。

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

HTML はこちら。

<!DOCTYPE html>
<!--省略-->
<header>
<h1>SITE TITLE</h1>  <!--header要素内にh1要素を入れています-->
</header>
<div id="container">
<p>テキスト</p>
<pre>ソース</pre>
<pre>ソース</pre>
</div>
</body>
</html>

続いて CSS です。

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> が加わりました。

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

HTML はこちら。

<!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>

CSS はこちら。

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対応の現在のブラウザだけを対象にする場合は不要。最初っからブロックレベルになってます。

次回予告

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

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

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

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

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

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

No title

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

Re: No title

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

yuki★hata

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

メールフォームはこちら

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