色を変えてみる
あまりにも白すぎてのっぺりしてたので、背景を「ラポラポオレンジ(注:ただのオレンジです)」に変更してみました。スタイルシートでいうと、こういうとこ。
body {
text-align: center;
margin: 0;
padding: 0;
color: #333333;
background-color: #FF9900;
}
中カッコ{ }の外に書かれている中身がスタイルで、外に出ている(この場合はbody)が名前。「bodyの部分はこういうスタイルにしてくださいね~」っていう表記です。で、bodyっていうのが、こういうホームページでいうところの、一番大元の要素、色だけで言えば一番うしろに表示される部分ですね。
まぁ、細かい部分はいいんですけど、色を表している部分は「color」と「background-color」。基本的な英語が分かればだいたい推測できますよね。前者が文字色で、後者が背景色。「#」以下の3桁or6桁の数字(カラーコード)で色を表現します。カラーコード表は探せばいろいろあるので(たとえばこちら)、どの色がどの数字とか覚える必要はないです。そして数は少ないですが、数字じゃなくてカラーネーム(「orange」とか「darkorange」とかありますね)でも表現できます。自分が思う色と同じコードを探して、書き換えればOKです。
ちなみに上のbodyの部分だけを書き換えると全面オレンジになってしまうので、メインの記事とか表示される部分(#container)の背景色は白(#FFFFFF)にしています。
#container {
width: 1000px;
text-align: left;
margin: 0 auto;
padding: 0 20px;
background-color: #FFFFFF;
}
……とか簡単そうに書いてみても、初心者からすると、上みたいなコードが出てきただけで拒絶反応が出て、理解しようとする意思が失せてしまうという現実(汗)。まぁでも、テキストエディタの検索機能で「color」とか「background」とか検索してジャンプしていけば、見たくない部分はスルーできますので、利用してみてください。
ま、今日はこの辺で。