CSS装飾(基本編） ~font-size / color / font-family~

はじめに

CSSの装飾をまとめていきたいと思います。

本日は、font-size(フォントサイズ)、color(カラー)、font-family(フォントファミリー)の３つです。
どれもよく見る装飾ですね。

font-size(フォントサイズ)

文字の大きさを指定するスタイルは「font-size」プロパティを使用します。

値には「数値＋単位」で指定します。

単位の設定につて

	各種CSSプロパティで共通して使用できる単位は以下のものがあります。
px	ピクセル。画面の解像度によって表示サイズが異なります。
em	エム。1emは使用しているフォントの高さです。
ex	エックスハイト。1exは使用しているフォントの英数字の高さです。
%	パーセント。設定する対象により割合が異なります。

記述例

qiita.rb

puts "hello word"``` 

 h1 {
>
> ​      font-size: 14px;
>
> } 

# color(カラー)

**文字の色**を指定するスタイルは「**color**」プロパティを使用します。

### カラーコード（16進数）

・「#」記号に続けて赤(R)緑(G)青(B)の各色の分量を２桁ずつで指定します。

・色の強弱は「0123456789ABCDEF」の16進数で表し「00」が最小値、「FF」が最大値となります。

・アルファベットは小文字でも構いません。

記述例

> h1 {
>
> ​      color: #FF0000;
>
> }

「#FF0000」のように各色２桁がゾロ目の場合、「#FF00」というように3桁に省略しての記述も可能です。

#font-family(フォントファミリー)

**文字のフォントの種類**を指定するスタイルは「**font-family**」プロパティを使用します。

値には「**フォント名**」または「**総称フォントファミリー名**」を指定します。

「**"** ダブルクォート」で挟み、「**,** カンマ」で区切ります。

ブラウザーはフォントを左から順に読み込むので、一番優先度の高いフォントを一番左側に記述しましょう。

＊Safari（Macintosh)ではフォント名をアルファベット表記にする必要があります。　例：「ヒラギノ角ゴ Pro W3」は「Hiragino Kaku Gothic Pro」と表記。

記述例

>h1 {
>
>​     font-family: "ヒラギノ角ゴ　Pro W3", "Hiragino Kaku Gothic Pro";
>
> }