テキストの装飾とスタイルの変更方法

こんにちは。SSR+です。今回はテキストの装飾方法についてお話していきたいと思います。

フォントサイズを変更する

文字のサイズはfont-sizeプロパティで指定し、値は数字＋単位で記述します。
今回はpxとemで指定していきます。

emは初期設定のフォントサイズに対する倍率を指定します。例えば初期設定のフォントサイズが10pxのとき2emとするとフォントサイズは20pxになります。

文字の色を変更するときはcolorプロパティで指定し、値には色名（英語の色名）かカラーコード（＃と6桁の英数字）を記述します。カラーコードはカラーピッカーなどで使いたい色を調べてコピペすると早いです。

文字を斜体にするときはfont-styleプロパティでitalicを指定します。

文字を太字にするときはfont-weightプロパティでboldを指定します。

text-decoration: underlineで指定するとよく見るシンプルな下線を引くことができます。この場合、線の色は文字の色と同じになります。

borderは要素の周りに線を引くことができるプロパティです。今回は下線を引きたいのでbottomにしますが、borderを使えば上下に線を引いたり文字を囲んだりすることができます。

border-bottom:solid ２px orange;

3つの値は半角スペース区切り、「線の種類」「太さ」「色名orカラーコード」を並べます。並べる順番は自由です。

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

調べてみると文字の装飾だけでも色々あって、この記事は基本だけまとめたので書きませんでしたが文字を縦書きにしたり文字に影を付けたりする方法もあって調べていて面白かったです。