CSSで文字や文章をどのように装飾していくのか説明していきます。
フォントサイズ
フォントサイズを変更する場合は、「font-size」プロパティを使い文字のサイズを指定します。
適切な文字サイズは、14px～18px程度が見やすく一般的です。
また、文字サイズは統一感を出すために、2～5種類程度にとどめておきましょう。
主に以下の指定方法があります。
数値
- px：固定サイズ（画面上の最小単位１ピクセルを基準とした単位）
- rem：HTML基準（ルート要素に指定されたサイズを基準とした単位）
- em：親要素基準（段落構造を意識する基準とした単位）
- ％：親要素のサイズを基準に割合で指定する単位
p{
font-size:16px;
}
p{
font-size:1.2rem;
}
キーワード
- xx-smal：とても小さい
- x-smal：小さい
- smal：やや小さい
- medium：標準サイズ
- large：やや大きい
- x-large：大きい
- xx-large：とても大きい
フォント種類
フォントの種類を変更する場合は、「font-family」プロパティを使い文字の種類を指定します。
指定したフォントをユーザーがインストールしていない場合は、ブラウザで設定している標準のフォントで表示されます。
フォントの種類は複数指定でき、「 , 」で区切り先に指定したフォントから優先的に適用されます。
複数指定出来ますが、フォントサイズと同じように、1つのデザインに対して１～3種類までにとどめておきましょう。
主に以下の指定方法があります。
単一指定
p{
font-family:serif;
}
複数指定（ , で区切る）
p{
font-family:YuGothic , sans-serif;
}
日本語またはフォント名にスペース（””で囲む）
p{
font-family:”ヒラギノ丸ゴ Pro W4″;
}
フォント太さ
フォントの太さを変更する場合は、「font-weight」プロパティを使い文字の太さを指定します。
1～1000の数字で指定することも出来ますが通常はキーワードで指定してあげます。
また、太字や細字などの太さのバリエーションが用意されていないフォントでは適用されません。
主に以下の指定方法があります。
キーワード
- normal：標準
- bold：太字
- lighter：一段階細く
- bolder：一段階太く
p{
font-weight:bold;
}
行間
行間を変更する場合は、「line-height」プロパティを使い行間を指定します。
主に以下の指定方法があります。
nomal
ブラウザが判断した行の高さで表示
数値（単位なし）
フォントサイズとの比率で指定
p{
line-height:1.8;
}
数値（単位あり）
px , em , %などの単位で数値を指定
文字間
文字間を変更する場合は、「letter-spacing」プロパティを使い文字間を指定します。
主に以下の指定方法があります。
nomal
ブラウザが判断した行の高さで表示
数値（単位あり）
px , em , %などの単位で数値を指定
p{
letter-spacing:0.05em;
}
文章の揃え方
「text-align」プロパティでテキストを揃える位置を指定します。
日本語の場合は、デフォルトでは左揃えになっています。
主に以下の指定方法があります。
- left：左揃え
- right：右揃え
- center：中央揃え
- justify：両端揃え
p{
text-align:center;
}
下線や装飾
「text-decoration」プロパティで下線や装飾を指定します。
主に以下の指定方法があります。
- none：下線なし（初期値）
- underline：下線あり
a{
text-decoration:underline;
}
大文字や小文字
「text-transform」プロパティで大文字や小文字を指定します。
主に以下の指定方法があります。
- none：変換しない（初期値）
- uppercase：すべて大文字
- lowercase：すべて小文字
- capitalize：単語の先頭だけ大文字
a{
text-transform:uppercase;
}
コメント