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

word-spacing”プロパティ:単語の間隔

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

プロパティについて

概要

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

word-spacing”プロパティは単語間の間隔を調整するプロパティです。

word-spacing”プロパティで指定された長さ分の空白をホワイトスペースの処理後に残されたワード・セパレータの両側に半分ずつ追加する形で単語間の距離を調整します。ワード・セパレータがない場合やワード・セパレータの送り幅が“0”である場合(ゼロ幅スペース(U+200B)など)には空白は追加されません。

ワード・セパレータを使用してわかち書きにされていない一般的な日本語の文章の場合は“word-spacing”プロパティの影響を受けません。

サンプルコード

p { word-spacing: 1em;}

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

仕様書

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

定義あり

定義あり

定義あり

単語間の間隔を調整しない

p {
word-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 {
word-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 {
word-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 {
word-spacing: 3em;
}

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

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 {
word-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 {
word-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 {
word-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 {
word-spacing: 300%;
}

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

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 {
word-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.

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

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