ホーム > HTML > フォント

CSS -フォント-

文字サイズ

文字サイズを指定する場合は、font-sizeプロパティを使用します。

使用例

font-size:30px;

指定値には、相対単位、絶対単位、割合指定ありますが、絶対単位は、ユーザが文字サイズを変更できないことがあるため、 相対単位または、割合(%)でサイズの指定をお勧めします。

長さの単位

相対単位
em エム 1em=ブラウザで設定している1文字分の高さ
ex エックス 1ex=ブラウザで設定している小文字xの高さ
px ピクセル 1px=ディスプレイの1画素
絶対単位
pt ポイント 1pt=0.3514mm
pc パイカ 1pc=4.2168mm
in インチ 1in=2.54cm
cm センチメートル 1cm=10mm
mm ミリメートル 1mm=0.1cm
割合
% デフォルトのサイズを100%ととして、相対的にサイズを指定します。
実際は、ブラウザによって計算されたpx値になります。

フォントの色

フォントの色を指定する場合は、colorプロパティを使用します。

使用例

color : #ff0000;

色の3原色である「赤(Red)」「緑(Green)」「青(Blue)」を256段階に分け それぞれの組み合わせによって表されます。

スタイルシートでは、大きく分けて3種類の指定方法があります。

  1. 色の名前で指定する
    数ある色のなかで、代表的なものについては、「red」「yellow」のように 色の名前で指定することが可能です。
  2. カラーコードで指定する
    「赤(Red)」「緑(Green)」「青(Blue)」を00~ffまでの16進数を使って 指定することができます。
    必ず、カラーコードの前に「#」が必要です。
    また、「#f00」と3桁に省略することもできます。「#ff0000」と同じ意味になります。
  3. 数値で指定する
    色指定に、255を最大値とする数値を使った方法です。
    R,G,Bの順に並べ、値をカンマで区切って「rgb(0,128,255)」等と指定します。

フォント(書体)

フォント(書体)を指定する場合は、font-familyプロパティを使用します。

フォント名の記述は、大文字や小文字、全角、半角を正確に記述する必要があります。

また、フォント名にスペースがある場合は「'」「"」で挟んで指定する必要があります。

font-family:第一候補,第二候補,第三候補

WindowsとMacで似た種類のフォントを指定しておくことが必要です。複数のフォントを指定する場合は、カンマで区切ります。

また、フォントの種類をブラウザ側で判断してくれるキーワードを値にすることもできます。

フォントのキーワード 説明
sans-serif ゴシック系のフォント
serif 明朝系のフォント
cursive 筆記体・草書体のフォント
fantasy 装飾的なフォント
monospace 等幅フォント

文字の太さ

文字の太さを指定する場合は、font-weightプロパティを使用します。

使用例

font-weight:bold


機能
数値 太さを100,200…900と100刻みで指定(400が標準)
nomal 太字にせず、元々の太さにする(数値指定の400と同じ太さ)
bold 太字にする(数値指定の700と同じ太さ)
border 相対的に太くする
lighter 相対的に細くする

文字の斜体

文字を斜体に指定する場合には、font-styleプロパティを使用します。

使用例

font-style:italic


機能
italic 指定した文字列に斜体(イタリック体)フォントを適用
oblique 文字列を斜体に変形
nomal 非斜体に指定

日本語フォントの場合、italicとobliqueの表示の差はありません。

Windows Vistaから導入された「メイリオ」フォントは、斜体用のフォントを通常フォントと 同じように表示させるようなフォント側で設定されているため、斜体を指定しても斜体にできません。

斜体を指定する場合は、英語フォント(Verdana等)を指定した方が、見栄えがよくなります。

デザインテクニック的な使い方として、ブラウザのデフォルトで斜体表示されるaddress要素などに対して それをキャンセルする(「nomal」を指定する)ために、このプロパティが使用されることが多いです。

テキストの装飾

テキストを装飾する場合には、text-decorationプロパティを使用します。

使用例

a{ text-decoration:none;}
テキストリンクの下線を消すこともできます。


機能
line-through 取消線をつける
underline 下線をつける
overline 上線をつける
blink 点滅させる
none テキストの飾りをつけない