こんにちは。
今回は、アルファベット等との間隔を指定する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 | 未対応 |
text-autospaceプロパティの基本的な使い方
text-autospaceプロパティの使い方を実際に見てみましょう。
text-autospaceプロパティの使い方
構文
値は複数設定することもできます。その時は、値同士をスペースで区切ります。
では実際にサンプルで見てみましょう。
|
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 |
<html lang="ja"> <head> <title>サンプルページ</title> <style type="text/css"> p{font-size: 33px;} .sample0{text-autospace: none;} .sample1{text-autospace: ideograph-alpha;} .sample2{text-autospace: ideograph-numeric;} .sample3{text-autospace: ideograph-parenthesis;} .sample4{text-autospace: ideograph-space;} </style> </head> <body> <div class="main"> <p class="sample0">あいうab漢字cdえおef漢字gh</p> <p class="sample1">あいうab漢字cdえおef漢字gh</p> <p class="sample2">あいう1ab漢字2cdえお3ef漢字gh</p> <p class="sample3">あいうab(括弧)cdえおef(括弧)漢字gh</p> <p class="sample4">漢字漢字漢字</p> </div> </body> </html> |
このようになります。
実際に挿入されるスペースの幅は非常に小さいので、よく見ないと違いが分かりません。
text-autospaceプロパティと関連タグ
letter-spacing
letter-spacingは文字と文字の間のスペースの大きさを数値と単位で指定するか、次に示す値を指定します。
・normal ：初期値 ブラウザが自動的にスペースを決定します。実際は0になることが多いです。
・数値+px ： 決まったpx数でスペースを指定します。
・数値+em ： 文字のサイズに応じてスペースが指定されます。1em＝「文字の高さ」です。
|
1 2 3 |
<p style="letter-spacing: normal">あいうab漢字cdえおef漢字gh（normal）</p> <p style="letter-spacing: 0.5em">あいうab漢字cdえおef漢字gh</p> <p style="letter-spacing: 1em">あいうab漢字cdえおef漢字gh</p> |
このように表示されます。
あいうab漢字cdえおef漢字gh
あいうab漢字cdえおef漢字gh
あいうab漢字cdえおef漢字gh
letter-spacingは数値+em が良く使われます。
word-spacing
word-spacing は、各単語間のスペースの大きさを数値と単位で指定するか、次に示す値を指定します。日本語は「word-spacing」は有効にはなりません。
・normal ：初期値 ブラウザが自動的にスペースを決定します。実際は0になることが多いです。
・数値+px ： 決まったpx数でスペースを指定します。
・数値+em ： 文字のサイズに応じてスペースが指定されます。1em＝「文字の高さ」です。
・数値+％ ：文字のサイズに対する倍率に応じてスペースが指定されます。
・数値+pt ： 文字のサイズに応じてスペースが指定されます。1pt＝「1/72インチ」です。
|
1 2 3 |
<p style="word-spacing: normal">これはcss word-spacingのsampleです。</p> <p style="word-spacing: 1em">これはcss word-spacingsampleです。</p> <p style="word-spacing: 120%">これはcss word-spacingsampleです。</p> |
これはcss word-spacingのsampleです。
これはcss word-spacingのsampleです。
まとめ
いかがでしたか？
今回はtext-autospaceの基本的な使い方を説明しました。
対応ブラウザが１つしかないので、Internet Explorerをメインに使う方は覚えておくといいですね。
参考文献：W3C｜text-autospace
