このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

letter-spacing”プロパティ:文字の間隔

記事Sep. 17th,2021
Apr. 9th,2022
文字の間隔を調整する
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 letter-spacing: normal;
適用対象 インライン・ボックスとテキスト
継承 Yes
パーセント値 フォント・サイズ計算値(“1em”)を“100%”とする
計算値 絶対長もしくはパーセント値
アニメーション 計算値

letter-spacing”プロパティは隣接する文字間の間隔を調整するプロパティです。

letter-spacing”プロパティを適用する際、連続するアトミック・インライン(置換要素など)は1個の文字のように扱われます。

letter-spacing”プロパティによる空白は行の先頭には追加されません。

サンプルコード

p { letter-spacing: 1em;}

説明
normal 空白を追加しません (計算値は“0”になります。)
<length> pxemなどでフォントで文字間に追加する空白の大きさを指定 (負の値も有効ですが、ユーザー・エージェントは値の範囲を制限する場合があります。)
<percentage> フォント・サイズ計算値を“100%”として文字間に追加する空白の大きさを指定 (その要素での“1em”を“100%”とします。負の値も有効ですが、ユーザー・エージェントは値の範囲を制限する場合があります。)
共通キーワード

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告候補(CR) 作業草稿(WD)
letter-spacing
定義あり

定義あり

定義あり

定義あり

文字の間隔を調整しない

p {
letter-spacing: normal;
}

彼女は「春はあけぼの。」と記しているが、これは春は朝が一番良い時間であるということを言っているのである。そして「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。

She wrote "Spring is dawn". This means that the best time in spring is dawn. And also she wrote "A cat is black on the top, and besides that, all white". This means she likes a black cat with a white belly.

كتبت "الربيع هو الفجر". هذا يعني أن أفضل وقت في الربيع هو الفجر. وكتبت أيضًا "قطة سوداء في الأعلى ، وإلى جانب ذلك ، كلها بيضاء". هذا يعني أنها تحب قطة سوداء ذات بطن أبيض.

文字の間隔を長さを指定して調整する

p {
letter-spacing: 0.1em;
}

彼女は「春はあけぼの。」と記しているが、これは春は朝が一番良い時間であるということを言っているのである。そして「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。

She wrote "Spring is dawn". This means that the best time in spring is dawn. And also she wrote "A cat is black on the top, and besides that, all white". This means she likes a black cat with a white belly.

كتبت "الربيع هو الفجر". هذا يعني أن أفضل وقت في الربيع هو الفجر. وكتبت أيضًا "قطة سوداء في الأعلى ، وإلى جانب ذلك ، كلها بيضاء". هذا يعني أنها تحب قطة سوداء ذات بطن أبيض.

p {
letter-spacing: 1em;
}

彼女は「春はあけぼの。」と記しているが、これは春は朝が一番良い時間であるということを言っているのである。そして「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。

She wrote "Spring is dawn". This means that the best time in spring is dawn. And also she wrote "A cat is black on the top, and besides that, all white". This means she likes a black cat with a white belly.

كتبت "الربيع هو الفجر". هذا يعني أن أفضل وقت في الربيع هو الفجر. وكتبت أيضًا "قطة سوداء في الأعلى ، وإلى جانب ذلك ، كلها بيضاء". هذا يعني أنها تحب قطة سوداء ذات بطن أبيض.

p {
letter-spacing: 2em;
}

彼女は「春はあけぼの。」と記しているが、これは春は朝が一番良い時間であるということを言っているのである。そして「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。

She wrote "Spring is dawn". This means that the best time in spring is dawn. And also she wrote "A cat is black on the top, and besides that, all white". This means she likes a black cat with a white belly.

كتبت "الربيع هو الفجر". هذا يعني أن أفضل وقت في الربيع هو الفجر. وكتبت أيضًا "قطة سوداء في الأعلى ، وإلى جانب ذلك ، كلها بيضاء". هذا يعني أنها تحب قطة سوداء ذات بطن أبيض.

p {
letter-spacing: -0.1em;
}

彼女は「春はあけぼの。」と記しているが、これは春は朝が一番良い時間であるということを言っているのである。そして「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。

She wrote "Spring is dawn". This means that the best time in spring is dawn. And also she wrote "A cat is black on the top, and besides that, all white". This means she likes a black cat with a white belly.

كتبت "الربيع هو الفجر". هذا يعني أن أفضل وقت في الربيع هو الفجر. وكتبت أيضًا "قطة سوداء في الأعلى ، وإلى جانب ذلك ، كلها بيضاء". هذا يعني أنها تحب قطة سوداء ذات بطن أبيض.

文字の間隔をパーセント値を指定して調整する

p {
letter-spacing: 50%;
}

彼女は「春はあけぼの。」と記しているが、これは春は朝が一番良い時間であるということを言っているのである。そして「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。

She wrote "Spring is dawn". This means that the best time in spring is dawn. And also she wrote "A cat is black on the top, and besides that, all white". This means she likes a black cat with a white belly.

كتبت "الربيع هو الفجر". هذا يعني أن أفضل وقت في الربيع هو الفجر. وكتبت أيضًا "قطة سوداء في الأعلى ، وإلى جانب ذلك ، كلها بيضاء". هذا يعني أنها تحب قطة سوداء ذات بطن أبيض.

p {
letter-spacing: 100%;
}

彼女は「春はあけぼの。」と記しているが、これは春は朝が一番良い時間であるということを言っているのである。そして「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。

She wrote "Spring is dawn". This means that the best time in spring is dawn. And also she wrote "A cat is black on the top, and besides that, all white". This means she likes a black cat with a white belly.

كتبت "الربيع هو الفجر". هذا يعني أن أفضل وقت في الربيع هو الفجر. وكتبت أيضًا "قطة سوداء في الأعلى ، وإلى جانب ذلك ، كلها بيضاء". هذا يعني أنها تحب قطة سوداء ذات بطن أبيض.

p {
letter-spacing: 200%;
}

彼女は「春はあけぼの。」と記しているが、これは春は朝が一番良い時間であるということを言っているのである。そして「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。

She wrote "Spring is dawn". This means that the best time in spring is dawn. And also she wrote "A cat is black on the top, and besides that, all white". This means she likes a black cat with a white belly.

كتبت "الربيع هو الفجر". هذا يعني أن أفضل وقت في الربيع هو الفجر. وكتبت أيضًا "قطة سوداء في الأعلى ، وإلى جانب ذلك ، كلها بيضاء". هذا يعني أنها تحب قطة سوداء ذات بطن أبيض.

p {
letter-spacing: -10%;
}

彼女は「春はあけぼの。」と記しているが、これは春は朝が一番良い時間であるということを言っているのである。そして「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。

She wrote "Spring is dawn". This means that the best time in spring is dawn. And also she wrote "A cat is black on the top, and besides that, all white". This means she likes a black cat with a white belly.

كتبت "الربيع هو الفجر". هذا يعني أن أفضل وقت في الربيع هو الفجر. وكتبت أيضًا "قطة سوداء في الأعلى ، وإلى جانب ذلك ، كلها بيضاء". هذا يعني أنها تحب قطة سوداء ذات بطن أبيض.

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク