CSS3入門編 パッと見HTML5よりわかりやすいかも！

引き続きCSS3の記述を勉強していきます。

CSS3の記述内容

 今回CSSで記述したのは以下のとおりです。

----------------------------------------------------------------------------------------------

body {font-family:"メイリオ","Hiragino Kaku Gothic Pro","sans-serif"}

h1  {font-size:38px}

P  {line-height:1.5}

----------------------------------------------------------------------------------------------

この記述をhtmlファイルと同じフォルダ内にある、style.cssというファイルに記述していきます。

CSSの記述方法

CSSはhtmlとは異なるルールで記述してきます。

例→h1{font-size:38px}

【h1】はセレクタと呼ばれる要素。

【font-size】はプロパティと呼ばれる要素。

【38px】は値と呼ばれる要素です。

CSSの記述はまず、htmlタグのどこの部分を変更していくかを決めます。例の場合で言えば、【h1】部分を変更することがわかります。

そして【font-size】のプロパティと【38px】という値で、どのように変更するか指定します。このときのルールは、まずセレクタを記述しプロパティと値の部分を{}←のように波カッコで囲います。

プロパティと値の間は:←コロンで区切ります。プロパティと値のことを【宣言】と呼びます。ひとつの指定で複数の宣言ををする場合は

h1{font-size:38px;}

上記のよう;←セミコロンで区切ることで可能です。常に行末にセミコロンを付けても問題ありません。

font-family

font-familyとは、使用するフォントを指定するためのプロパティです。ここで指定しているフォントは、【メイリオ】【ヒラギノカクゴゴシックプロ】の2つです。最後の【sans-serif】という記述は左記のどちらもインストールされていない環境の場合、利用可能なゴシック系のフォントを使用するという指定です。

この指定の意味は、【メイリオ】がインストールされていれば、メイリオが使用され、メイリオがインストールされていなければ、【ヒラギノカクゴゴシックプロ】が使用され、そのどちらもインストールされていなければ、使用可能なゴシック系のフォントが使用されるという記述です。

優先順位

メイリオ＞ヒラギノカクゴゴシックプロ＞使用可能なゴシック系のフォント

という感じです。

font-size

font-sizeの指定は、名前のとおりフォントのサイズを指定するための記述です。ここでは、38pxにするように指定されています。フォントサイズの指定は【px】以外にも以下の方法があります。

• em 親要素の文字サイズに対する比率
• xx-small 最極小
• x-small 極小
• small 小
• midium 中
• large 大
• x-large 極大
• xx-large 最極大
• smaller ひと回り小さく表示
• larger ひと回り大きく表示

※ブラウザがChromeの場合は、可読性を保つため、10px以下の記述はすべて10pxで表示されるように設定されています。

おそらく、【em 親要素の文字サイズに対する比率】の意味がわからない人も多いと思いますので、自分なりに噛み砕いて解説します。

例

body {font-size:16px}

h1 {font-size:1em}

上記のような記述の場合、【body】部分が親要素になります。親要素のフォントサイズが16pxということは、1emが16pxということになります。h1に2emと記述した場合、フォントサイズは32pxで表示されます。

さらに言うと、もっと上の階層でフォントサイズを指定した場合、それが親要素となります。ちなみに、フォントサイズをどこでも指定しないかった場合、1em=16pxとなります。

これはテキストに書いてあることではありませんが、【em】に似た指定で【rem】があります。【rem】でフォントサイズを指定すると、必ずルートのフォントサイズを基準にするので、サイトバランスが取りやすくなります。

今の時代はスマホでネットサーフィンする人がほとんどなので、px指定してしまうと、スマホで見たときに文章のバランスが取れなくなる可能性が大いにあります。それを防ぐために、【em】や【rem】をうまく使っていく必要があります。

line-height

【line-height】は行の高さを指定するプロパティです。

• nomal line-heightの初期値の高さ
• 数値（pxなど） ピクセル数での指定
• 倍率（単位なし） 文字サイズに対する倍率
• 比率（％） 文字サイズに対する比率

※line-heightの場合はピクセルで指定することはほとんどない。主に倍率で指定するのが一般的です。

{line-height:1.5}

上記の場合は、文字サイズに対して、1.5倍の倍率で行の高さを指定していることになります。

まとめ

今回は初めてCSS3の記述をしましたが、特に躓くことなく記述できました。内容が簡単すぎるのも原因だと思いますが、これからどんどん難しくなっていくような予感がしています。

特にfont-sizeの指定はemとremをメインに使っていかないといけないっぽいので、深く理解する必要があるなと感じました。