text-autospaceを使って、アルファベット等の間にスペースを指定する方法

こんにちは。

今回は、アルファベット等との間隔を指定するtext-autospaceというCSSプロパティを説明します。

HTMLやCSSを使うことに慣れてくると、

アルファベットや日本語や中国語などが混ざったテキストを見やすくしたい。
間隔を入れたら見やすくなるのかな。

と言うことも出てくると思います。そんな時、text-autospaceでアルファベットの間に間隔を入れることができます。

今回は、text-autospaceというCSSプロパティの

・基本的な使い方

について説明します。

text-autospaceとは

text-autospaceの読み方

text-autospaceは、「テキストーオートスペース」と読みます。「autospace」は直訳すると自動間隔です。

text-autospaceプロパティの説明

欧文では単語と単語の間にスペースを空けるのが当たり前ですが、日本語はそのような習慣はありません。日本語とアルファベットが混在する文章の時に使います。

text-autospaceプロパティは表意文字と、表音文字や数字や半角の括弧などの非表意文字との間に、スペースを入れるかどうかを指定するプロパティです。

表意文字:日本語、中国語、朝鮮語など1文字で意味を表す文字

表音文字:ひらがなやカタカナ・アルファベット・ヘブライ語など、複数の文字を組み合わせることによって意味を成す文字

text-autospaceはInternet Explorer独自のcssプロパティです。

text-autospaceプロパティで利用できる値

text-autospaceでは以下の値を使うことができます。

属性 説明
none  初期値です。スペースを入れません。
ideograph-alpha  表意文字と表音文字との間にスペースを入れます。
ideograph-numeric  表意文字と数字の間にスペースを入れます。
ideograph-parenthesis  表意文字と半角括弧 ( ) の間にスペースを入れます。
ideograph-space 表意文字に挟まれた半角スペースの幅を広げます。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 未対応
Edge 未対応
Firefox  未対応
Internet Explorer  5.0
Opera  未対応
Safari  未対応
スマートフォン用ブラウザ 対応状況
Android webview  未対応
Android版Chrome  未対応
Android版Firefox  未対応
Android 版 Opera  未対応
iOS版Safari  未対応
Samsung Internet  未対応
注意
Internet ExplorerはWindows8以降が必要です。

text-autospaceプロパティの基本的な使い方

text-autospaceプロパティの使い方を実際に見てみましょう。

text-autospaceプロパティの使い方

構文

{ text-autospace : 値; }

値は複数設定することもできます。その時は、値同士をスペースで区切ります。

では実際にサンプルで見てみましょう。

このようになります。

実際に挿入されるスペースの幅は非常に小さいので、よく見ないと違いが分かりません。

text-autospaceプロパティと関連タグ

letter-spacing

letter-spacingは文字と文字の間のスペースの大きさを数値と単位で指定するか、次に示す値を指定します。

{letter-spacing: 値}
normal :初期値 ブラウザが自動的にスペースを決定します。実際は0になることが多いです。
数値+px  : 決まったpx数でスペースを指定します。
数値+em : 文字のサイズに応じてスペースが指定されます。1em=「文字の高さ」です。

このように表示されます。

あいうab漢字cdえおef漢字gh

あいうab漢字cdえおef漢字gh

あいうab漢字cdえおef漢字gh

letter-spacingは数値+em が良く使われます。

word-spacing

word-spacing は、各単語間のスペースの大きさを数値と単位で指定するか、次に示す値を指定します。日本語は「word-spacing」は有効にはなりません。

{word-spacing: 値}
normal :初期値 ブラウザが自動的にスペースを決定します。実際は0になることが多いです。
数値+px  : 決まったpx数でスペースを指定します。
数値+em : 文字のサイズに応じてスペースが指定されます。1em=「文字の高さ」です。
数値+%   :文字のサイズに対する倍率に応じてスペースが指定されます。
数値+pt   : 文字のサイズに応じてスペースが指定されます。1pt=「1/72インチ」です。
これはcssword-spacingのsampleです。
これはcss word-spacingのsampleです。
これはcss  word-spacingのsampleです。

まとめ

いかがでしたか?

今回はtext-autospaceの基本的な使い方を説明しました。

対応ブラウザが1つしかないので、Internet Explorerをメインに使う方は覚えておくといいですね。

参考文献:W3C|text-autospace

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?