文字の大きさや色を変えるためにいくつかのCSS言語を使って書いてみよう!

文字の大きさを変えるためのプロパティ

CSSは、セレクタとプロパティ、値という3つの要素で成り立っています。たとえば、HTMLのpタグの中に書かれている文字の大きさを変えるには、p{font-size:20px;}のように書きます。pがセレクタ、font-sizeがプロパティ、20pxが値となり、これはpタグの文字の大きさを20pxにするという意味です。このように「font-size」プロパティを使うことで文字の大きさを制御できます。また、値の20の横に書かれているpxは1pxを1とする単位で、pxの横の数字が大きくなるほど文字も大きくなります。単位にはpxのほかにもemやrem、%などもあります。emと%は親要素の文字の大きさを基準とする単位で、font-sizeの値に2emか200%と書けば親要素の文字の2倍の大きさになります。また、remはhtmlタグに指定された文字の大きさを基準とする単位です。

文字の色を変えるためのプロパティ

文字の色を変えるために使用するのが「color」プロパティです。たとえば、HTMLのh1タグの文字を赤色に変えるには、h1{color:red;}のように書きます。値に書かれているredはブラウザで定義されている色名で、redやblackなどの基本的な色のほかにもlavenderやlimegreenなどさまざまな色名があります。colorプロパティの値には色名のほかに16進数による指定も可能です。先程の指定を16進数に置き換えると、h1{color:#ff0000}となります。16進数により指定では左から二桁ずつ区切って、光の三原色である赤・緑・青の濃さをそれぞれ指定します。ffが最も色みが濃く、00の指定では色みはなしです。前述の例では、赤がff、緑が00、青が00となります。