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

文字の基本(強調・装飾など)

記事内に商品プロモーションが含まれる場合があります

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

前提知識

HTMLとCSSの基本の「き」はおさえておきましょう。

1. CSSの文字装飾の基本

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

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

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

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

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

font-sizeに対する値の単位

  • px:縦のピクセルの大きさで指定ウェブページのメインの文章は15px〜18pxくらいにするのがおすすめです。
  • em:現在のフォントサイズに対する倍率たとえば、現在の設定が10pxのときに「2.0em」とするとフォントサイズは20pxになります。

フォントサイズの変更例

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

HTMLコード
<p>初期設定のフォントサイズ</p>
<p class="px">15pxにした場合</p>
<p class="em">1.5emにした場合</p>
CSSコード
.px {
  font-size: 15px;
}
.em {
  font-size: 1.5em;
}
ブラウザ表示

初期設定のフォントサイズ

15pxにした場合

1.5emにした場合

1-2.文字色を変える

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

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

colorに対する値の書き方

  • 色名:英語の色名を書く青ならblue、緑ならgreen、黒ならblackという感じです。
  • カラーコード:#+6ケタの英数字で書く膨大な下図の色から選ぶことができ、色ごとにコードが決まっています。例えば白なら#FFFFFFになります。

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

文字色の変更例

HTMLコード
<p>通常の場合</p>
<p id="example1">greenの場合</p>
<p id="example2">#FFC778の場合</p>
<p id="example3">#f89174の場合</p>
CSSコード
#example1 {
  color: green;
}
#example2 {
  color: #FFC778;
}
#example3 {
  color: #f89174;
}
ブラウザ表示

通常の文字

greenの場合

#FFC778の場合

#f89174の場合


1-3.太字にする

{font-weight: bold}

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

太さの変更例

HTMLコード
<p>これは例文です</p>
CSSコード
p {
  font-weight: bold;
}
ブラウザ表示

これは例文です


↑太字になりました。

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

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

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

1-4. 斜体にする

{ font-style: italic }

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

斜体にする例

HTMLコード
<p>これは例文です</p>
CSSコード
p {
  font-style: italic;
}
ブラウザ表示

これは例文です


↑斜体になりました。

1-5.行間を変える

{ line-height: 値 }

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

line-heightとは

この図のように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

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

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

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

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

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

参考

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

{ text-decoration: underline }

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

text-decorationで下線を引く例

HTMLコード
<p>これは例文です</p>
CSSコード
p {
  text-decoration: underline;
}
ブラウザ表示

これは例文です


↑下線が引かれました。

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

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

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

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

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

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

{ text-decoration: line-through }

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

取り消し線の例

HTMLコード
<p>これは例文です</p>
CSSコード
p {
  text-decoration: line-through;
}
ブラウザ表示

これは例文です


↑取り消し線が引かれました。

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

{ border: solid 線の太さ 色 }

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

borderプロパティの書き方

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

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

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

文字を実線で囲む例

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

HTMLコード
<p>これは例文です</p>
CSSコード
p {
  border: solid 2px skyblue;
}
ブラウザ表示

これは例文です


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

HTMLコード
<p>これは例文です</p>
CSSコード
p {
  border: solid 2px skyblue;
  padding: 10px;
}
ブラウザ表示

これは例文です


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

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

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

線の種類

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

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

HTMLコード
<p class="dotted_line">これは点線です</p>
<p class="dashed_line">これは破線です</p>
CSSコード
.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-top:〜
  • 下にだけ線を引く:border-bottom:〜
  • 左にだけ線を引く:border-left:〜
  • 右にだけ線を引く:border-right:〜

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

文字の上下に線を引く例

HTMLコード
<p class="solid_line">これは例文です</p>
<p class="dashed_line">破線にした場合</p>
CSSコード
.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ですね。

文字の左に線を引く例

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

HTMLコード
<p>これは例文です</p>
CSSコード
p {
  border-left :solid 5px orange;
  border-bottom: solid 1px gray;
  /*余白をつけておきます*/
  padding: 10px;
}
ブラウザ表示

これは例文です


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

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

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

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

フォントファミリーの意味

たとえばこの図のようにp{font-family:'Impact',sans-serif;}と書けば、pタグ内の文字がImpactというフォントになります。

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

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

{ text-align: center or right }

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

text-alignに対する値

  • left:左寄せ ←初期値
  • center:中央寄せ
  • right:右寄せ

text-align: justifyという均等配置の値もあるのですが、現状では使い勝手があまりよくありません。

文字寄せの変更例

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

HTMLコード
<p>CSS指定なしの文</p>
<p class="center">中央寄せの文</p>
<p class="right">右寄せの文</p>
CSSコード
.center {
  text-align: center;
}
.right {
  text-align: right;
}
ブラウザ表示

CSS指定なし

中央寄せ

右寄せ


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

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

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

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

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

HTMLコード
<p>これは例文です。Exampleですよ。例文なのです。例文なのですよ。</p>
CSSコード
p {	
  /*以下縦書きの設定*/
  -webkit-writing-mode:vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  /*幅と高さを指定*/
  width: 100%;
  height: 150px;
}
ブラウザ表示

これは例文です。Exampleですよ。例文なのです。例文なのですよ。


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

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

{ text-shadow: 影の右への長さ 影の下への長さ 影のぼけ具合 影の色 } 例)text-shadow: 1px 1px 2px silver

text-shadowプロパティにより文字に影をつけることができます。少し分かりづらいのですが、値には以下の4つの項目を半角スペース区切りで順番に書いていきます。

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

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

文字に影をつける例

HTMLコード
<p class="shadow">これは例文です</p>
CSSコード
.shadow {
  text-shadow: 1px 1px 2px silver;
  /*文字を太字にするとよりそれらしくなります*/
  font-weight: bold;
}
ブラウザ表示

これは例文です


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

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

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

  1. 文字を<span style=””>~</span>ではさみ、style=” “内に設定内容を書く
  2. 文字をclass名を指定したspanタグではさみ、CSSでそのclassに対して設定内容を書く

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

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

<span style=”下線のCSSコード”>下線を引きたい文字</span>

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

<p>これは<span style="font-weight:bold">例文</span>です。</p>
ブラウザ表示

これは例文です。


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

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

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

HTMLコード
<p>これは<span class="bold">例文</span>です。</p>
CSSコード
.bold {
  font-weight:bold;
}
ブラウザ表示

これは例文です。


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

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

5. この記事のまとめ

まとめ
  • フォントサイズの変更⇒ font-size: ◯◯px(em)
  • 文字色の変更⇒ color: 色名orカラーコード
  • 文字を太くする⇒ font-weight: bold
  • 文字を斜体に⇒ font-style: italic
  • 行間を変える⇒ line-height: 値(1.5〜2がおすすめ)
  • 字間を変える⇒ letter-spacing: ◯◯em(〜0.1emがおすすめ)
  • 文字に単純な下線を引く⇒ text-decoration: underline
  • 取り消し線を引く⇒ text-decoration: line-through
  • 実線の枠で囲む⇒ border: solid 太さ 色
  • 点線の枠で囲む⇒ border: dashed 太さ 色
  • 文字の上下に線を引く⇒border-topとborder-bottomを指定
  • 一部の文字だけ設定を変える方法1. spanタグではさみタグのstyle属性内に設定内容を書く2. class名付きのspanタグではさみ、CSSファイルにそのclassに対する設定内容を書く
  • 中央・右寄せ⇒ text-align: center or right
  • 文字に影をつける⇒ text-shadow

サルワカ