現在地: Home » 初級ホームページ作成講座：目次 » 文字に関する指定

文字に関する指定

このページでは、初心者でも比較的使いやすいものだけを抜粋しています。また、スタイルシートの指定に関しては「外部CSS」に記述しているものとします。その他の記述方法は「スタイルシートの定義方法」を参照して下さい。

文字の色/color

文字の色

p{color: red;}

値にはキーワードによる指定のほかに「#ff0000」などでも指定出来ます。

▲Top

文字の装飾/text-decoration

文字の装飾文字の装飾文字の装飾

<p>文字の装飾<span>文字の装飾</span>文字の装飾</p>

p span{text-decoration: underline;}

リンクの張ってあるテキスト（アンカーテキスト）などの下線を消す際も使用します。その際の指定は「text-decoration: none;」とします。

▲Top

行の高さ/line-height

行の高さ[line-height:1.5;]
サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル。

行の高さ[line-height:1.5em;]
サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル。

行の高さ[line-height:150%;]
サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル。

行の高さ[line-height:2;]
サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル。

行の高さ[line-height:2em;]
サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル。

行の高さ[line-height:200%;]
サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル。

p{line-height: 2em;}

「em」による指定のほかに「px」「%」「倍(1, 1.5, 2)」と指定する事が出来ます。

「em」「%」での指定の際に気を付ける点

一括指定（bodyなどで）すると、見出しタグのh1などでは文字が隠れてしまうので「倍」指定がお薦めです。「em」「%」を使用するなら段落タグ(p)に限定した方が良いです。

▲Top

行揃え/text-align

行揃え/text-align:left;

行揃え/text-align:center;

行揃え/text-align:right;

 p{text-align: center;} 
p{text-align: right;}
p{text-align: left;}

▲Top

文字間隔/letter-spacing

サンプル

文字間隔/デフォルト

文字間隔/letter-spacing:0.5em;

 p{letter-spacing: 0.5em;}

「Mac IE」のバージョンによってはレイアウトがおかしくなります。（横方向へのスクロールバーが付きます。）

▲Top

文字の大きさ/font-size

文字の大きさ/font-size:200%;

 p{font-size: 200%;}

「%」のほかにも「px」「em」「pt」などがありますが、アクセシビリティ上フォントサイズの単位は「%」「em」などの相対単位を使用しましょう。

▲Top

文字の太さ/font-weight

サンプル

文字の太さ/font-weight

 p{font-weight: bold;}

▲Top

高性能サーバ

低価格サーバ

無料ホームページスペース