letter-spacing/文字間隔

letter-spacingプロパティは文字間隔の指定が出来ます。

説明

 letter-spacingプロパティを使うと文字と文字の間を広げたり、狭めたり文字間隔の設定が行えます。

letter-spacing説明

構文

 letter-spacingプロパティの構文は以下の通りです。

letter-spacing: 文字間隔;

 文字間隔は以下の設定が出来ます。

【文字間隔】
指定 説明
normal デフォルト
px ピクセル
em 文字数

利用例

 letter-spacingの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

p {
letter-spacing: 2px;
}

<p>文字間隔を2pxに指定</p>

 上記を表示すると以下になります。

文字間隔を2pxに指定

 尚、デフォルトのnormalの文字間隔は以下の通りです。

文字間隔をnormalに指定

 2emを指定すると以下になります。

文字間隔を2emに指定

 マイナスで指定する事も可能です。以下は-2pxで指定しています。

文字間隔を-2pxに指定

 マイナスを大きくすると文字が重なったり、表示が逆転して左方向に記述が表示されたりします。

補足

 letter-spacingと似たプロパティでword-spacingがあります。word-spacingは単語間隔で、letter-spacingは文字間隔です。

letter-spacinfgとword-spacing違い

 word-spacingが単語単位で間隔を指定するのに対し、letter-spacingは1文字1文字の間隔を指定するといった違いがあります。

関連ページ

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)