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

1. CSSの文字装飾の基本

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

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

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

{ font-size: ◯◯px or ◯◯em }

値は数字+単位で書きます。単位は以下の2つを覚えておけば良いでしょう。

フォントサイズの変更例

実際に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.文字色を変える

{ color: 色名 or カラーコード }

次に文字を自分の好きな色に変えてみましょう。さきほども何回か触れましたが、文字色を変えるときにはcolorプロパティを使います。値には色名もしくはカラーコードを書きます。

カラーコードは覚えようとはせずにカラーコード表を見て使いたい色のコードをコピペしましょう。

文字色の変更例

<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.太字にする

{font-weight: bold}

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

太さの変更例

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

p {
  font-weight: bold;
}

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

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

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

【CSS】font-weightで文字の太さを変える方法：効かないときは？

1-4. 斜体にする

{ font-style: italic }

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

斜体にする例

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

p {
  font-style: italic;
}

1-5.行間を変える

{ line-height: 値 }

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

値の指定方法にはいくつかありますが、最もオススメなのはpxなどの単位をつけずに数値だけで指定する方法です。line-height: 1.5のような具合です。数値だけで指定すると、文字の高さを1として、フォントサイズに応じて行高を計算してくれるものです。たとえば、line-height: 1.5とすれば、文字の高さの1.5倍の行高になります。

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

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

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

{ letter-spacing: ◯◯em }

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

letter-spacingの値の指定にも何パターンかありますが、おすすめは「em」という単位で指定することです。emでは文字の高さに対する比率で字間を指定します。1emだと文字の高さと同じだけの字間になります。0.1emだと「文字の高さの1/10の大きさ」の字間ができるということになります。

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

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

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

参考

HTML&CSSの行間/字間の詳しい解説は以下の記事で読むことができます。

【CSS】line-heightで行間を調整する方法：おすすめの値は？

【CSS】letter-spacingで字間を調整する方法まとめ

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

{ text-decoration: underline }

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

text-decorationで下線を引く例

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

p {
  text-decoration: underline;
}

ただし、この方法では下線の色と太さを変えることはできません（下線の色＝文字色になります）。

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

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

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

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

【CSS】文字に色々なデザインの下線を引く（点線・波線・二重線・蛍光ペン風など）

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

{ text-decoration: line-through }

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

取り消し線の例

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

p {
  text-decoration: line-through;
}

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

{ border: solid 線の太さ 色 }

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

border:の後には、3つの値を同時に指定します。

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

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

上図の場合だと、実線（solid）で太さは1px、色は黒（black）という指定になります。

文字を実線で囲む例

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

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

p {
  border: solid 2px skyblue;
}

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

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

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

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

CSSのmarginとは？paddingとは？余白の指定方法まとめ

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

点線 { border: dotted 線の太さ 色 } 破線 {border: dashed 線の太さ 色}

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 {
  /*両方ともpadding10pxに*/
  padding: 10px;
}

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

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

{ border-top: solid 線の太さ 色; border-bottom: solid 線の太さ 色 }

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
	/*両方ともpadding10pxに*/}

↑記事の見出しなんかで使えそうですね。上のコードでは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. フォント種類の変更

{ font-family: フォント名; }

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

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

font-familyの書き方まとめ：CSSでフォント種類を指定しよう

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

{ text-align: center or right }

文字は初期設定では、左寄せで表示されます。これを中央寄せや右寄せにすることもできます。「文字をどちらに寄せるか」は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. 文字を縦書きにする

{ 　　-webkit-writing-mode:vertical-rl; 　　-ms-writing-mode: tb-rl; 　　writing-mode: vertical-rl}

文字を縦書きにすることもできます。最新のCSS規格であるCSS3から対応したものなので、ふるーいブラウザでは対応していない可能性があります。なお、縦書きにする場合は、レイアウトが崩れないようにするために幅と高さ（widthとheight）を指定しておくことをおすすめします。

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

p {	
  /*以下縦書きの設定*/
  -webkit-writing-mode:vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  /*幅と高さを指定*/
  width: 100%;
  height: 150px;
}

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

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

{ text-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=”下線のCSSコード”>下線を引きたい文字</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を書く場所については以下の記事でイチから解説しています。ぜひ目を通してみてください。

CSSはどこに書く？外部CSSファイルの読み込み方＆インラインでの書き方

5. この記事のまとめ