[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プロパティを使って、画像の指定をします。
- 関連記事
-
- [15-1] リストを作ろう( ul要素・li要素 )
- [14-4] 色指定について(16進数, 色名, 10進数, HSL, accessibility)
- [14-3] データの容量を示す単位(バイト、キロバイト、メガバイト)
- [14-2] 画像形式について(GIF、JPEG、PNG の違い)
- [14-1] ブラウザでソースを表示する
- [13-3] サイト背景にCSSで線形グラデーションをつけよう (CSS使用)
- [13-2] サイトの背景に画像を表示しよう(CSS使用)
- [13-1] サイトの背景に色をつけてみよう(CSS使用)
- [12-2] なんでHTMLとCSSはセットなの?
- [12-1] CSSを外部ファイルにしよう
- [11-6] ボタン画像をマウスオーバー時に変化させよう(CSS使用)
- [11-5] 画像にリンクを貼ろう
- [11-4] 別のページの特定の箇所にリンクしよう
- [11-3] 同じページ内でリンクしよう
- [11-2] リンクの文字の色を変えよう(CSS使用)
初心者にも使いやすい(と思う)レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバーや ロリポップ!
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
コメントの投稿
No title
のところは今はもう使えないですね・・・