トップ > CSS > はてなブログ、CSSで文字の書式を指定する方法　CSS講座（3）

はてなブログ、CSSで文字の書式を指定する方法　CSS講座（3）

CSS ブログの作成

文字の書式指定ここからは、ブログでよく使用するCSSプロパティについて紹介していきます。まずは、文字の書式指定に使用するプロパティを紹介します。

 

 

color

文字色を指定するときはcolorプロパティを使用し、その値に色を指定します。CSSで色を指定する方法は、前回の記事で解説したとおりです。

たとえば、文字色に「赤色」を指定するときは、以下のようにCSSを記述します。

color: #ff0000;

この段落は#ff0000の文字色（赤色）で表示されます。

 

もちろん、color: red;のようにカラーネームを使って文字色を指定しても構いません。

 

 

font-size

文字サイズを指定するときはfont-sizeプロパティを使用します。この値には単位付きの数値を指定するのが基本です。たとえば、文字サイズを20pxに変更するときは、以下のようにCSSを記述します。

font-size: 20px;

この段落は20pxの文字サイズで表示されます。

 

そのほか、pt（ポイント）やcm（センチ）、mm（ミリ）といった単位で文字サイズを指定することも可能です。

 

また、相対的な単位で文字サイズを指定する方法も用意されています。この場合は、%（パーセント）やem（エム）といった単位で文字サイズを指定します。たとえば、font-size: 120%;と指定すると、「親要素の文字サイズ」の1.2倍の大きさで文字を表示できます。

さらに、ルートとなるhtml要素の文字サイズを基準に、相対的に文字サイズを指定できるremという単位もあります。

 

 

font-family

文字の書体（フォント）を指定するときはfont-familyプロパティを使用し、「書体の種類」を以下のいずれかの値を指定します。

 

　　serif 明朝系のフォント
　　sans-serif ゴシック系のフォント
　　monospace 等幅フォント
　　cursive 草書体系のフォント
　　fantasy 装飾的なフォント

 

ただし、cursiveやfantasyの書体は、日本語（全角文字）には適用されず、英数字（半角文字）のみ書体が変化するのが一般的です。

 

フォントを個別に指定することも可能ですが、閲覧者の環境に応じて利用可能なフォントが異なることに注意しなければいけません。このため、各OS（Mac OS／Windowsなど）に合わせてフォント名を列記しなければいけません。さらに、利用可能なフォントがない方に向けて、「書体の種類」（sans-serifなど）を最後に指定しておく必要があります。

また、フォント名に「半角スペース」や「全角文字」が含まれる場合は、フォント名を引用符で囲って記述しなければいけません。

font-family: Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;

 

 

font-weight

文字の太さを指定するときはfont-weightプロパティを使用し、その値にnormalまたはboldを指定します。

 

　　normal 標準の太さ
　　bold 太字

 

たとえば、文字を太字で表示するときは、以下のようにCSSを記述します。

font-weight: bold;

この段落は「太字」で表示されます。

 

そのほか、100、200、300、・・・、900といった9段階の数値で太さを指定する方法も用意されていますが、太さが9種類もあるフォントは滅多に存在しないため、あまり実用的な指定方法とはいえません。

 

 

text-decoration 

下線などの文字装飾を指定するときはtext-decorationプロパティを使用し、以下に示した値を指定します。

 

　　none 装飾なし
　　underline 下線を描画
　　overline 上線を描画
　　line-through 打消線を描画
　　blink 文字の点滅

 

たとえば、文字に打消線を描画するときは、以下のようにCSSを記述します。

text-decoration: line-through;

文字装飾の書式で打消線を描画することも可能です。

 

また、リンク文字の下線を消去する場合にもtext-decorationプロパティを使用します。この場合は、text-decoration: none;と記述して文字装飾を「なし」に変更します。

 

 

text-align

文字を揃える位置（行揃え）を指定するときはtext-alignプロパティを使用し、以下に示した値を指定します。

 

　　left 左揃え
　　center 中央揃え
　　right 右揃え
　　justify 両端揃え

 

たとえば、文字を「中央揃え」で配置するときは、以下のようにCSSを記述します。

text-align: center;

この段落は「中央揃え」で配置されます。

 

ただし、日本語（全角文字）を含む文章は、justifyを指定しても「両端揃え」にならない場合があることに注意してください。日本語の「両端揃え」は、Webブラウザによって対応が異なります。

 

 

line-height

行間を指定するときはline-heightプロパティを使用し、行と行の間隔を数値で指定します。単純に数値だけを指定した場合は、「文字サイズ」を基準に行間が確保されます。たとえば、文字サイズが15pxの場合に、

line-height: 1.8;

と指定すると、15pxの1.8倍＝27pxの行間が確保されます。line-height: 2.0;を指定した場合は、15pxの2倍＝30pxの行間が確保されます。

 

そのほか、line-height: 25px;のように単位付きの数値を値に指定することも可能です。この場合は、25pxの行間が確保されます。