2011年09月24日

・色を変えてみる

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

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

ま、今日はこの辺で。
posted by ぴえ〜る☆ at 21:08 | Comment(0) | 氣まま日記 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。