CSSはHTMLのテキストの装飾ができます。テキストの色、大きさ、太さ、フォント、位置、装飾の変更ができます。
文字色の変更
文字色の変更はcolorプロパティで行います。colorプロパティにはredやblueといった指定方法のほかにRGBコードでの指定や透明度の指定ができます。
<style>
.color-name {
color: red;
}
.color-rgb {
color: #0000FF;
}
.color-rgba {
color: rgba(128, 128, 128, 0.5);
}
</style>
<p class="color-name">Test</p>
<p class="color-rgb">Test</p>
<p class="color-rgba">Test</p>Test
Test
Test
一つ目の方法では色名を直接指定しています。二つ目の方法ではカラーコードで色を指定しています。三つ目の方法ではrgba関数を使用して、色を指定しています。rgba関数は赤、緑、青が0から255まで、aが透過率で0から1まで指定が可能です。上記の例では、透過率を0.5に指定しています。
背景色の変更
背景色の変更はbackground-colorプロパティで行います。色の指定は文字色の指定と一緒です。
<style>
.background-color {
background-color: red;
}
</style>
<p class="background-color">Test</p>Test
背景色は要素全体に対して適応されるため、文字がないところにも適応される場合があります。
フォントの大きさ
フォントの大きさはfont-sizeプロパティで設定します。
<style>
.font-size-12px {
font-size: 12px;
}
.font-size-24px {
font-size: 24px;
}
.font-size-36px {
font-size: 36px;
}
.font-size-48px {
font-size: 48px;
}
.font-size-1-5em {
font-size: 1.5em;
}
.font-size-1-5-rem {
font-size: 1.5rem;
}
.font-size-percent {
font-size: 120%;
}
</style>
<p class="font-size-12px">12px</p>
<p class="font-size-24px">24px</p>
<p class="font-size-36px">36px</p>
<p class="font-size-48px">48px</p>
<p class="font-size-1-5em">1.5em</p>
<p class="font-size-1-5-rem">1.5rem</p>
<p class="font-size-percent">120%</p>12px
24px
36px
48px
1.5em
1.5rem
120%
フォントサイズはpx、em、rem、%で指定できます。h1タグなどにも使用できます。フォントサイズの主な単位は以下の通りです。
| 単位 | 説明 |
| px | ピクセル単位 絶対的なサイズを指定 |
| em | 親要素のフォントサイズに対する相対的な値 |
| rem | ルート要素のフォントサイズに対する相対的な値 |
| % | 親要素のフォントサイズに基づく割合 |
emが常に親要素を参照するのに対し、remは常にルート要素（htmlタグ）を参照します。emはネストが深い場合、計算が複雑になる可能性があります。
フォントの太さ
フォントの太さはfont-weightで指定します。
<style>
.font-weight-100 {
font-weight: 100;
}
.font-weight-500 {
font-weight: 500;
}
.font-weight-900 {
font-weight: 900;
}
.font-weight-bold {
font-weight: bold;
}
</style>
<p class="font-weight-100">100</p>
<p class="font-weight-500">500</p>
<p class="font-weight-900">900</p>
<p class="font-weight-bold">bold</p>100
500
900
bold
font-weightは100から900の数値と、boldなどのキーワードが使用できます。フォントの太さはフォントにもよりますが、細かく調整しても違いがない場合があります。
フォント
font-familyでフォントの種類を変更できます。
font-familyの基本構文
selector {
font-family: "Font Name", fallback-font, generic-family;
}Font Nameには優先的に使用するフォントを指定します。”Arial”のようにフォント名をダブルクオートで囲んで指定します。fallback-fontは第一候補のフォントが利用できない場合に使う代替フォントを指定します。generic-familyは汎用フォントファミリーを指定できます。serifやsans-serifなどを指定できます。
generic-familyの指定例
<style>
.font-family-serif {
font-family: serif;
}
.font-family-sans-serif {
font-family: sans-serif;
}
</style>
<p class="font-family-serif">serif</p>
<p class="font-family-sans-serif">sans serif</p>serif
sans serif
フォントは複数の指定ができます。使用しているOSによって表示できるフォントは違うので各OS用のフォントを指定するか、共通で使用できるWebフォントを使用するのがよいでしょう。
文字の位置
テキストの右寄せや左寄せはtext-alignで指定します。
<style>
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
</style>
<p class="left">left</p>
<p class="right">right</p>
<p class="center">center</p>left
right
center
テキストの右寄せ、左寄せ以外に両側そろえや、開始位置や終了位置を揃えることもできます。
テキストの装飾
テキストの装飾はスタイルの変更や、上下線、取り消し線の追加、影の追加、文字間隔の調整などができます。
スタイルの変更
フォントスタイルはfont-styleで変更します。font-styleでイタリック体に変更できます。
<style>
.font-style {
font-style: italic;
}
</style>
<p class="font-style">font-style</p>font-style
上下線、取り消し線の追加
上下線、取り消し線の追加はtext-decorationで行います。
<style>
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
</style>
<p class="underline">underline</p>
<p class="overline">overline</p>
<p class="line-through">line-through</p>underline
overline
line-through
影の追加
影の追加はtext-shadowで行います。text-shadowは水平位置、垂直位置、ぼかし半径、影の色の順に指定します。
<style>
.text-shadow {
text-shadow: 2px 2px 4px gray;
}
</style>
<p class="text-shadow">text-shadow</p>text-shadow
文字間隔
文字間隔はletter-spacingで指定します。
<style>
.letter-spacing-2px {
letter-spacing: 2px;
}
.letter-spacing-4px {
letter-spacing: 4px;
}
.letter-spacing-8px {
letter-spacing: 8px;
}
</style>
<p class="letter-spacing-2px">letter-spacing-2px</p>
<p class="letter-spacing-4px">letter-spacing-4px</p>
<p class="letter-spacing-8px">letter-spacing-8px</p>letter-spacing-2px
letter-spacing-4px
letter-spacing-8px
以上、テキストの装飾について解説しました。
前：CSSとは