テキストに関するスタイル

テキストの色
color

テキストの色を指定することができます。以下の記述は、見出し<h1>のテキスト色を「赤」にする指定になります。

h1{color:#ff0000;}

テキストの色を変更してみましょう。色の値には、「色コード」または「色名」を指定します。
【カラーコード】冒頭にシャープ「#」をつけて記述します。

フォトショップやイラストレーターでのカラーピッカー画面でも、カラーコードが載っています。

Webセーフカラー

Webセーフカラーとは、OSやディスプレイの表示色数に関係なくどんな環境でも指定通りの色に見えるコードを指しています。

色についての指定方法

RRGGBB形式
RRGGBB形式は、R(赤)G(緑)B(青)を2桁の16進数で表現します。最もよく使われる色の形式です。

/*RRGGBB形式で指定する-------------------*/
color:#0000ff;

/*色名で指定する -------------------*/
color:blue;

/*rgb(R,G,B)指定 -------------------*/
color:rgb(0,0,255);

/*rgba(R,G,B,A)
rgb形式に、透明度(alpha)を追加して指定できます。透明度を小数点を用いて指定します。*/
color:rgba(0,0,255,0.3);

テキストの色に、透明度を入れると薄くなってしまい読みづらくなりますので、背景の色などに使うのがいいでしょう。

RGBAを指定できるサイト
https://www.css3maker.com/
https://www.colorsandfonts.com/color-tools/rgba-color-picker/

色コードに関しては、以下のサイトを参考にしてください。▶︎ WEB色見本：https://www.colordic.org/

水平方向への位置
 text-align

テキストやインライン要素の配置位置（水平方向の揃え方）を指定するプロパティです。以下の記述は、見出し<h1>をセンターへ配置するという指定になります。

h1{text-align:center;}

水平方向の値

【補足】h1はブロック要素なのに、なぜセンターに配置されるのか？

text-alignは、文字の並び方を決めるプロパティです。h1が包囲するブロック(箱)そのものは動かさず、箱の中の文字の方向を指定しています。あくまで、ブロック要素内でテキストが水平に移動しているだけで、「ブロック要素」そのものを動かしているのではありません。ブロック要素を動かすには、他のプロパティを指定する必要があります。

垂直方向への位置
 vertical-align

インライン要素や(インラインブロック要素）の縦方向の揃え方を指定するプロパティです。以下の記述は、画像(img)を周囲の文字の中央に揃える、という指定になります。

img{vertical-align: middle;}

垂直方向の値

vertical-alignも、text-alignと同様に、あくまで「インライン要素の揃え方」となります。

画像の下に隙間がきてしまう場合にも改善される
画像は、baselineに配置されているため、下部にわずかな余白が生じてしまいます。この場合は、img(画像)に対し、vertical-align:bottomを指定することで、余白なくぴったり収まります。リセットCSSを使っても、このわずかな余白が埋まらないことが多いので、必要に応じて記述しましょう。

文字列に下線を引く
text-decorarion

テキストに下線・取り消し線などの装飾を付けるためのプロパティです。以下の記述は、見出し<h1>に、下線を付ける指定になります。

h1{text-decoration:underline;}

指定する値

注意点

リンクテキストの下線を取る場合に、よく使われる指定です。リンクがないのに、下線を引くと、リンクが設定されていると勘違いされる可能性があります。使用する際は、ユーザーを惑わせないように配慮しましょう。

テキストリンクについて

CSSを利用すれば、リンクテキストの色も下線も自由に変更することができます。

リンク疑似クラスについては、こちらをご覧ください。