シリーズ記事 初心者もできる！プログラミング基礎講座【第4回】は、CSSのプロパティについてです。第3回では、HTMLの要素をセレクタに指定し、”なに”を”どうする”かについてプロパティに記述することを説明しました。
今回は、プロパティで文字の大きさやフォントの種類、背景色や幅・高さの記述方法について書いています。
文字の大きさ
プロパティ：font-size
HTML：
CSS：
上の画像のように、font-size: 〇〇px; という形で記述します。この場合、HTMLの<h1>プログラミング基礎講座</h1>のフォントの大きさが20pxに指定されたということです。数字を変えることによって、大きさが変わります。 単位のpxを忘れないようにしましょう。
画像のように記述すれば、HTMLのh1見出しである「プログラミング基礎講座」の色はオレンジ、文字の大きさは20pxで表示されます。
文字のフォントの種類
プロパティ：font-family
CSS：
font-family: （フォント名）; という形で指定します。「sans-serif」はゴシック体の一種です。もし、フォント名が -（ハイフン）でつながっておらず、間にスペースがあるものであれば、フォント名を ” ” （ダブルコーテーション）で囲む必要があります。行末の ; も忘れないようにしましょう。
いろいろな種類のフォントがあります。好みやサイトのイメージ合ったフォントを探してみるのも面白いですね。
文字の背景色
プロパティ：background-color
CSS：
background-color; （カラーコード）; で記述します。第3回で解説したcolorプロパティと記述方法は同じです。上の画像の場合、HTMLのh1見出しの背景色は、#dddddd（灰色）に設定されるということです。
背景色の幅と高さ
プロパティ：width（幅）、height（高さ）
CSS：
このように記述すると、h1見出しの背景色の幅と高さを指定できます。この場合は、幅：500px、高さ：100pxということになります。
今はHTMLのh1に対して記述していますが、例えば、画像の幅と高さをしてしたいなら、セレクタにはimgを指定し変更できます。
CSSでのコメント
HTMLの時にも説明しましたが、CSSも記述が増えてくると、どこに何を書いたのかが分かりにくくなってきます。そういった時にコメントを書いておくと分かりやすくなります。
CSS：
CSSの場合は、/* */ の間に記述します。こうしておけば、このCSSは「見出し(h1)の色を灰色にする」ために書いたCSSだなということがすぐにわかります。これはサイトには表示されません。
まとめ
シリーズ記事 初心者もできる！プログラミング基礎講座【第4回】はいかがでしたか。CSSのプロパティとそのいくつかの記述方法について解説しました。
次回はHTMLに戻り、HTMLの基本要素の一つHEADついてお伝えします。サイトの設定情報をどのように記述するのかがわかります。
次回をお楽しみに！