【HTMLとCSS】文字の装飾 〜サイズ・色・太さ・斜体・行間・字間〜

HTMLで書いた文字をCSSで自由自在に装飾する方法を紹介します。

文字のサイズ(フォントサイズ)

プロパティ font-size

数値px

文字サイズのデフォルト(標準)は16pxです。数値にピクセルという単位をつけて書きます。

16pxから大きくしたり小さくしたり数値を指定してサイズを変更します。

使用例 font-size: 20px; など

文字を太くする

プロパティ font-weight

 lighter・normal・bold

文字を細く→lighter

標準→normal

文字を太く→bold

使用例 font-weight: bold; など

数値(100〜900)

100〜900の100単位ごとに文字の太さを変化させることができます。

100が細く、数値が上がるにつれて太くなっていきます。

使用例 font-weight: 400; など

注意

フォントによって100〜900の太さに対応していない場合があるので、100〜900で表すことができない場合は使用することができません。

文字の色

プロパティ color

余談ですが…「font-color」ではなく、「color」です。
勉強を始めたころになぜ文字色の変更はfont-がつかないのだろうと不思議でした。(笑)

文字の標準色は黒色【black、#000000】です。

色の名前(whiteやredなど)

色の名前(カラーネーム)で文字の色を変更させることができます。

例えば赤はred、黄色はyellow、青色はblueなど。

使用例 color: red; など

カラーコード(#ffffffや#6600dfなど)

頭にシャープ#をつけて6桁の数字で表します。

たくさんの色があるので「css カラーコード」でググってみてください。

使用例 color: red; など

注意

一つのサイトにたくさんの色を使いすぎてはいけません。メインとなる色は1サイトに3色までがいいでしょう。

文字を斜体にする

font-style: italic;

アクセントをつけるために文字が斜めになっていることがありますね。

プロパティと値 font-style: italic;

文字の間隔

字と字の間を指定します。

プロパティ letter-spacing

数値px

使用例 letter-spacing: 20px; など

文字の行間

文章と文章の間を指定します。

プロパティ line-height

数値px

使用例 line-height: 20px; など

文字の装飾についてまとめました。Web制作では文字の装飾は基本であり、使用頻度は高いです。初めのうちは装飾を変えて、どのように変わるか?を見ながら徐々にhtmlとcssに慣れていきましょう!