使用頻度の高いプロパティ一覧
テキスト装飾で使用頻度の高いプロパティ例を表にまとめてみた。
フォントのスタイル設定や、配置、色などの設定がある。
なお、プロパティ毎に設定できる値が異なるので注意が必要。
CSSでは、プロパティと値の両方を覚えないと上手く使いこなすことが出来ない。
フォントのプロパティ
| プロパティ | 主な用途 |
| font-size | フォントのサイズ |
| font-weight | フォントの太さ |
| font-style | フォントの傾き |
| font-family | フォントの種類 |
| color | フォントの色 |
配置のプロパティ
| プロパティ | 主な用途 |
| text-indent | 字下げ |
| text-decoration | 下線や取り消し線 |
| text-align | 左右の配置 |
| vertical-align | 上下の配置 |
| line-height | 行間 |
| background-color | 背景色 |
単位のプロパティ
プロパティの値を数値で指定する場合には、合わせて単位の記述も必要になる。
CSSの単位は、他との関係を比較して数値で指定する「相対単位」と、実際の大きさや長さを指定する「絶対単位」の2種類が存在する。
ここで紹介しているのは、数値指定でよく使われる単位である。
また、単位をpx以外にする場合は小数点も設定可能。
ピクセルは画面上のドット最小単位なので、それよりも小さく分割することは出来ない。
なお、小数点を設定する場合でも、あまり細かい数値を指定する意味はないので、最小でも小数点以下2桁ぐらいまでに留めておく（例：0.25em）。
| 区分 | 単位 | 意味 | 補足 |
| 相対単位 | ％ | 相対サイズ | 現在の大きさに対する相対値 |
| em | 文字数分 | 1em＝1文字分 2em＝2文字分 | |
| px | ピクセル | 画面上に表示されているドットの数 | |
| 絶対単位 | pt | ポイント | 印刷時の大きさ（1pt ≒ 0.353mm） |
| mm | ミリメートル | 印刷時の大きさ |
テキスト装飾の例
CSS
CSS では、装飾のプロパティを1つずつ設定してスタイルを定義して行く。
ファイル名は、004.cssとしている。
CSS
.style01 { font-size: 20pt; }
.style02 { font-weight: bold; }
.style03 { font-style: italic; }
.style04 { font-family: "Arial Black"; }
.style05 { color: blue; }
.style06 { text-indent: 1em; }
.style07 { text-decoration: underline; }
.style08 { text-align: right; }
.style09 { vertical-align: top; }
.style10 { line-height: 2em; }
.style11 { background-color: pink; }HTML
HTML には、p タグの class 属性でスタイルを指定して行く。
CSS を使うと、HTML に見栄えに関する記述をしなくても見栄えを変化させることが出来る。
HTML
<link href="004.css" rel="stylesheet" type="text/css">HTML
<p class="style01">font-size</p>
<p class="style02">font-weight</p>
<p class="style03">font-style</p>
<p class="style04">font-family</p>
<p class="style05">color</p>
<p class="style06">text-indent</p>
<p class="style07">text-decoration</p>
<p class="style08">text-align</p>
<p class="style09">virtical-align</p>
<p class="style10">line-height</p>
<p class="style11">background-color</p>