現在、旧ブログから移行作業中。過去の記事の体裁やリンクがおかしなところがあるかと思いますが、しばらくご容赦くださいませ。

色を変えてみる

あまりにも白すぎてのっぺりしてたので、背景を「ラポラポオレンジ(注:ただのオレンジです)」に変更してみました。スタイルシートでいうと、こういうとこ。

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」とか検索してジャンプしていけば、見たくない部分はスルーできますので、利用してみてください。

ま、今日はこの辺で。