CSSのletter-spacingの使い方【初心者向け】

初心者向けにCSSのletter-spacingの使い方について解説しています。行間を空けるためにline-height属性を使いましたが、横の字間をあけたり指定するにはletter-spacing属性を使います。実際にletter-spacingを使って確かめてみましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

CSSのletter-spacingの使い方について解説します。

CSSの基礎がわからない場合は、CSSの書き方の記事を先にお読みください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのCSSのカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

CSSのletter-spacingの使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

letter-spacingとは

Webデザインや、DTPデザインなどに少しでも触れたことがある方なら、「字間」という言葉を聞いたことがあるのではないでしょうか。

これは、文字と文字の隙間を指しており、それを広げることにより、デザインを整然として見せたり、読みやすい文字組みにすることができます。

それを、CSSで調整できるのが「letter-spacing」です。

 

letter-spacingの書き方

値は、nomalとするか、数値+単位で書きます。nomalの場合は、ブラウザのデフォルトが適用されるため、通常「0」となります。

数値を指定する場合は、1文字の大きさを1とするemが使われます。その理由としては、使用されるフォントによって1文字の横幅は様々なので、それに準じた大きさを指定できるためです。

もちろんpxで指定することもできるので、場面にふさわしい単位を使うようにしましょう。

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際に書いてみよう

<p>我輩は猫である。名前はまだない。</p>
<p class="ls-02">我輩は猫である。名前はまだない。</p>

.ls-02{
  letter-spacing: 0.2em;
}

 

この記事を監修してくれた方

和田 祥子(わださちこ)
フリーランスのWebデザイナー7年目です。Ruby勉強中。

テニスと音楽とビールが好きです。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

オンラインのプログラミングスクールTechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間で習得することが可能です。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。