GSTYLE Blog

行間を指定するには、line-heightプロパティを使います。

フォーマットは次の通りです。

line-height: 行の高さ;

行の高さには、次のような指定方法があります。

normal：　通常の行間隔で初期値です。

数値：　ここで指定した数字にフォントのサイズを掛けた値が、行間の高さになります。

％：　%で指定するとフォントのサイズに対する割合が、行間の高さになります。

単位付きの数値：　font-sizeで指定できるpxやemなど単位付きの数値が使用できます。

このうちnormalの指定は、通常の行間隔ですので詳細は省きます。


数値での指定は、半角の数値で指定します。

2.0と指定するとフォントサイズに2.0を掛けた値が行間隔で、1.5を指定するとフォントサイズの1.5倍の値が行間隔の値です。


%での指定は、100%が初期値と考えて下さい。これより大きい値は行間隔が広がります。
100%未満の値で指定すると行間隔が狭くなりますが、数値が小さくなると上下の行が重なることがあります。


単位付きの数値で、pxでの指定の場合はフォントサイズの値から指定した数値を引いた値が行間隔になります。
フォントサイズよりもline-heightで指定した数値が小さいと上下の行が重なることがあります。

いずれの指定値でもマイナスの指定は出来ません。


次のような指定は、フォントサイズが同じとすると、すべて同じ表示になります。

line-height: 1.2;
line-height: 1.2em;
line-height: 120%;


注意が必要なのが、古いブラウザの中には、単位のない数値で指定すると行間が重なってしまうなどのバグがあります。

フォントの太さを指定するには、font-weightプロパティを使用します。

フォーマットは次の通りです。
font-weight: 太さ;

太さのところに、次に示すキーワードか数値で指定します。

・normal：標準の太さ
・bold：一般的な太字
・100：normal（400）よりも三段階細い細字
・200：normal（400）よりも二段階細い細字
・300：normal（400）よりも一段階細い細字
・400：標準の太さ
・500：normal（400）よりも一段階太い太字
・600：normal（400）よりも二段階太い太字
・700：boldに相当する太さ
・800：bold（800）よりも一段階太い
・900：bold（800）よりも二段階太い

このようにフォントの太さを細かく設定できますが、100〜500のフォントの太さは、フォントサイズにもよりますが、見た目それほど変りません。

また600〜900も同様に見た目の変化を感じることは出来ません。

そのため使用頻度が高いのは「bold」で、「normal」はフォントの太さを指定しないと「normal」と同様の太さで表示されるので、あまり使うことはないでしょう。

フォントサイズを指定するには、font-sizeプロパティを使用します。

font-sizeプロパティで指定した大きさで文字が表示されます。

次のように指定します。
font-size:サイズ指定;

サイズ指定には、単位付きの数値、あるいはキーワードが入ります。

指定の方法には幾つかの方法があります。
単位付き数値指定
・%：指定した要素の親要素のフォントサイズに対する割合で、100%が基準です。

・em：親要素のフォントサイズの高さを1とした単位で、1emが基準となります。

・px：1ピクセルを1とした単位で、表示するディスプレイの解像度によって大きさが変ります。

・pt：1ポイントは1/72インチ（約0.35mm、1インチ2.54cm）で、絶対的な大きさの指定になります。

キーワード指定
・xx-small、s-small、small、medium、large、x-large、xx-large
：ユーザーのブラウザ環境等に左右されます。mediumが標準サイズで、7段階で表現します。

フォントサイズの指定には様々な意見があります。

絶対的な値を指定するとユーザーが文字の変更を出来ないなど、ユーザーの自由度を奪ってしまうユーザビリティの問題があります。

相対的な値で指定するとユーザビリティの問題はなくなりますが、見る環境によって大きさが変ることからデザイン側の問題が生じます。

指定方法でよく利用されるのが、em、px、%ですが、%等の相対的な値で指定するのが理想とされています。

しかし、紹介した指定方法はすべてW3Cの勧告では、使用可能となっています。

CSSのプロパティ、font-familyではフォント名を指定します。

font-familyのフォーマットは次の通りです。

font-family: フォント名;

複数のフォント名を指定するには、次のように「,（カンマ）」で区切って指定します。

font-family: フォント名,フォント名,フォント名;

また、フォント名にスペースが含まれている場合は、次のように「"（ダブルクォーテーション）」あるいは「'（シングルクォーテーション）」で囲む必要があります。

font-family: "Times New Roman";


フォント名を複数指定している場合は、一番最初あるいは、より左に指定したフォントが優先されますが、指定したフォントがユーザーの環境で表示できることが前提となります。

フォント名とは別に、下のようなフォントの種類名で指定することも出来ます。

・serif：　明朝系フォント
・sans-serif：　ゴシック系フォント
・cursive：　草書体、筆記体系フォント
・fantasy：　装飾体系フォント
・monospace：　等幅フォント

このようなフォントの種類で指定すると、ユーザーの環境にあったフォントで表示されます。


注意が必要なのは、このプロパティで指定したフォントが、ユーザーのPCに入っている必要があります。

デフォルトの状態でも「Windows」「Mac」「Linux」「UNIX」等のOSによってインストールされているフォントが異なることを覚えておきましょう。

colorプロパティは、文字色を指定するのに使います。

スタイルシートの適用のしかたで出てきた書き方の中に、次のように指定します。

{color: 色指定;}

色指定の部分では、数種類の指定方法があります。

・「#RRGGBB」のようにRGBを16進数で指定する。
#記号に続き、
R（赤）R（赤）G（緑）G（緑）B（青）B（青）
のようにRGBの各値を2桁ずつ16進数で指定します。

16進数は「0〜f」の16桁の数字とアルファベットで、0から始まり9の次から、abcdefと続く数字の表記方法です。

赤の場合は「#ff0000」となります。


・「#RGB」のようにRGBを16進数で指定する。
上記と違って#記号に続き、
R（赤）G（緑）B（青）
のようにRGBの各値を1桁ずつ16進数で指定します。

赤を指定する場合は、「#f00」となります。


・「rgb(0,0,0)」のように10進数で指定する。
rgbに続き、
(R（赤）,G（緑）,B（青）)
のように（）内にRGBをそれぞれ「,」で区切り「0〜255」の数字で指定します。

赤を指定する場合「rgb(255,0,0)」のように指定します。


・「rgb(0%,0%,0%)」のようにパーセントで指定する。
rgbに続き、
(R（赤）%,G（緑）%,B（青）%)
のように（）内にRGBをそれぞれ「,」で区切り「0〜100」のパーセンテージで指定します。

赤を指定する場合「rgb(100%,0%,0%)」のように指定します。


・色名で指定する。
直接、色の名前を指定することが出来ますが、HTML4.01で定義されている16色が基本となります。

赤を指定する場合「red」となります。


このブログでは、最もよく使用されている1番最初の方法で解説していきます。


赤を指定する場合は、
{color:#ff0000;}
と指定します。

colorプロパティで注意したいのは、背景色と同じにならないようにすることです。

例えば、白の背景色に白い文字色を指定すると読むことが出来ない。

そのためcolorプロパティを指定するときは、背景色も指定しておいた方が良いでしょう。