にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

空白文字を使わずに文字間隔を広げる(調整する)CSSの書き方 [テキスト]

見出しやタイトルなどのデザインとして、「文字と文字の間隔を広げる」装飾が使われているのをたまに見かけます。ワープロなどで文書を作成している場合なら、「文字と文字の間に半角スペースを挿入する」という手段で文字間隔を調整する(広げる)こともあるでしょうね。でも、スペース(空白文字)を挿入することで間隔を調整する方法には、デメリットがあります。

  • 検索にヒットしなくなる
  • 空白文字(半角スペースなど)の幅単位でしか調整できない
  • 読み上げソフトで正しく読み上げられない

例えば、「空白文字」という4文字の間に半角スペースを挿入して「空 白 文 字」としてしまうと、検索エンジンや読み上げソフトなどからは、「空(そら)」・「白(しろ)」・「文(ぶん)」・「字(じ)」という4つの別々の単語だと解釈されてしまう可能性があります。

こうなると、「空白」という検索語ではヒットできなくなりますし、正しく読み上げられなくなるデメリットがあります。また、デザインの面からも「半角文字1つ分単位でしか調整できない」という不自由さがあります。

というわけで、文字間隔を調整したい場合には、スタイルシートのletter-spacingプロパティを使いましょう。使い方はとても簡単で、以下のような感じで記述します。

h2 {
   letter-spacing: 0.5em;
}

上記のように記述すると、h2要素内の文字と文字の間隔が0.5文字分確保されます。
表示すると以下のような感じ。

文字間隔を広げた見出し

もっと広くしたければ、「0.5em」の部分を大きくすれば良いだけです。「1em」にすれば、1文字分の間隔が空きます。他の単位も使えるので、「3px」と書けば3ピクセルだけ空くようになります。

p.wide {
   letter-spacing: 1em; /* 文字間隔を1文字分に */
}
p.thin {
   letter-spacing: 3px; /* 文字間隔を3pxに */
}

これらの文字間隔で表示すると、以下のような感じになります。

文字間隔を1文字分に広げる

文字間隔を3ピクセルにする

この方法なら、見た目の上ではどれだけ文字の間隔が開いていても、ソース上には余計な隙間がないので、問題なく検索にヒットしますし、正しく読み上げられるでしょう。しかも、1ピクセル単位で文字間隔を調整できます。

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---