文字の間隔【letter-spacing】：CSS入門

CSS入門（20）

今回は、letter-spacingを使って、文字の間隔を調整します。

お話は、次の順番で進みます。

• 文字の間隔（letter-spacing）を設定する
• 次回予告
• 関連記事
• この記事へのコメント

▲ページの先頭に戻る

文字の間隔（letter-spacing）を設定する

1：前回までのお話

（01）

前回は、line-heightを使って、行の間隔を調整しました。

以下、前回までのCSSコードです。

h1, h2 { margin: 0; padding: 0; } body { background-color: #ffff00; font-size: 100.01%; font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Pゴシック","MS PGothic",Osaka,sans-self,Verdana,Arial,Helvetica; } h1 { background-color: #191970; color: #ffffff; font-size: 120%; padding: 5px; } h2 { background-color: #ffffff; font-size: 100%; border-top: 2px solid #191970; border-right: 2px solid #191970; border-bottom: 2px solid #191970; border-left: 8px solid #191970; padding: 2px 5px; } img { margin: 4px 15px 6px; } table { margin: 5px; background-color: #000000; } table th { background-color: #191970; color: #ffffff; padding: 2px 10px; } table td { background-color: #ffffff; padding: 2px 10px; } ul li { font-size: 90%; list-style-image: url(free_triangle_005_indigo.gif); } p { font-size: 90%; } #blog-info { background-color:#008400; border:1px solid #333333; padding:5px; margin:5px; } #blog-pre { background-color:#ffffff; border:1px solid #333333; padding:5px; margin:5px; } #blog-pre p { text-indent: 1em; margin-right: 10px; margin-left: 10px; line-height: 140%; }

▲ページの先頭に戻る

2：文字の間隔（letter-spacing）を設定する

（02）

文字の間隔は、文字と文字の間になります。

（03）

letter-spacingは、例えば次のように書きます。

p { letter-spacing: 0.1em; }

0.1emというのは、「文字の高さを 1とすると、その10分の1を文字の間隔にしますよ」と言うことです。例えば、1emにすれば、1文字分くらいの間隔があくことになります。

それでは、letter-spacingを追加しておきましょう。

#blog-pre p { text-indent: 1em; margin-right: 10px; margin-left: 10px; line-height: 140%; letter-spacing: 0.1em; }

（04）

さらにブラウザで表示してみましょう。

変更が分かり難い場合は、0.2、0.3など数値を大きくして、ちょうど良い数値を探してみてください。

キュウキュウとしていると読みにくい印象を与えます。少し余裕をもたせると、多少文字サイズが小さくても読みやすく感じられます。

▲ページの先頭に戻る

次回予告

次回は、文字の左右・中央揃え【text-align】について書く予定です。

▲ページの先頭に戻る

関連記事

CSSに関連する記事を、ご紹介します。

1：カスタマイズ前

• ブログをカスタマイズしたい！
• カスタマイズ前の準備

2：CSSの基本的なこと

• CSS入門 はじめました
• CSSの書き方
• CSSファイルの外部読み込み

3：色の指定

• 背景色の変更【background-color】
• 文字色の変更【color】

4：罫線の指定

• 罫線を描く【border】

5：間隔（余白）の指定

• margin、paddingとは？
• margin、paddingの初期化
• 間隔をあける【margin、padding】

6：継承と子孫セレクタ

• 継承と子孫セレクタとは？

7：箇条書き（リスト）

• 箇条書きの装飾【list-style-type】
• 箇条書きに画像【list-style-image】

8：文字（フォント）の指定

• フォントの指定【font-family】
• 日本人が好きなフォントは？
• 文字サイズの変更【font-size】（1）
• 文字サイズの変更【font-size】（2）

9：idセレクタ、classセレクタ

• idセレクタ、classセレクタとは？

10：文章を読みやすくする

• 段落のインデント【text-indent】
• 行の間隔【line-height】
• 文字の間隔【letter-spacing】（この記事です）

11：文字の中央揃え（センタリング）

• 文字の左右・中央揃え【text-align】

12：レイアウト

• 幅と高さを決める【width、height】
• 段組みレイアウト【float】

13：tableの中央揃え（センタリング）

• 表（table）の中央揃え

14：CSSで飾る

• CSSでリンクを装飾する
• 背景に画像【background-image】

15：まとめ

• 最後にIEでチェック＋CSSハック
• CSS入門まとめ
• HTMLとCSSにコメントを入れる方法

▲ページの先頭に戻る

作成日：2008/05/03 更新日：2008/05/03

« 「行の間隔【line-height】」｜「文字の左右・中央揃え【text-align】」 »