【40】文字間の間隔を指定する letter-spacingプロパティ

最終更新日:2018年09月10日  (初回投稿日:2018年09月10日)

letter-spacingプロパティは、「文字間」のトラッキングを調整します。
1文字ずつ均等に空けたり詰めたりするプロパティです。

「トラッキング」とは、まとまったテキストを一律で 字送り・字詰め すること。
印刷・エディトリアル用語です。

ちなみに 「カーニング」とは 印刷・エディトリアル用語で、字間(アキ)の調整をすること。
フォントのフォルムによって空いて見えるところ(W と A の間とか)を詰めたりすることです。

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

letter-spacingプロパティの値

letter-spacingプロパティの値
キーワード normal がデフォルト値。トラッキングは0です。
ただし text-align: justify が指定されていたら、ブラウザが両端揃えをするためにトラッキングを変えることは許可します。
単位付き数値 単位を付けた数値でトラッキングを指定。マイナスの値も使えます。
グローバル値 text-indent: inherit; 親の値を継承(コレ書かなくても継承するけど)
text-indent: initial; 継承した親の値を解消しデフォルト値に戻す
text-indent: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 あり 適用できる要素 すべての要素

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

letter-spacingプロパティの指定例です。

letter-spacing: 未指定(= normal) This property specifies additional spacing (commonly called tracking) between adjacent typographic character units. このプロパティは、隣接する文字の文字単位の間に追加の間隔 (通常トラッキングと呼ばれる)を指定します。
letter-spacing: 0.1em This property specifies additional spacing (commonly called tracking) between adjacent typographic character units. このプロパティは、隣接する文字の文字単位の間に追加の間隔 (通常トラッキングと呼ばれる)を指定します。
letter-spacing: 5px This property specifies additional spacing (commonly called tracking) between adjacent typographic character units. このプロパティは、隣接する文字の文字単位の間に追加の間隔 (通常トラッキングと呼ばれる)を指定します。
letter-spacing: -0.05em This property specifies additional spacing (commonly called tracking) between adjacent typographic character units. このプロパティは、隣接する文字の文字単位の間に追加の間隔 (通常トラッキングと呼ばれる)を指定します。

サンプルのソースコードはこんなかんじ。
各 <div>要素にインラインで letter-spacingを指定しています。

<div class="mihon"> <!--←未指定(=normal)-->
<b>letter-spacing: 未指定(= normal)</b>
This property specifies additional spacing (commonly called tracking) 
between adjacent typographic character units. 
このプロパティは、隣接する文字の文字単位の間に追加の間隔
(通常トラッキングと呼ばれる)を指定します。
</div>
<div class="mihon" style="letter-spacing:0.1em">(テキストは省略)</div>
<div class="mihon" style="letter-spacing:5px">(テキストは省略)</div>
<div class="mihon" style="letter-spacing:-0.05em">(テキストは省略)</div>

<style>
.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;
	letter-spacing:normal} /*←タイトル(グリーンの文字)のみデフォルト値に*/
</style>

W3C の仕様書では、letter-spacingプロパティを指定した要素の「行頭・行末」の文字にはトラッキングは起きないことになってます。
が、実際には文字の進行方向にトラッキングスペースができるようで、行末の文字がピタッとボックスの端にくっつかないんだよね。

letter-spacing: 1em; text-align:right このプロパティは、隣接する文字の文字単位の間に追加の間隔 (通常トラッキングと呼ばれる)を指定します。

上のサンプルは、右揃え( text-align: right )にしています。
タイトル(グリーンの文字)letter-spacing: normal(トラッキングなし)です。
letter-spacing: 1em が効いてる本文(黒の文字)は、右側に 1em分の空きがあるのがわかります。

<div class="mihon" style="letter-spacing:1em; text-align:right">
<b>letter-spacing: 1em; text-align:right</b>
このプロパティは、隣接する文字の文字単位の間に追加の間隔
(通常トラッキングと呼ばれる)を指定します。
</div>

日本語(文字の進行方向が左から右)の場合、「右寄せ」にしたとき上の現象が起きるので注意が必要です(まあ滅多に無い状況ですが)

font-kerning との併用もできます

font-kerningも同時に使っている場合、font-kerningの適用後に letter-spacing が行われるそうです。

試してみます。

font-kerning: normal のみ P. Wa, WAV, To, Yo

font-kerning: normal; letter-spacing: -0.03em; P. Wa, WAV, To, Yo

font-kerning: none; letter-spacing: -0.03em; P. Wa, WAV, To, Yo

最初のは、font-kerning: normal のみ、
2番目は、カーニングも letter-spacing も同時指定。
3番目はも letter-spacing のみ。

letter-spacing は1文字ずつ固定値で調整しますが、font-kerning は臨機応変に詰めてくれるので便利。で、font-kerning だけでは物足りない時に、letter-spacing も併用できるので、さらに便利ですね。

上のサンプルのソースコードです。

<div class="mihon">
  <p class="k-normal">
  <span style="letter-spacing:0">font-kerning: normal のみ</span>
  P. Wa, WAV, To, Yo</p>
  <p class="k-normal-spacing">
  <span style="letter-spacing:0">font-kerning: <b>normal</b>; letter-spacing: -0.03em;</span>
  P. Wa, WAV, To, Yo</p>
  <p class="k-none-spacing">
  <span style="letter-spacing:0">font-kerning: <b>none</b>;  letter-spacing: -0.03em;</span>
  P. Wa, WAV, To, Yo</p>
</div>
<style>
.k-normal-spacing {
	-webkit-font-kerning: normal;
	font-kerning: normal;
	letter-spacing: -0.03em
    }
.k-none-spacing {
	-webkit-font-kerning: none;
	font-kerning: none;
	letter-spacing: -0.03em
    }
</style>

font-kerning については、コチラをご覧ください。
【29】文字間を自動調整してくれる font-kerningプロパティ

font-variant-east-asian との併用もしてみます

font-variant-east-asian: proportional-widthfont-feature-settings: 'pwid'「カナ詰め」をしてくれるんでしたね。
これと letter-spacing を併用してみます。

何も指定していない状態 このプロパティは、隣接する文字の文字単位の間に追加の間隔 (通常トラッキングと呼ばれる)を指定します。
font-variant-east-asian: proportional-width;
font-feature-settings: 'pwid'
このプロパティは、隣接する文字の文字単位の間に追加の間隔 (通常トラッキングと呼ばれる)を指定します。
font-variant-east-asian: proportional-width;
font-feature-settings: 'pwid';
letter-spacing:0.5em
このプロパティは、隣接する文字の文字単位の間に追加の間隔 (通常トラッキングと呼ばれる)を指定します。
letter-spacing:0.5em このプロパティは、隣接する文字の文字単位の間に追加の間隔 (通常トラッキングと呼ばれる)を指定します。

ちょっとわかりにくいですが、併用できてますね。
3番目と 4番目のサンプルを見ると、3番目(カナ詰めも letter-spacing も両方指定)のほうが、カナが詰まっています。

ちょっと意外だったのは、「font-variant-east-asian: proportional-width(font-feature-settings: 'pwid' も同じ)」を指定すると全角の ( ) が、半角の () に変わること。知らなかった(そしてちょっと迷惑)

font-variant-east-asian についてはコチラをご覧ください。
【30-6】漢字や仮名のための font-variant-east-asian
font-feature-settings についてはコチラ。
【31】OpenType機能を直接指定できる font-feature-settings

letter-spacingプロパティの使いどころ

タイトルなどに、カーニングと一緒に使うといい感じです。

ちなみに以前はよく、日本語での表組みで「単語の左右を揃えたい」時に使ってました。
下のテーブルの左側のテキスト(会場、開催期間など)は、文字数が違うため両端が揃わないのですが、letter-spacing でトラッキングを調整して左右を揃えています。

中央公園
開催期間 夏休み中
大人500円(お子さまは無料です)
駐車 なし(最寄りに公共駐車場あり)

サンプルのソースコードはこんなかんじです。

<table class="sample">
  <tr>
    <th><span style="letter-spacing:2em">会</span>場</th>
    <td>中央公園</td>
  </tr>
  <tr>
    <th>開催期間</th>
    <td>夏休み中</td>
  </tr>
  <tr>
    <th><span style="letter-spacing:2em">料</span>金</th>
    <td>大人500円(お子さまは無料です)</td>
  </tr>
  <tr>
    <th><span style="letter-spacing:.5em">駐車</span>場</th>
    <td>なし(最寄りに公共駐車場あり)</td>
  </tr>
</table>

ただしコレ、こんな↑面倒くさいことをしなくても、今は text-align: justify を使えばもっと簡単にできます。

会場 中央公園
開催期間 夏休み中
料金 大人500円(お子さまは無料です)
駐車場 なし(最寄りに公共駐車場あり)

ここでの注意点は、text-align: justify だけだとダメなこと。
(テキストが1行しかないとそれが「最終行」になるので text-align: start(デフォルト)扱いになる) 必ず text-align-last: justify も併用します。
ソースコードはこちら。

<table class="sample">
  <tr>
    <th>会場</th>
    <td>中央公園</td>
  </tr>
  <tr>
    <th>開催期間</th>
    <td>夏休み中</td>
  </tr>
  <tr>
    <th>料金</th>
    <td>大人500円(お子さまは無料です)</td>
  </tr>
  <tr>
    <th>駐車場</th>
    <td>なし(最寄りに公共駐車場あり)</td>
  </tr>
</table>

<style>
.sample th {
	text-align:justify;
	text-align-last:justify; /*これが無いと左寄せのまま*/
    }
</style>

text-align: justify text-align-last: justify については、コチラをご覧ください。
【33】テキストの整列や両端揃えを指定する text-alignプロパティ

次回予告

さて次回は、line-breakプロパティを使おう。
これは、改行した次の行の頭に「句読点(、。)閉じ括弧(」』)」などが来ないように制御する「改行ルール(禁則処理)の厳密さ」を変更できるプロパティです。

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

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

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

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

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

スポンサーリンク

コメントの投稿

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

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
08 | 2018/09 | 10
- - - - - - 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.