【39】単語間の間隔を指定する word-spacingプロパティ

最終更新日:2018年08月26日  (初回投稿日:2018年08月26日)

word-spacingプロパティは、単語間の間隔を指定するプロパティです。
単語を分離するスペース(半角スペース)に対して「送り幅」を追加できます。

参考:
CSS Text Module Level 3 | W3C Working Draft
word-spacing - CSS | MDN

word-spacingプロパティの値

word-spacingプロパティの値
キーワード normal がデフォルト値。追加のスペースは0です。
単位付き数値 単位を付けた数値で追加のスペースを指定。マイナスの値も使えます。
パーセンテージ 今のスペースに対してのパーセンテージで「追加のスペース」を指定します。
例えば、今のスペースの倍にしたければ「word-spacing: 100%」
マイナスの値も使えます。
例えば、今のスペースを0にしたければ「word-spacing: -100%」
(ただしこの値は W3C で「at-risk(リスクが有るので勧告候補で削除されるかも)」扱いになっています。)
グローバル値 text-indent: inherit; 親の値を継承(コレ書かなくても継承するけど)
text-indent: initial; 継承した親の値を解消しデフォルト値に戻す
text-indent: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 あり 適用できる要素 すべての要素

word-spacingプロパティの値は、white-spaceプロパティによる「空白処理(複数のホワイトスペースを1つに詰めるかそのままにするかなど)」が済んだ後、単語の間の「単語分離子文字」の両側に半分ずつ適用されるんだそうです。

単語分離子文字(word-separator character)

単語を分離するための文字のことですが、「半角スペース」だと思ってていいかも。
日本語でも「半角スペース」を使えば、word-spacingプロパティが使えます。

word-spacingでよく使う「単語分離子文字」のユニコード(Unicode)です。

Unicode HTMLでの
特殊文字
備考
U+0020  
 
普通に「スペースバー」を押してできる半角スペース
U+00A0  
 
 
no-break space(分断不可スペース)
スペース箇所での自然改行を避けたい時に使う

この他に、U+10100、U+10101、U+1361、U+1039F、U+1091F が「単語分離子文字(word-separator character)」だそうで、word-spacingプロパティの対象です。

word-spacingプロパティの指定サンプル

word-spacingプロパティの指定例です。
パーセンテージの値は Firefoxくらいしか実装していないようです。

word-spacing: 未指定(= normal) This property specifies additional spacing between "words". この プロパティは 追加の間隔を "単語" の間に 指定します。
word-spacing: .5em This property specifies additional spacing between "words". この プロパティは 追加の間隔を "単語" の間に 指定します。
word-spacing: -2px This property specifies additional spacing between "words". この プロパティは 追加の間隔を "単語" の間に 指定します。
word-spacing: 100% This property specifies additional spacing between "words". この プロパティは 追加の間隔を "単語" の間に 指定します。
word-spacing: -100% This property specifies additional spacing between "words". この プロパティは 追加の間隔を "単語" の間に 指定します。

サンプルの HTMLはこんなかんじです。
word-spacingプロパティは HTMLにインラインで書いています。

<div class="mihon">
  <b>word-spacing: 未指定(= normal)</b>
  This property specifies additional spacing between "words". 
  この プロパティは 追加の間隔を "単語" の間に 指定します。 
</div>

<div class="mihon" style="word-spacing:.5em">(テキストは省略)</div>
<div class="mihon" style="word-spacing:-2px">(テキストは省略)</div>
<div class="mihon" style="word-spacing:100%">(テキストは省略)</div>
<div class="mihon" style="word-spacing:-100%">(テキストは省略)</div>

サンプルの CSSはこんなかんじ。

.mihon {
	color:black;
	font-size:1rem;
	line-height:1.6;
	background:#ffc;
	margin:1em 0;
	border:solid 1px #ccc;
	padding:.6em;
	width:60%;
	}
.mihon b {
	display:block;
	color:#579961;
	word-spacing:normal}
/*word-spacingの各指定はdiv要素に直接style属性で書いています*/

英文でスペースが詰まって見えるフォントの場合に、単語間をあけて読みやすくするためにこの word-spacingプロパティを使うかんじかな。
日本語だとあんまり使う機会はないように感じますけどね。

次回予告

さて次回は、letter-spacingプロパティを使おう。
今回の word-spacing は「単語間」のスペースを調整しましたが、letter-spacingプロパティ「文字間」のスペースを調整します。
1文字ずつ均等に空けたり詰めたりできるプロパティです。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
10 | 2018/11 | 12
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.