〜プログラミング学習〜CSSでの大事な要素2選。

この記事では、将来プログラミングをできるようになるために、プログラムについて学んだ知識を解説していく記事です。
今日学んだプログラミングの知識。

1. CSS で背景色と文字色を設定する

2. CSS で要素の幅と余白を設定する

CSS で背景色と文字色を設定する。

今の X のイメージカラーは黒色ですが、開発していく上で見やすいように、 自分が見やすいような好きな色で背景色と文字色を設定してみましょう。今回は自分は水色に設定してみます。

以下の CSS で、背景色と文字色を設定できます。

body {
 background-color: #04a6eb;
 color: #fdffff;
}
assessment.cssPlease Type!
Chrome を再読み込みして確認してみましょう。

設定値に # から始まる英数字がありますね。

#04a6eb
この記入方法は、 16 進数カラーコードという書き方です。

16 進数カラーコードは、「光の三原色」の赤（Red）・緑（Green）・青（Blue）をそれぞれ 2 桁の 16 進数で表しています。
左から 2 桁ずつ RGB に対応しています。

16 進数とは、 0~9 までは 10 進数と同様で、

A を 10
B を 11
C を 12
D を 13
E を 14
F を 15
として記述し、16 で 1 つ上の桁にあがります。

赤・青・緑の 3 色をそれぞれ 2 桁の 16 進数で表していますから、取りうる値としては 00 から FF まで存在していますね。

それでは 10 進数ではどれくらいの値を取りうることになるのでしょうか。

簡単に答えを示すと、 16進数の値である FF は 10 進数において 16 × 15 + 15 = 255 になります。
つまり 0 から 255 までの値を指定して色を設定するのですね。

CSS について取り扱っていますから、 16 進数については軽く触れるに留めておきましょう。
気になった方は調べてみると面白いかもしれません。

CSS で要素の幅と余白を設定する。

ここまでにおいて assessment.html を見ると要素は画面の左側に偏っていると思います。
これを中央に寄せてみましょう。
そのために要素の幅を指定して、左右に margin（マージン）と呼ばれる要素の外側の余白をあけてレイアウトしてみましょう。
以下の差分表記に従って、 assessment.css を編集してみてください。


body {

 background-color: #04a6eb;

 color: #fdffff;
+
 width: 500px;
+
 margin-right: auto;
+
 margin-left: auto;

}
assessment.cssPlease Type!
このように記述します。
今追加した行の説明は以下の通りです。
width: 500px; で、幅を 500px に設定しています
margin-right: auto; で、右側のマージンを自動調節にしています
margin-left: auto; で、左側のマージンを自動調節にしています
編集できたら assessment.html を再度読み込んでみましょう。
そうすれば、画面の中央に寄っているでしょう。

まとめ

今回は前回の続きでCSSでの背景の設定や、要素、幅を開設しました。
数字や英単語などしっかり理解していなければプログラムをするのがかなり難しい内容になってきたので、一つ一つ意味を理解しながら、抜けがないよう慎重に学習を進めていきたいです。