読者です 読者をやめる 読者になる 読者になる

【STEP2】背景の色を変えて、配置を決める

背景色の変え方を学ぶ

真っ白なページのままだと、いかにも素人が作ったページという感じが否めない。色を足すだけで随分とまともになる。今まではてなブログのカスタマイズを参考に、見よう見まねで適当にやってきたが、参考書として使用しているHTML5&CSS3レッスンブックには、カラーチャートもあって、理解が捗る。

今更ながらだが、この本を選んでよかった。情報量が豊富で、知識が身に付き楽しい。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

 スタイルシートに背景色を記述

スタイルシートに背景色を記述する。

前回作ったスタイルシート

body {font-family:'メイリオ,
         'Hiragino Kaku Gothic Pro',
         sans-serif}

と記述して、bodyの中のフォントを指定した。その続きに以下のように打つ。

 body {font-family:'フォントの種類,
'第二候補のフォントの種類',
sans-serif;
background-color: 色の値(もしくは色の名前)}

違う項目を入れる前に ; を入れるのを忘れない。カラーチャートは以下のサイトのようなものも多いので、いくらでも検索で探すことができる。

www.tagindex.com

カラーチャートに関しては、LITERARYさんの記事の中に配色パターンの紹介がある。とてもセンスが良いので、参考になるし、色の値もすぐに見ることができるので、とても役に立つ。

tsukuruiroiro.hatenablog.com

HTML5&CSS3レッスンブックにのっているチャートには、カラーネームなどもきちんと記載されていて、常備しておきたいと感じた。とりあえず白色(white)が#ffffffであることと、黒色(black)が#000000であることは覚えた。

ヘッダーと記事の背景色を指定

このままだとサイトの背景色がすべて同じになってしまうので、部分ごとに分ける。そのためにスタイルシートに以下のように記述する。

/*ヘッダー*/
header {background-color: ヘッダーの色}

/*記事*/
article {background-color: 記事本文の色}

こうすると、背景色と文章が書かれた部分の背景色が異なるので、記事が読みやすくなる。また/*で挟んだ記述をすることによって、その下に書かれている情報がどのようなものなのかメモを取ることができる(htmlとして反映はされない)。

こまめに情報に関するメモを取ることで、何がどの情報化を整理するのはとても大切なように感じる。きちんと覚えておきたい知識だ。

配置の変更

今のままでは、テキストが画面の横いっぱいに広がっている様子である。そのため、記事の配置を少し中央にずらしたい。

先ほど作った記事のスタイル記述欄に、幅(width)と余白(margin)の情報を記述する。

 /*記事*/
article {background-color: 色の値;
width: 幅の数値px;
margin-left: auto;
margin-right: auto}

余白の値をautoに設定しておくことで、自動的に同じ大きさの余白が左右に挿入されて、結果としてコンテンツを中央に配置できるらしい。覚えておこう。

さらに同じようにフッターの位置も変える。

/*フッター*/
footer {width: 幅の数値px;
margin-left: auto;
margin-right: auto}

これでフッター部分と記事の部分の始まりが同じ場所になる。

まとめ

ここまでのスタイルシート記述をまとめると 

body {font-family:’フォントの種類,
'第二候補のフォントの種類',
sans-serif;
background-color: 背景色の色の値}

h1 {font-size: サイズ指定px}

p {line-height: 段落の高さ}

/*ヘッダー*/
header {background-color: ヘッダーの背景色指定}

/*記事*/
article {background-color: 記事の背景色指定;
width: 幅の数値px;
margin-left: auto;
margin-right: auto}

/*フッター*/
footer {width: 高さpx;
margin-left: auto;
margin-right: auto}

となる(ちなみに太字が今日足したところになる)。背景色の指定は、ただ全体の背景を変えるだけでなく、記事とヘッタ―など部分によって変えることで、サイトにメリハリが生まれる。

また幅を揃えるときはautoを活用するとよい。

さらにスタイルシートの記述においては、/*を友好的に使うことで、情報の整理をまめに行う。

ちなみに:と;の位置を間違いやすいので、注意しよう。

{内容の指定: 具体的な数値や情報など; }となる。

明日はチャプター2の続きに進んでいく。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック