【CSS】文字装飾の基本を総まとめ！初心者向けに解説

今回は、文字まわりの設定を解説します。サイズや色変更などの基本的な内容からオシャレな装飾まで幅広く取り上げていきます。すでに知っている内容は、サクッと読み飛ばして頂ければと思います。

1. CSSの文字装飾の基本

まずは必ず覚えておきたい基本的な設定や装飾方法を解説していきます。

1-1.フォントサイズの変更

文字のサイズは、font-sizeプロパティで指定します。

p {
  font-size: 1.5em;
}

font-sizeはpx、em、remなどで指定できます。ここではpxとemを比べます。remはルート要素のフォントサイズを基準にでき、サイト全体で大きさを揃えたいときに便利です。

フォントサイズの変更例

実際にpタグ内の文字のサイズを変えてみましょう。pxで指定する場合と、emで指定する場合の両方を試してみます。

<p>初期設定のフォントサイズ</p>
<p class="px">15pxにした場合</p>
<p class="em">1.5emにした場合</p>

.px {
  font-size: 15px;
}
.em {
  font-size: 1.5em;
}

1-2.文字色を変える

p {
  color: #f89174;
}

次に文字色を変えてみましょう。colorにはgreenのような色名、#f89174のような16進数のほか、rgb()なども指定できます。

色の値は暗記せず、CSSで使える色の一覧やカラーピッカーで調べて使いましょう。

文字色の変更例

<p>通常の場合</p>
<p id="example1">greenの場合</p>
<p id="example2">#FFC778の場合</p>
<p id="example3">#f89174の場合</p>

#example1 {
  color: green;
}
#example2 {
  color: #FFC778;
}
#example3 {
  color: #f89174;
}

1-3.太字にする

p {
  font-weight: bold;
}

次に文字を太字にしてみましょう。太字にするときにはfont-weightプロパティでboldを指定します。よく使うので覚えておきたいですね。

太さの変更例

<p>これは例文です</p>

p {
  font-weight: bold;
}

文章の一部分だけを太字にする方法は後で紹介します。

【参考】文字を細くする方法は？

ちなみに文字を細くする方法、こまかな太さ調整をする方法は以下の記事で紹介しています。興味のある方は是非読んでみてください。

1-4. 斜体にする

p {
  font-style: italic;
}

文字を斜体にするときにはfont-styleプロパティでitalicを指定します。引用文などで使われることが多いですね。

斜体にする例

<p>これは例文です</p>

p {
  font-style: italic;
}

1-5.行間を変える

p {
  line-height: 1.5;
}

行間はline-heightプロパティにより指定します。

この図のようにline-heightで決めるのは行の高さです。line-height自体は行間というより行高を指定するものなのですね。

値の指定方法はいくつかありますが、ここでは単位を付けない数値を使います。たとえばline-height: 1.5は、フォントサイズの1.5倍の行の高さになります。子要素にも倍率として継承されるため、文章の基本設定に使いやすい指定です。

▼ line-height: 1の場合 サルワカでは知っておきたい「暮らしの雑学」や「インターネットの知識」「ウェブデザインの知識」を分かりやすく解説していきます。 ▼ line-height: 1.5の場合 サルワカでは知っておきたい「暮らしの雑学」や「インターネットの知識」「ウェブデザインの知識」を分かりやすく解説していきます。 ▼ line-height: 2の場合 サルワカでは知っておきたい「暮らしの雑学」や「インターネットの知識」「ウェブデザインの知識」を分かりやすく解説していきます。

おすすめはline-height: 1.5〜2

値を1.5〜2.0の間にすると、読みやすい行間になります。この範囲で自分の好みの行間に設定すると良いでしょう。

1-6.文字の間隔を変える

p {
  letter-spacing: 0.05em;
}

文字どうしの間隔（字間）はletter-spacingというプロパティにより設定します。

letter-spacingプロパティでは文字と文字の間のスペースを指定します。

字間にはemを使うと、文字サイズに合わせた調整ができます。0.1emはその要素のフォントサイズの10％に相当する長さです。文字の実際の高さを測る単位ではありません。

▼ letter-spacing: 0.05em場合 サルワカでは知っておきたい「暮らしの雑学」や「インターネットの知識」「ウェブデザインの知識」を分かりやすく解説していきます。 ▼ letter-spacing: 0.1em場合 サルワカでは知っておきたい「暮らしの雑学」や「インターネットの知識」「ウェブデザインの知識」を分かりやすく解説していきます。 ▼ letter-spacing: 0.2em場合 サルワカでは知っておきたい「暮らしの雑学」や「インターネットの知識」「ウェブデザインの知識」を分かりやすく解説していきます。

↑0.2emだと少し広々としすぎている感じがありますね。

おすすめは「指定しない」もしく「0.05〜0.1em」

初期値であっても十分に読みやすい字間なので、こだわりが無ければ何も指定しなくても良いでしょう。指定する場合も、0.05〜0.1emくらいにして抑えておくことをおすすめします。

1-7. 文字に下線を引く

p {
  text-decoration: underline;
}

文字に下線を引く方法はたくさんあります。text-decoration: underlineを使うとシンプルで“ぶなん”な下線を引くことができます。

text-decorationで下線を引く例

<p>これは例文です</p>

p {
  text-decoration: underline;
}

text-decoration: underlineだけなら文字色に近い通常の下線になります。色はtext-decoration-color、太さはtext-decoration-thickness、線種はtext-decoration-styleでも変更できます。

【参考】色々なデザインの下線を引く方法

カラフルな下線や、点線や波線の下線を引きたいこともあるかと思います。CSSの指定により以下のような下線を引くこともできます。

• 点線の下線を引く
• 破線の下線を引く
• 波線の下線を引く
• 蛍光ペン風にする

これらの少し変わったデザインの下線をひく方法は、以下の記事でていねいにまとめています。興味のある方は目を通してみてください。

1-8. 取り消し線を引く

p {
  text-decoration: line-through;
}

text-decorationプロパティにより取り消し線（打ち消し線）も簡単に引くことができます。

取り消し線の例

<p>これは例文です</p>

p {
  text-decoration: line-through;
}

1-9. 文字を実線の枠で囲む

p {
  border: solid 2px skyblue;
}

borderプロパティを指定すると、要素全体が線で囲まれます。例えばpタグに指定すれば、段落要素全体が線で囲まれます。

borderには線種・太さ・色をまとめて指定できます。この例では3つとも書きますが、すべて必須ではありません。線を表示するにはsolidなどの線種を指定します。

• 線の種類
• 線の太さ
• 線の色

この3つを間に半角スペースを空けて並べます。書く順番は自由です。

上図はsolidの実線、太さ1px、黒色を指定した例です。

文字を実線で囲む例

例として、段落を太さ2pxの水色（skyblue）の線で囲ってみましょう。

<p>これは例文です</p>

p {
  border: solid 2px skyblue;
}

少し文字と線との間が窮屈になってしまいました。そこで、padding（要素内の余白を指定するプロパティ）を10px指定してみます。

<p>これは例文です</p>

p {
  border: solid 2px skyblue;
  padding: 10px;
}

スペースができてより自然になりました。「paddingって何？」という方は以下の記事が参考になるはずです。

1-10. 文字を点線・破線の枠で囲む

.dotted { border: dotted 2px skyblue; }
.dashed { border: dashed 2px skyblue; }

borderプロパティの線の種類でsolidを指定すると実線になりますが、これをdottedにすると点線、dashedにすると破線になります。

点線と破線の枠でかこむ例

<p class="dotted_line">これは点線です</p>
<p class="dashed_line">これは破線です</p>

.dotted_line {
  border: dotted 2px skyblue;
}
.dashed_line {
  border: dashed 2px skyblue;
}
p {
  /* 両方とも内側に余白を設けます */
  padding: 10px;
}

↑点線や破線で囲めば、よりオシャレに見えますね

1-11. 文字の上下に線を引く

p {
  border-top: solid 1px gray;
  border-bottom: solid 1px gray;
}

borderは以下のように上下左右のどこかだけに指定することもできます。

値の書き方はさきほどのborder:線の種類 太さ 色と変わりません。これらを組み合わせることで、文字の上下にだけ線を引くことができます。

文字の上下に線を引く例

<p class="solid_line">これは例文です</p>
<p class="dashed_line">破線にした場合</p>

.solid_line {
  /*上と下にグレイの1pxの線を引きます*/
  border-top: solid 1px gray;
  border-bottom: solid 1px gray;
}
.dashed_line {
  /*上と下に水色の1pxの破線を引きます*/
  border-top: dashed 1px skyblue;
  border-bottom: dashed 1px skyblue;
}
p {
  /* 両方とも内側に余白を設けます */
  padding: 10px;
}

↑記事の見出しなんかで使えそうですね。上のコードではpタグに対して線を指定していますが、そのままh1やh2などの見出しタグに入れ替えて使うこともできます。

1-12. 文字の左と下に線を引く

さきほどと同じ要領で、文字の左と下にだけ実線を引いてみましょう。左はborder-left、下はborder-bottomですね。

文字の左に線を引く例

左側の線はオレンジ色で太めに、下側の線はグレイで細めにします。

<p>これは例文です</p>

p {
  border-left: solid 5px orange;
  border-bottom: solid 1px gray;
  /* 内側に余白を設けます */
  padding: 10px;
}

ブログやWebメディアでよく見かける見出しらしくなりましたね。

1-13. フォント種類の変更

p {
  font-family: Impact, sans-serif;
}

フォント種類を変えるときはfont-familyプロパティを使います。

この図ではImpactを優先し、使えない環境ではsans-serifに切り替わります。表示結果は端末にインストールされたフォントによって異なります。

フォント種類の指定は奥が深いので次の記事でくわしく解説します。

2. 文字の位置を変える（中央・右寄せ）

p {
  text-align: center;
}

文字は初期設定では、左寄せで表示されます。これを中央寄せや右寄せにすることもできます。「文字をどちらに寄せるか」はtext-alignプロパティで指定します。値は以下の3つをよく使います。

text-align: justifyで両端揃えもできます。日本語では文字間隔や改行の見え方が変わるため、実際の文章と画面幅で確かめながら使いましょう。

文字寄せの変更例

実際にCSSを書いてみましょう。

<p>CSS指定なしの文</p>
<p class="center">中央寄せの文</p>
<p class="right">右寄せの文</p>

.center {
  text-align: center;
}
.right {
  text-align: right;
}

3. CSSの文字設定や装飾【応用編】

ここからはユニークな文字の設定と装飾を少しだけ紹介します。あまり使う機会はないかもしれませんが「こんなものもあるんだな」程度に頭に入れておきましょう。

3-1. 文字を縦書きにする

p {
  writing-mode: vertical-rl;
  inline-size: 150px;
}

writing-mode: vertical-rlで縦書きにできます。ここでは縦方向の長さをinline-sizeで指定し、見本の表示領域を確保します。

<p>これは例文です。Exampleですよ。例文なのです。例文なのですよ。</p>

p {
  writing-mode: vertical-rl;
  inline-size: 150px;
}

このように文章を縦書きにすることもできます。和な雰囲気を出したいときに使えるかもしれませんね。

3-2. 文字に影をつける

.shadow {
  text-shadow: 1px 1px 2px silver;
}

text-shadowで文字に影を付けられます。横方向と縦方向のずれは必要で、ぼかし量と色は省略できます。下の例では4つとも指定します。

1. 影の右への長さ（px）
2. 影の下への長さ（px）
3. 影のぼけ具合（px）
4. 影の色

文字が見にくくならないよう、それぞれの値は小さめにしましょう。また、影の色はgrayかsilverあたりにすると自然な影らしくなります。

文字に影をつける例

<p class="shadow">これは例文です</p>

.shadow {
  text-shadow: 1px 1px 2px silver;
  /*文字を太字にするとよりそれらしくなります*/
  font-weight: bold;
}

文字に影をつけると立体感が出ますね。

4. 一部の文字だけ設定を変える方法

ここまで紹介してきた例ではpタグを指定して色や大きさなどの設定変更をしてきました。一方で「pタグの文章内の一部の文字だけ設定を変えたい」ということもあると思います。そんなときは以下の2つのどちらかの方法を取りましょう。

1つずつ解説していきます。

方法1: 文字をspanで挟みタグ内に設定内容を書く

<span style="font-weight: bold;">例文</span>

簡単な方法はこれです。設定を変えたい文字をspanタグではさみ、その中のstyle属性（style=""）に文字の設定内容を書きます。 例として、文章の一部を太字にしてみましょう。

<p>これは<span style="font-weight: bold;">例文</span>です。</p>

↑「例文」だけを太字にすることができました。簡単な方法ではありますが、複数の箇所に同じ設定をしたいときでも、１つ１つstyle属性内に設定内容を書かなければならずやや面倒です。また、後からデザインをまとめて変更したくなったときにも、１つ１つstyle属性を書き直す必要があります。

方法2：文字をclass名のついたspanタグではさむ⇒CSSで設定を書く

文章中の設定を変えたい部分をspanタグではさみ、class名をつけておきます。そしてCSSでそのclassに対しての設定内容を書きます。 例を見てみましょう。

<p>これは<span class="bold">例文</span>です。</p>

.bold {
  font-weight: bold;
}

↑class名を"bold"としましたが、自分の好きな名前をつければOKです。CSSではclass名は「.◯◯」というようにドット（.）を前につけて指定するんでしたね。詳しくは「CSSの書き方」を読んでみてください。この方法ではあれば、同じclass名（＝同じ設定内容）を使いまわすことができ、指定するのが楽です。また、後からまとめて設定変更したいときにもCSSをいじるだけで済みます。

ちなみにCSSを書く場所については以下の記事でイチから解説しています。ぜひ目を通してみてください。

5. この記事のまとめ