【CSS】テキスト関連の装飾

HTML/CSS

テキストを装飾するCSSプロパティをまとめました。

イメージとしては太字とか下線とか Microsoft Officeで でできるものは 全てできる感じですね。

 

スポンサーリンク

フォントの大きさ

フォントサイズの単位

CSSでフォントサイズを指定するときの単位は2種類あります。

絶対値の「px(ピクセル)」と、相対値の「em(エム)」と「rem(root em)」です。

「px」はそのままピクセル(画素、ドット、液晶の点)の数で大きさを指定します。

「em」は その要素のフォントサイズを 1としたときの比率です。

「rem」はhtml要素のフォントサイズを 1としたときの比率です。

初期値では 1em = 1rem = 16px となります。

ちょっとわかりずらいので、下の2つの例で p要素のフォントサイズがどうなるか確認してみてください。

CSS

html { font-size : 20px ; }
div { font-size : 16px ; }
p { font-size : 0.5em ; }

HTML

<html>
    <div>
        <p>ここは 8pxになります</p>
    </div>
<html>

2つめ。

CSS

html { font-size : 20px ; }
div { font-size : 16px ; }
p { font-size : 0.5rem ; }

HTML

<html>
    <div>
        <p>ここは 10pxになります</p>
    </div>
<html>

 

フォントサイズの変更

もうすでに上で出てますが、font-sizeプロパティで文字を大きくしたり小さくしたりできます。

パソコンで20pxでつくって丁度いいと思っても、スマホで20pxだと大きいと感じることもあるので、レスポンシブデザイン(スマホ画面サイズ対応)では remを使うのがいいみたいですね。

デザインの都合上 大きさを変えたくないときは px、周りに合わせて大きさが変わってもいいときは em, remといった使い分けがいいかと。

 

スポンサーリンク

フォントに関するプロパティ

文字の上下の余白の大きさを指定する

line-heightプロパティで 文字の上下の余白の大きさを指定します。

font-sizeを 10px、line-heightを 20pxとした場合、上下に余白が 5pxずつになります。

CSS

p { line-height : 20px }

 

フォントの種類を指定する

font-familyプロパティで フォントの種類を指定します。

「,」で区切って複数指定すること場合が多いみたいですね。

理由は 環境によっては そのフォントが無い可能性があるからで、ない場合は 前に書かれたものから優先して適用されます。

フォント名の中にスペースが含まれるものは「”」または「’」(これらを引用符といいます)で囲います。

そうでないものも引用符で囲ってもいいので、引用符を使っておいた方が無難ですね。

指定したフォントが全て無い場合に「じゃあこんな雰囲気のフォントで」という指定の仕方があります。

それは総称フォントファミリーというもので、5種類ありますが、「serif」と「sans-serif」のどちらかを指定しておけばOKです。

これらは引用符は使えないことに注意しましょう。

「serif」と「sans-serif」はセリフがあるかないかで、サンセリフは明朝体、セリフはゴシック体のイメージです。

CSS

p { font-family : "Osaka", "メイリオ", sans-serif }

 

文字の太さを指定する

font-weightプロパティで 文字の太さを指定できます。

100, 200, 300…, 900 の 9段階で 太さを指定できるように なってますが、残念ながら日本語のフォントは 「normal (ふつう) 」「bold (太字)」の2種類だけしか対応してないことが多いです。

なので、「normal」と「bold」だけ覚えておけば十分でしょう。

一応「bolder」と「lighter」という1段太くしたり、細くしたりするものもあります。

CSS

.sample_weight400 { font-weight: normal }
.sample_weight700 { font-weight : bold }

HTML

<p class="sample_weight400">ここはふつうの太さ</p>
<pclass="sample_weight700">ここは太字</p>

 

文字を斜体にする

font-styleプロパティで 文字を斜めにします。

指定できる値としては「normal」「italic」「oblique」があります。

欧文フォントの場合、イタリック体と斜体で別のデザインが用意されてることがありますが、日本語フォントの場合は ほぼ用意されてないので、単純に斜めになるだけで表示内容は同じです。

CSS

.sample_normal { font-style : normal }
.sample_italic { font-style: italic }
.sample_oblique { font-style : oblique }

HTML

<p class="sample_normal">normal</p>
<p class="sample_italic">italic</p>
<p class="sample_oblique">oblique</p>
ブラウザ

normal

italic

oblique

 

フォント関連を一括指定する

ここまで説明してきたフォント関連の値をまとめて指定することができるのが fontプロパティです。

各プロパティの値は半角スペースで区切って指定しますが、順番があるので注意してください。

  1. 最初に font-styleと font-weightを指定します
  2. 次に font-sizeを指定します
  3. 次の line-heightを指定する場合は、その前に指定した font-sizeとの間を「/」で区切ります
  4. 最後に font-familyを指定します

1と 3は 省略できます。

一行で書けるのはスマートですが、順番を覚えてないと調べて使う羽目になるので、一つずつ別に指定していった方がいいかもです。

 

スポンサーリンク

テキストに関するプロパティ

文字の色を指定する

colorプロパティで 文字の色を指定します。

CSS

.sample_color { color: red }

HTML

<p class="sample_color">文字に色をつける</p>
ブラウザ

文字に色をつける

 

文字に影を付ける

text-shadowプロパティで 文字に影を付けます。

どんな影をつけるかを 4つ値を 半角スペースで区切って指定します。

  1. 影の表示位置の右方向へ移動量(マイナスで左方向)
  2. 影の表示位置の下方向へ移動量(マイナスで上方向)
  3. 影のぼかす範囲(強さ)
  4. 影の色を指定

3と 4は省略可 です。

また、「,」で 影を複数つけることもできます。

CSS

.sample_shadow {
    font-size : 30px ;
    text-shadow : 30px 0px 3px red,   0px 30px 3px blue ;
}

HTML

<p class="sample_shadow">A</p>
ブラウザ

A

いろいろ説明しましたが、実際にやってみた方が分かりやすいと思うので、ジェネレータサイトを貼っておきます。

http://www.bad-company.jp/text-shadow/

 

テキストの左寄せ、中央寄せ、右寄せ

text-alignプロパティで 文字を 左寄せ、中央寄せ、右寄せ にしたいときに使います。

値はそれぞれ 「left」「center」「right」です。

CSS

.sample_left { text-align : left }
.sample_center { text-align : center }
.sample_right { text-align : right }

HTML

<p class="sample_left">左寄せ</p>
<p class="sample_center">中央寄せ</p>
<p class="sample_right">右寄せ</p>
ブラウザ

左寄せ

中央寄せ

右寄せ

 

文字に下線、上線、取り消し線を付ける

text-decorationプロパティで 下線、上線、取り消し線を付けます。

値はそれぞれ 「underline」「overline」「line-through」です。

CSS

.sample_under { text-decoration : underline }
.sample_over { text-decoration : overline }
.sample_through { text-decoration : line-through }

HTML

<p class="sample_under">下線</p>
<p class="sample_over">上線</p>
<p class="sample_through">取り消し線</p>
ブラウザ

下線

上線

取り消し線

 

文字の間隔を指定する

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

normal」が 初期値で 0です。

emで指定した方がいいです。文字の大きさが変わっても間隔のバランスは変わらないので。

一応マイナスでも指定できます。

CSS

.sample_space { letter-spacing : 1em }

HTML

<p>文字の間隔は0em</p>
<p class="sample_space">文字の間隔は1em</p>
ブラウザ

ここの文字の間隔は0em

ここの文字の間隔は1em

 

縦書きにする

writing-modeプロパティで 縦書きになります。

登場する機会は少なそうなので紹介まで。

CSS

.sample_tate { writing-mode : vertical-rl }

HTML

<p class="sample_tate">
    吾輩は猫である。<br>
    名前はまだない。<br>
    どこで生れたか頓と見当がつかぬ。
</p>
ブラウザ

吾輩は猫である。
名前はまだない。
どこで生れたか頓と見当がつかぬ。