cssの文字・テキストの装飾の基本を総ざらい！サンプル付き解説

この記事ではCSSを使って、文字・テキストを装飾する方法について分かりやすく解説しています。

くま

文字の装飾は覚えておいた方がいいのか？

ラムネ

そうだね！文字の装飾はCSSの基本で、とてもよく使われるから覚えておくと便利だよ

文字を装飾するプロパティはたくさん用意されていますが、どれもよく使われるので覚えておくと便利です。この記事では、それら一つ一つについて解説していきます。

この記事を読むことで下記のようなことが理解できると思います。

• CSSの文字装飾方法が一通り理解できる
• 自分で文字・テキストの装飾ができるようになる

この記事のゴール

この記事のゴールは、下記のような文字の装飾が、自分の力でできるようになることです。

<p>これはbeforeですれはbeforeですれはbeforeですれはbeforeですれはbeforeです</p>
<p class="demo246_1">これはafterですこれはafterですこれはafterですこれはafterですこれはafterです</p>

 .demo246_1{
   font-size: 1.8rem;
   font-family:sans-serif;
   color: tomato;
   font-weight: bold;
   font-style: italic;
   text-decoration: underline;
   text-shadow: 2px 2px 6px #ababab;
   border: 3px solid tomato;
   line-height: 1.5;
   text-align: center;
   padding: 10px 0;
 }

文字を装飾するプロパティ一覧

文字を装飾するプロパティには下記のようなものがあります。

• 字の大きさを変更する　→　font-size
• 文章の書体を変える　→　font-famiy
• 文字色を指定する　→　color
• 文字の太さを変える　→　font-weight
• 文字を斜めに傾ける　→　font-style
• 下線を引く　→　text-decoration
• 線で囲う　→　border
• 文字に影をつける　→　text-shadowプロパティ
• 行間を調整する　→　line-height
• 文字間を調整する　→　letter-spacing
• 文字の揃える位置を変える　→　text-align

くま

すごい数だな…覚えられるか不安になるよ

ラムネ

たくさんあるように感じるけど、使っているとあっという間に覚えるから安心してね！

文字サイズの変更

文字の大きさを変更するには、font-sizeプロパティを使います。

font-size:文字の大きさ;

「文字の大きさ」は「数値　＋　単位」という形で記述します。単位にはいくつか種類がありますが主に以下の２種類を使います。

ラムネ

remは少し難しいし使う機会も少ないから、最初のうちはpxだけでも覚えておこう！

実践

文字サイズを実際に変更してみましょう！

<span class='demo_15-1'>これテスト文章です</span>
<br>
<span class='demo_15-2'>これテスト文章です</span>
<br>

.demo_15-1{
    font-size:26px;
}
.demo_15-2{
    font-size:2.0rem;
}

pxとremを使って指定しました。「26px」を指定した方は、指定された26px相当に大きくなっています。

「2.0rem」を指定した方は、このサイトのhtmlのフォントサイズが10pxに設定されているため、その2倍の20px相当の大きさになっています。

ラムネ

本文のフォントサイズは16px〜18pxあたりを使っているサイトが多いよ

より実践的な文字サイズの変更については下記の記事で解説しているので参考にしてみてください。

参考記事

文字サイズを変更する方法。CSSのfont-sizeを詳しく図解

この記事では文字サイズ(フォントサイズともいいます)を変更するためのfont-sizeプロパティについて解説します。 この解説のゴールは以下を目指しています。 文字サイズについての基礎知識を習得できる 自力で文字サイズ変 ...

フォントを変更する

フォントを変えるには、font-famiyプロパティを使います。以下のように指定します。

font-family: フォント名;

「フォント名」には、フォントの名前を指定します。フォント名にスペースが付く場合や日本語のフォント名の場合は、ダブルクォーテーション(” “)、もしくはシングルクォーテーション(‘ ‘)で囲みます。

font-famiyのルール

font-famiyを指定するにはいくつか重要なルールがあるので押さえておきましょう。

「総称フォントファミリー」には下記のようなものがあります。

• serif　→　明朝体
• sans-serif　→　ゴシック体

実践

フォントを指定してみましょう。

<p class='demo_16'>これテスト文章です</p>

.demo_16{
   font-family: 'Noto Sans JP', sans-serif;
}

このようにすることでフォントを「Noto Sans JP」に変更することが出来ます。Noto Sans JPがない場合は総称フォントファミリーで「sans-serif」が指定されているので、その環境にあるゴシック体が表示されます。

ラムネ

Noto Sans JPというフォントは、Google とAdobeという会社が共同開発した無料で使える綺麗なフォントだよ

より実践的なフォントの指定方法については下記の記事で解説しているので参考にしてみてください。

参考記事

フォントを指定する方法！CSSのfont-familyの使い方

この記事ではフォントの変更方法について解説します。 この解説のゴールは以下を目指しています。 フォントの変更方法を理解できる 自分のサイトのフォントを指定することができる フォントを指定する方法 フォントを指定するには、 ...

文字の色を変える

文字色を指定するにはcolorプロパティを使います。

color: 色;

「色」の部分にはカラーネームや、カラーコードを指定します。

色については、文字色の解説のところで詳しく解説しているので、さらに知りたい方は参考にしてください。

参考記事

CSSで文字色を変更する方法！colorの使い方をサンプルで解説

この記事では、文字の色の変更方法を解説します。 文字色はサイトの読みやすさや、イメージを左右する大切な要因の一つです。一色だけのサイトより適度に色分けされていた方が読みやすくなります。 この解説のゴールは以下を目指してい ...

実践

実際に文字の色を変えてみましょう！カラーコードで指定するパターンとカラーネームで指定するパターンを記述してみます。

<p class='demo_17'>これテスト文章です</p>
<p class='demo_17-2'>これテスト文章です</p>

.demo_17{
    color:red;
 }
.demo_17-2{
    color:#4689FF;
 }

それぞれ指定した文字の色に変わりました。

ラムネ

カラーネームだとどんなに色なるか分かりやすいけど、名前のついている色は限られているからどうしても選択肢が少なくるんだ！実践ではカラーコードで色を指定することが一般的だよ。

より実践的な文字の色の指定方法については下記の記事で解説しているので参考にしてみてください。

参考記事

CSSで文字色を変更する方法！colorの使い方をサンプルで解説

この記事では、文字の色の変更方法を解説します。 文字色はサイトの読みやすさや、イメージを左右する大切な要因の一つです。一色だけのサイトより適度に色分けされていた方が読みやすくなります。 この解説のゴールは以下を目指してい ...

太字にする

文字の太さを変えるには、font-weightプロパティを使います。

font-weight:値;

値は数値で指定する方法と、キーワードで指定する方法があります。

実践

数値での指定とキーワードでの指定があると書きましたが、実際はキーワードで指定する場合がほとんどです。数値での指定方法は初心者向けでは解説は省き、キーワードでの指定方法を紹介します。

<p class='demo_18'>これテスト文章です<span class='demo_18-2'>ここは子要素の中身です</span>これテスト文章です</p>

.demo_18{
    font-weight:bold;
 }
.demo_18-2{
    font-weight:normal;
 }

まず、pタグのクラスにboldを指定して要素を太字にしています。その後、子要素のspanのクラスにnormalを指定し、span要素だけ太さを標準に戻しています。

ラムネ

太字を指定すると、その子要素も太字になるんだ！

より実践的な文字の太さを変える方法については下記の記事で解説しているので参考にしてみてください。

参考記事

CSSの太字について！font-weightで文字の太さを変える

この記事では文字の太さを変更する方法について解説します。 この解説のゴールは以下です。 文字の太さを変えられるようになる 太字の効果と注意点 太字を使うことで、文章にメリハリがつき何が言いたいのかがわかりやすくなる為、ユ ...

文字の傾きを変える

文字を斜めに傾けるにはfont-styleプロパティを使います。

font-style:値;

値はキーワードで指定します。いくつか種類がありますが、以下の2種類を覚えておけば良いでしょう。

実践

実際に文字を傾けてみましょう！

<p class='demo_19'>これテスト文章です<span class='demo_19-2'>ここは子要素の中身です</span>これテスト文章です</p>

.demo_19{
    font-style:italic;
 }
.demo_19-2{
    font-style:normal;
 }

pにはitalicを指定しているため全体的に斜体になっていますね。spanにはnormalを指定しているため、そこだけ標準に戻っているのがわかると思います。

ラムネ

斜め文字は、タイトルの装飾や引用部分で使われることが多いよ

より実践的な文字の傾け方法については下記の記事で解説しているので参考にしてみてください。

参考記事

文字を斜体にする方法を図解！CSSのfont-styleを使おう

この記事では、文字を斜体に変更する方法について解説します。 この解説のゴールは以下を目指しています。 文字を斜体にできるようになる 斜体についてのトラブルを解決できるようになる 斜体とは 斜体とは右に傾いたフォントのこと ...

下線を引く

下線を引きたい場合はtext-decorationプロパティを使います。

text-decoration: 線の種類;

線の種類にはいくつか種類がありますが、よく使われるのは「underline」一つだけです。線の種類に「underline」を指定することで文字に下線が引かれます。

実践

下線を引いてみましょう！

<p>これテスト文章です<span class='demo_20'>ここは子要素の中身です/span>これテスト文章です</p>

.demo_20{
    text-decoration: underline;
 }

ラムネ

文字の下線は主にリンクの装飾などで使われるよ！下線があるとリンクって思われるから変なところでは使わない方がいいよ！

より実践的な下線の指定方法については下記の記事で解説しているので参考にしてみてください。

参考記事

CSSで文字に下線を引く方法！コピペできるサンプル付きで紹介

この記事では、CSSで文字に下線をつける方法について解説します。 下線が引かれている部分は自然と視線が誘導され目立つので、文書を目立たせたることができます。また、下線があって文字の色が青系だとリンクであることを伝える事が ...

文字を線で囲う

線で囲うにはborderプロパティを使います。

border: 線の太さ 色 種類;

borderには「線の太さ」・「色」・「 種類」の3つの値を指定します。それぞれの値を半角スペースで区切って指定していきます。指定する順番に決まりはりません。

borderの種類には下記のようなものがあるので、お好みの物を指定します。

• none… 初期値です。ボーダーは表示さません。
• solid… 1本線で表示されます。
• double… 2本線で表示されます。
• dotted… 点線で表示されます。

太さについては「2px」のように基本的には数値で指定します。また、色については1、カラーコードやカラーネームで指定します。

実践

実際に文字を線で囲ってみましょう！

<p class='demo_21'>これテスト文章です</p>
<p class='demo_21-2'>これテスト文章です</p>
<p class='demo_21-3'>これテスト文章です</p>
<p class='demo_21-4'>これテスト文章です</p>

.demo_21{
    border: solid 3px orange;
    padding:8px
 }

.demo_21-2{
    border: double 5px red;
    padding:8px
 }

.demo_21-3{
    border: dashed 1px green;
    padding:8px
 }

.demo_21-4{
    border: dotted 2px #9736E4;
    padding:8px
 }

.demo_21,.demo_21-2,.demo_21-3,.demo_21-4{
    margin-bottom:8px!important;
}

この例では、1本線で5pxの太さの赤線を指定しました。文字が枠線で囲まれているのが分かります。線の種類や色や太さを調整すればいろんな表現ができるのでいろいろ試してみてください。

ラムネ

文字の枠線は見出しの装飾とかでよく使われるよ

より実践的な枠線の指定方法については下記の記事で解説しているので参考にしてみてください。

参考記事

CSSで思い通りの枠線を引く方法！border(ボーダー)を使いこなそう

この記事では CSSで枠線を引くことができるborder(ボーダー)プロパティについて解説します。 この記事を読むことで、下記のポイントについて理解できると思います。 枠線の設定方法が理解できる 自分の力で枠線がつけられ ...

文字に影をつける

文字に影をつけるには、text-shadowプロパティを使います。

text-shadow: 水平方向の距離 垂直方向の距離 ぼかしの変形 影の色;

影の形を指定するには下記の3つを指定する必要があります。

• 影の位置(水平方向と垂直方向)
• 影のボカシ具合
• 影の色

影のぼかし具合は多くなればなるほど、影が大きく薄くなっていきます。いろいろ試してみると感覚が掴めるので、実際に書いて試してみましょう。

実践

テキストに影をつけてみましょう。

<p class='demo_22'>これテスト文章です</p>
<p class='demo_22-2'>これテスト文章です</p>

.demo_22{
    font-size: 3rem;
 }

.demo_22-2{
    text-shadow: 2px 2px 4px #ababab;
    font-size: 3rem;
 }

上段が影なしのテキストで、下段が影有りです。ちょっとした影をつけるだけで、結構雰囲気が変わるのがわかりますね。

ラムネ

テキストに影をつけるのは一時期流行ったけど、最近ではあまり使われなくなってきたかな。使いすぎるとダサいサイトと思われるので控えめに使う程度がおすすめだよ！

行間を変える

行間を調整するには、line-heightプロパティを使います。

ラムネ

行間とは、行と行の間の幅のことだよ。行間が大きくなれば行と行の間が開いていくよ

line-height: 値;

値には「数値　＋　単位」という形で指定します。単位は省略することもできます。

基本的は単位なしで使用することが多いです。

実践

実際に行間を変えてみましょう。

<p class='demo_23'>これテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章です</p>

<p class='demo_23-1'>これテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章です</p>

<p class='demo_23-2'>これテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章です</p>

.demo_23{
   line-height: 1;
   color:red;
 }

.demo_23-1{
    line-height: 1.5;
    color:green;
 }

demo_23-2{
    line-height: 2.5;
    color:blue;
 }

いろんな行間を単位なしで設定してみました。

行間1のものは狭すぎて読みづらく感じますが、行間を2.5に設定したものは今度は行間が広すぎて読みづらいと感じてしまいます。

狭すぎても読みづらいし、広すぎても読みづらいので文字の1.5倍から1.8倍くらいに設定しておくのが良いでしょう。

ラムネ

狭すぎる行間は思っている以上に読みづらいから気をつけよう！せっかくいいことを書いていても、行間が詰まりすぎて読まれないということがよくあるからもったいないよ！

より実践的な行間の指定方法については下記の記事で解説しているので参考にしてみてください。

参考記事

htmlの行間を変える方法！cssのline-heightを解説

この記事では、htmlの行間を変更する、line-heightの使い方について解説します。 この解説のゴールは以下です。 行間の調整の方法が理解できる 行間の最適な値が理解できる line-heightは行の高さの設定 ...

文字間を変える

文字間を調整するには、letter-spacingプロパティを利用します。

ラムネ

文字間ていうのは、文字と文字の間のスペースのことだよ

letter-spacing: 値

値は「数値　＋　単位」で指定します。単位はpxやemなどで指定します。

基本的に文字間はemを使って指定します。pxで指定すればわかりやすいような気がしますが、行間のときと同じ理由で使い勝手が悪いためpxで指定することは稀です。

実践

実際に文字間を変えてみましょう。

<p class='demo_24-1'>これテスト文章です</p>
<p class='demo_24-2'>これテスト文章です</p>

.demo_24-1{
   letter-spacing: 0.1em;
   color:red;
 }

.demo_24-2{
    letter-spacing: 0.5em;
    color:green;
 }

文字間が変わりましたね。

一つ目は程よく読みやすいですが、2つ目は文字間が広がりすぎて不自然ですし読みづらく感じます。

文字間はフォントサイズの5%〜10%が読みやすいとされています。emの場合は「0.05em〜0.1em」で設定するのが良いでしょう。

ラムネ

文字間はあまり注意してみたことないと思うけど、結構読みやすさが変わるから重要なんだよ

より実践的なフォントの文字間の指定方法については下記の記事で解説しているので参考にしてみてください。

参考記事

文字間の調整はletter-spacingで！おすすめの値を考察

この記事では文字間の調整方法と、最適な文字間の値を考察します。 文字間とは文字と文字の間のスペースのことです。これが狭すぎたり広すぎたりすると非常に読みづらい印象をユーザーに与えてしまいます。 ちょっとしたことですが、読 ...

文章を、左寄せ・中央寄せ・右寄せにする

文字の揃える位置を変えるには、text-alignプロパティを使います。

ラムネ

HTMLの文章はデフォルトで左揃えだけど、右揃えや中央揃えにもできるんだ！

text-align: 揃える位置;

揃える位置には、「left」・「center」・「right」のいずれかを指定します。

実践

実際に文字の揃え位置を変更してみましょう！

<p class='demo_25-1'>左ぞろえ</p>
<p class='demo_25-2'>真ん中ぞろえ</p>
<p class='demo_25-3'>右ぞろえ</p>

.demo_25-1{
     text-align: left;
 }

.demo_25-2{
     text-align: center;
 }

.demo_25-3{
     text-align: right;
 }

文字の揃え位置が変わりましたね。

ラムネ

見出しを真ん中揃えにするためによく使われるよ

より実践的な揃え位置の指定方法については下記の記事で解説しているので参考にしてみてください。

参考記事

要素を左寄せ・中央揃え・右寄せする方法まとめ！効かない理由も解説

テキストの装飾全部のせ

これまでに解説してきたスタイルを組み合わせてみましょう。

<p>これはbeforeですれはbeforeですれはbeforeですれはbeforeですれはbeforeです</p>
<p class="demo246_1">これはafterですこれはafterですこれはafterですこれはafterですこれはafterです</p>

 .demo246_1{
   font-size: 1.8rem;
   font-family:sans-serif;
   color: tomato;
   font-weight: bold;
   font-style: italic;
   text-decoration: underline;
   text-shadow: 2px 2px 6px #ababab;
   border: 3px solid tomato;
   line-height: 1.5;
   text-align: center;
   padding: 10px 0;
 }

※余白を設けるために、paddingというプロパティを追加しています。

beforeと比べるとかなり個性的なスタイルにすることが出来ましたね。

くま

すごい…けどなんかダサいな

ラムネ

装飾しすぎてもださく感じてしまうんだよね！これは例のために大袈裟にやってるけど、もうちょっと控えめの装飾の方が良いかな

まとめ

文字の装飾についてまとめました。覚えるプロパティがたくさんあって大変ですが、どれも比較的よく使われるので覚えておくと便利です。

おさらいですが、この記事では下記のようなこと解説しています。

• 字の大きさを変更する　→　font-size
• 文章の書体を変える　→　font-famiy
• 文字色を指定する　→　color
• 文字の太さを変える　→　font-weight
• 文字を斜めに傾ける　→　font-style
• 下線を引く　→　text-decoration
• 線で囲う　→　border
• 文字に影をつける　→　text-shadowプロパティ
• 行間を調整する　→　line-height
• 文字間を調整する　→　letter-spacing
• 文字の揃える位置を変える　→　text-align