CSS3の正しい記述方法！背景色と余白の指定＆コメントアウトの付け方
今回CSSを記述していって、大きな間違いをしていることに気が付きました。
CSSの正しい記述方法
それは、基本的な記述方法です。 以前は下記のように書いていました。
h1 { font-size: 38px}
ですが、これは推奨される書き方ではなく、推奨される書き方は以下のようになります。
h1 {
font-size: 38px;
}
これが正しい書き方なので、今回から急いで修正して書き直しました。はてなブログに慣れていないため、プログラミングの記述をうまく掲載することができないのがとても残念です。
これはテキストで紹介されていることではないので、「最初が肝心なんだからはっきり言っておけよ！」と心の中で叫びましたね。 上記ひとつだけの記述だけだと、ほとんど変わらないように見えるかもしれませんが、複数の記述をしていくと、見やすいメリットがあることに気が付きました。
あと、宣言のあとに必ずセミコロンをつける癖も付けたほうがいいなと思います。
セミコロンを付けておくと、後々追加したい記述が増えたときも、すんなり記述できるので、宣言のあとはセミコロン！って感じで覚えておこうと思います。というかcrescent eveを使っていると、勝手にセミコロンを付けてくれるので、特に意識する必要はないかもしれませんね。
それでは本題に入っていきます。
背景色の指定
今回記述した内容は以下のようになります。
body {
font-family: "メイリオ",
"Hiragino kaku Gothic Pro",
sans-serif;
background-color: #edede3;
}
h1 {
font-size: 38px;
}
p {
line-height: 1.5;
}
/*ヘッダー*/
header {
background-color: #ffffff;
}
/*記事*/
article {
background-color: #ffffff;
width: 900px;
margin-left: auto;
margin-right: auto;
}
/*フッター*/
footer {
width: 900px;
margin-left: auto;
margin-right: auto;
}
赤字の部分が今回記述した内容です。
ヘッダー部分とアーティクル（記事）部分にbackground-colorと記述してあるのがわかると思います。
この記述によって、ヘッダー部分と記事部分の背景色を#ffffffという色に指定しています。この色はテキストでは象牙色と紹介されていますが、僕のパソコンでは灰色っぽい感じの色で表示されています。
これは難しい指定でもなんでもないので、背景色を指定するときは、対象となるセレクタを選び、そこにbackground-colorと好きな色の値を記述するだけOKです。
コメントアウト
そうそう今回からコメントアウトの記述も登場しました。コメントアウトとは、記述を明確にするためのメモみたいな役割を果たしてくれます。上記の記述で言うと
/*フッター*/
/*記事*/
以上の2つが該当します。
/*メモしたい内容*/これでコメントアウトが完了です。あとから記述を追加するときに役立つので、ぜひ活用していきたい機能です。
余白の指定
今回余白の指定をしたのは、記事部分とフッター部分です。
記述は以下のようになります。
/*記事*/
article {
background-color: #ffffff;
width: 900px;
margin-left: auto;
margin-right: auto;
}
/*フッター*/
footer {
width: 900px;
margin-left: auto;
margin-right: auto;
}
widthは横幅という意味があり、それを900pxに固定する指示を出しています。margun-left rightは右と左の余白の指定になります。左右の余白にautoと指定することによって、自動的に左右の余白がに均等になり、記事を中央に配置するように指定しています。
ただし、フッターに限っては左寄せになっているように見えます。これはフッターのコピーライトが左端に寄っているからそう見えるだけであって、実際のフッター全体は左右の余白が均等になり、中央に寄るように指定されています。
まとめ
今回やってみたのは、余白の指定と背景色の付け方です。難しい内容ではありませんでしたが、marginは指定方法がたくさんあるそうなので、それを覚えていくのが大変そうだなぁって思います。
何よりも参考にしているテキストには推奨されているCSS3の記述方法を教えてくれていなかったことに怒りを感じていますね。過ぎたことなので、もうどうでもいいですけど、CSS3の教科書を謳っているなら、推奨されている記述方法くらい最初の段階で教えておいてほしいなって思いました。
