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

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

くま

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

ボンド

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

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

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

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

この記事のゴール

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

これはbeforeですれはbeforeですれはbeforeですれはbeforeですれはbeforeです

これはafterですこれはafterですこれはafterですこれはafterですこれはafterです

<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:文字の大きさ;

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

px(ピクセル)

文字の大きさをpxで指定します。指定した数値は文字の高さとして計算されます。例えば、10pxとした場合は文字の高さが10pxになります。

rem(レム)

html要素の文字サイズを基準にした倍率を指定します。たとえば0.8remとした場合、html要素に設定されている文字サイズの0.8倍が指定されます。

ボンド

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あたりを使っているサイトが多いよ

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

フォントを変更する

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

font-family: フォント名;

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

厳密にはクォーテーションで括らなくても問題なく表示されるようですが、慣例となっているため、括っておいた方が無難です。

font-famiyのルール

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

左から順に優先度の高いものを書いていく

font-familyは複数のフォントを指定することが出来ます。複数指定された場合、左に書かれたフォントが優先され、なければ次に指定されたフォント、というように順番に適用されていきます。つまり、左から適用したい優先順位のとおり指定するようにすれば良いでしょう。

最後に総称フォントファミリーを指定

指定したフォントが、ユーザーの環境に一つも無かった時に備えて、「明朝系」や「ゴシック系」などのような、ざっくりとしたフォントの系統を指定できる「総称フォントファミリー」を書きます。こうすることで、指定したフォントがない場合でもある程度のフォントの方向性をコントロールできます。

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

  • 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という会社が共同開発した無料で使える綺麗なフォントだよ

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

文字の色を変える

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

color: 色;

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

カラーネームとカラーコード

カラーネームは、代表的な色につけられている名前で、red、blueなど、100種類以上準備されています。カラーコードは、色につけられている番号で、「110000」のような6桁の数値が振り分けられています。

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

実践

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

これテスト文章です

これテスト文章です

<p class='demo_17'>これテスト文章です</p>
<p class='demo_17-2'>これテスト文章です</p>
.demo_17{
    color:red;
 }
.demo_17-2{
    color:#4689FF;
 }

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

ボンド

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

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

太字にする

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

font-weight:値;

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

数値で指定

100〜900の数値で100刻みずつ指定。数値が大きくなるほど太くなります。

キーワードで指定

太字を示す「bold」や、標準の太さに戻す「normal」などを指定。

実践

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

これテスト文章ですここは子要素の中身ですこれテスト文章です

<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要素だけ太さを標準に戻しています。

ボンド

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

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

文字の傾きを変える

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

font-style:値;

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

normal

傾きのない文字です。文字を斜体から標準に戻すときに使います。

italic

フォントファミリーにイタリックが用意されていればそれを表示し、なければ標準の文字を斜めに傾けて表示します。

実践

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

これテスト文章ですここは子要素の中身ですこれテスト文章です

<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を指定しているため、そこだけ標準に戻っているのがわかると思います。

ボンド

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

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

下線を引く

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

text-decoration: 線の種類;

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

実践

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

これテスト文章ですここは子要素の中身です/span>これテスト文章です

<p>これテスト文章です<span class='demo_20'>ここは子要素の中身です/span>これテスト文章です</p>
.demo_20{
    text-decoration: underline;
 }
ボンド

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

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

文字を線で囲う

線で囲うには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の太さの赤線を指定しました。文字が枠線で囲まれているのが分かります。線の種類や色や太さを調整すればいろんな表現ができるのでいろいろ試してみてください。

ボンド

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

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

文字に影をつける

文字に影をつけるには、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: 値;

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

単位なし

現在のフォントサイズに対する割合になります。1の場合文字の大きさと同じ、1.5の場合文字の大きさの1.5倍という風になります。

px(ピクセル)

指定したpxに行の高さを設定できます。

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

なぜ単位なしで指定するのか?

pxで指定すればわかりやすいような気がしますが、ほとんどのケースで単位なしで指定されます。

これはpxで指定した場合、フォントサイズを変えるたびに行間も指定しなければならないからです。例えば行間を「15px」とすると、フォントサイズが12pxくらいの時はいい感じに表示できますが、フォントサイズが30pxくらいの時は行間が小さすぎて重なってしまいます。

一方、単位なしでは「その時のフォントサイズ」の何倍かを指定するので、bodyに行間「1.5」などとと指定すれば、全ての要素でフォントサイズの1.5倍の行間が適用され、個々の要素の調整の必要がありません。

実践

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

これテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章です

これテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章です

これテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章です

<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倍くらいに設定しておくのが良いでしょう。

ボンド

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

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

文字間を変える

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

ボンド

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

letter-spacing: 値

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

em(エム)

現在のフォントサイズに対する比率で指定します。1emの場合フォントサイズと同じ、1.5emの場合フォントサイズの1.5倍という風になります。

px(ピクセル)

現在のフォントサイズに対する比率で指定します。1emの場合フォントサイズと同じ、1.5emの場合フォントサイズの1.5倍という風になります。

基本的に文字間は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」で設定するのが良いでしょう。

ボンド

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

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

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

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

ボンド

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

text-align: 揃える位置;

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

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;
 }

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

ボンド

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

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

テキストの装飾全部のせ

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

これはbeforeですれはbeforeですれはbeforeですれはbeforeですれはbeforeです

これはafterですこれはafterですこれはafterですこれはafterですこれはafterです

<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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です