「Let’s learning」の部分に水色の背景色をつけていこう。

背景色を設定するプロパティは「background-color」だ。

先ほども説明した通りbackground-colorで使用できる値は「カラーネーム」もしくは「カラーコード」だ。

背景色がbackground-colorなら、文字の色はfont-colorじゃないの？と思ってしまいがちだが、文字の色は「color」なので間違えないようにしよう。（意外と多いミスなのである）

colorで使用できる値はbackground-colorと同じく、「カラーネーム」と「カラーコード」だ。

文字のサイズを変更するには「font-size」を使う。値は数字＋単位なのだが、この単位がなかなかややこしいのだ。

pxとはweb上で大きさをはかるときに使用されるcmみたいな単位である。（1pxは1cmよりもっともっと小さい）

最初は「web制作をやる人ってパッと見てpx数がわかるの？」と混乱するが、そんなことはなく、みんな見栄えと数値のキリの良さから「感覚」でpx数を決めていることが多い。

ここら辺は実際にデザインをwebページ化するという流れを経験しないと理解しにくい感覚なので、まずは慣れていこう。

文字の太さを変えるには「font-weight」を使い、値は２種類ある。

１つ目は数値で、100～900の数値を書いて（※100,200,300…と100刻みで書く）数値が大きいほど太くなる。

２つ目は「normal」「bold」「lighter」「bolder」の４つだ。normalは太さを設定していないときの太さと同じで、一般的な太字にしたいなら「bold」をしていすればＯＫだ。

lighterとbolderは、めったに使わない。

「文字の位置を真ん中に寄せたい」時は、文字揃えを決める「text-align」を使おう。

• leftで左寄せ
• centerで真ん中揃え
• rightで右寄せ

デフォルトではleftなので、よく使うのはやはり真ん中揃えのcenterだ。

htmlテンプレートコード

<p class="top">ボーダーのサンプル</p>
<p class="bottom">ボーダーのサンプル</p>
<p class="right">ボーダーのサンプル</p>
<p class="left">ボーダーのサンプル</p>
    
cssテンプレートコード

.top{ border-top:solid 2px #31aae2; }
.bottom{ border-bottom:solid 2px #31aae2; }
.right{ border-right:solid 2px #31aae2; }
.left{ border-left:solid 2px #31aae2; }
    

border-top～leftでそれぞれ上下左右に青い線がついている。

htmlでは最初の状態では要素ごとの隙間がほとんどなく、窮屈に配置される。そこで要素と要素に距離をとる（余白を入れる）ときには「margin-〇〇」を使用する。

〇〇にはtop/bottom/right/leftのいずれかが入る。

例えば左のイラストのようにmargin-bottomなら、セレクタにした要素の下に余白を取る。

値はfont-sizeなどと同じくpxや％といった「数値＋単位」を使おう。

上下左右の余白をまとめて指定する場合は

margin：上　右　下　左　；

というように書く。「上下左右」ではないことに注意しよう。

例えばmargin: 10px 20px 30px 40px ;というコードなら、上に10px、右に20px、下に30px、左に40pxの余白をとる。

例えば左のようなケースだ。

cssできちんと.copyに対してcolor:whiteを指定したはずなのに、文字が黒色のまま…

何が原因なのかをデベロッパーツールで探っていこう。

cssテンプレートコード

p{
  background-color #ffffff;
}
     

コロンの付け忘れ

プロパティと値の間には必ずコロンがいる。

cssテンプレートコード

.copy{
  background-color:#5fa3d6;
  color:white
  text-align:center;
  font-size: 36px;
  font-weight: bold;
}
     

セミコロンの付け忘れ

複数行にわたってcssを記述する場合、必ず「；（セミコロン）」を行の後ろに書く。例ではcolor:whiteの後ろにセミコロンが付いていない。

cssテンプレートコード

.copy{
  background-color:#5fa3d6;
  color:white;

h1{
  font-size:24px;
  margin-bottom: 5px;
}
     

閉じカッコの付け忘れ

これはかなり怖いミスだ。閉じカッコを付け忘れると、それより下に書いたcssが全て無効化される。