目次
テキストのスタイル
ここではテキストの見た目に関するCSSを説明していきます。
サイズの単位や色の指定などもあるのでじっくり見ていってください。
ここでの説明内容
テキストのサイズ指定、テキストの色指定、テキストの行間と文字間指定、テキストの太さとスタイル。
テキストのサイズ指定
テキストのサイズ指定には、font-sizeプロパティを使用します。
値には数値と単位を指定しますが、テキストや画像の大きさなど、Webサイトで使用する単位は複数あります。
| px | 画像の解像度を元にしたピクセルの数 |
| rem | ルート要素のフォントサイズに対する相対値 （1rem = 100%) |
| em | 親要素のフォントサイズに対する相対値 （1em = 100%） |
| % | 親要素のフォントサイズに対する比率 |
| vw,svw | ビューポートの幅に対する相対値 |
| vh,svh | ビューポートの高さに対する相対値 |
表の下２行の単位は現場ではよく使いますが、若干慣れが必要になるため最初は上の４つを理解しましょう。
px（ピクセル）
パソコン（スマホ）の画面は、小さな点の集合体でできています。
その小さな点の１つがpx（ピクセル）です。
パソコン（スマホ）は、それぞれ画面の中にあるpxの数が決まっています。（解像度の設定である程度設定変更できます。）
画面の大きさが同じでも、解像度の設定が違うと文字の大きさ（同じ16pxを指定）にも差が出てしまいます。
つまり、画面の解像度により1pxの大きさが変わってしまことを念頭に置いておいてください。
font-size: 1px;と書きます。
pxは絶対長の単位であり、他の要素のサイズとは関係なく指定した数値通りのサイズで表示されます。
（rem,em,%は相対長です。覚えておいてください。）
rem
remはhtml要素（ルート要素）を基準として相対的に計算されます。
font-size: 1rem;と書きます。
html要素に文字サイズを指定しなかった場合、ブラウザのフォントサイズを変更していなければ1rem = 16px相当のサイズで表示されます。
ちなみに1.5remと書いた場合は、ルート要素のサイズが16pxだとしたら24pxになります。
コーディングの現場だと基本的にremを使っています。
emと％
remと同じく相対長の単位ですがルート要素を基準としていたremと違い、親要素のサイズを基準に相対的に計算されます。
％も計算方法は同じです。
1em = 100%は文字サイズに関しては同じサイズを指します。（ボックスサイズなどでは違うので。）
テキストの色指定 color
テキストの色指定にはcolorプロパティを使用します。
値にはredやblueというように名前（カラーネーム）を指定する事や、#000000（カラーコード）を指定します。
例）color: red; color: #000000;
ちなみに人によって見解が異なりますが、文章の途中の単語に色を入れたい場合は<span>タグをつかってHTML内に書き込むことが多いです。
こんな感じになります。
カラーコードとは16進数を使って色を表します。
16進数とは「０から９までの数字と、AからFまでのアルファベットを2桁で組み合わせて数える」方法です。
先ほどの赤のカラーコードと比べるとわかりやすいのですが、
赤のカラーコードは#ff0000
16進数は０１、０２と大きくなりｆｆで１００％の計算となります。
つまり、ｆｆ（赤１００％）、００（緑０％）、００（青０％）で純度１００％の赤になります。
ちなみにコーダーなどはカラーコードを覚える必要はないです。
デザインデータ（figma、AdobeXD）から色を拾ってきたり、Web配色ツール、Adobe Color CCなどから色を選ぶだけでコードはわかるので問題なしです。
自分で１からデザインして、細かく人に注文したいデザイナーさんなどは覚えておくと便利だとは思います。
rgb()関数記法
現場でよく使われる色の指定方法の一つです。
カラーコードとノリはそんなに変わらないのですが、赤・緑・青を「０から２５５の数字で表す」方法です。
カラーコード#ff0000をrgb()で書くと⇨rgb(255,0,0)となります。
RGB (Red, Green, Blue) の主なメリットは、鮮やかで広い色域を表現できることです。
Webデザインで利用する色を表現する仕組みのことを言い、印刷物のデザインではCMYK（Cyan（シアン）とMagenta（マゼンタ）、Yellow（イエロー）、Key Plate（黒（現場ではスミと言います）：キープレート））と呼ばれる仕組みが利用されています。
まあ、ここらは印刷物とWebデータの納品物の差という記事を書こうと思うので、その時に詳しく説明します。
テキストと行間と文字間指定
line-heightプロパティ
フォントにはそれぞれ上下左右に余白があり、これを行間と呼びます。
実際試してみるのが良いと思いますので下にリンクを貼ります。
MDN Web Docs (MDN)といってWebコンテンツのありとあらゆる情報がのっている素敵サイトです。
こういうのを見れるようにしておくとスキルアップできるので活用してください。
（ただ調べ慣れてないと小難しい書き方をしているので慣れましょう）
テキストの太さとスタイル
font-styleに指定できる値
| normal | 標準のスタイル |
| italic | イタリック体 |
| oblique | 斜体 |
text-decorationに指定できる値
| none | テキスト装飾を削除する（ulリストの・を消すなど） |
| underline | テキストに下線を引く |
| overline | テキストに上線を引く |
| line-through | テキストに取り消し線を引く |
font-weightに指定できる値
| normal | 通常の太さ |
| bold | 太字 |
| lighter | 親要素より相対的に一段階細い |
| bolder | 親要素より相対的に一段階太い |
| 数値 | １～１０００までの数値（標準が４００） 数値が高くなるにつれて太くなる |
４つのプロパティを一括指定できるのでここに捕捉しておきます。
| text-decoration-line | 装飾線の種類 | none, underline, overline line-through |
| text-decoration-color | 装飾線の色 | カラーネーム、カラーコードなど |
| text-decoration-style | 装飾線のスタイル | solid, double, dotted dashed, wavy |
| text-decoration-thickness | 装飾線の太さ | auto, from-font pxやemなどを使った数値 |
と、このように一括指定で書けるので保守性（メンテナンス性）が保てます。
まとめ
最初のうちは戸惑うことも多いでしょうが、一括指定できるものとできないものを見極めできる限りコンパクトに纏めていったほうが目に優しいです。（特に老眼が始まった身としては）
他者とのデータ共有の際にもゴチャゴチャしているものよりはスッキリしているもののほうが喜ばれますし、スキルがあることを誇示できます(笑)冗談はさておき、スキルがある方が仕事も増えますしね。
スキルもセンスも先天性のものではなくテクニックを磨いた先に手に入るものだと思っています。
お互い頑張りましょう！
↓の書籍は自分の愛用品なんですけど、基本的なことから応用まで異常なほどに詳しく記載されている隠れた逸品だと思っています。おすすめです！
