HTMLとCSSで作るウェブサイト作成入門
CSS(８)文字とフォントのスタイル
ウェブページ上での文字は、CSSでかなり自在にスタイルを設定することができます。例えば、以下のサンプルをご覧下さい。
[CSSサンプル]
p {
/*段落タグに設定*/
text-indent: 20px; /*20ピクセル字下げ*/
color: orange;
/*色をオレンジに*/
text-decoration: underline; /*下線を引く*/
font-size: 12px;
/*文字サイズ12ピクセル*/
font-weight: bold; /*太字に*/
}
[HTMLサンプル] ※基本タグは省略
<p>ここは段落内</p>ここは段落外
[サンプルのブラウザ表示結果]
このサンプルでは、段落を指定する<p>タグに、CSSでスタイルを適用しています。CSSのサンプルは、コメントの通りですが、セレクタで「p」タグを指定した上で、20ピクセルのインデント、文字色をオレンジに、下線を引く、文字サイズ12ピクセル、太字を同時に指定しています。結果、<p>〜</p>の間の文字は、確かに指定通りのスタイルが適用されています。<p>〜</p>の外の文字(「ここは段落外」)にはスタイルは適用されていません。
文字関連のスタイル適用は、他にも様々なものがあります。もちろん、すべて覚える必要はありませんので、「どんなことができるか」だけ確認しておいて、必要に応じて探して使えるようにしておきましょう。
●文字関連のスタイル
文字のスタイルは様々な形で指定できます。上記のサンプルでも登場した「color」や「text-decoration」などが最初にありますが、それらプロパティの概要と、セレクタに設定できる対象、設定値の内容と意味が順に記載されています。全要素とは、あらゆるタグに指定できる、ということです。
|
プロパティ
|
概要
|
対象
|
設定値
|
|
color
|
文字色の指定
|
全要素
|
カラーコード(#FFFFFF等)、色名(red、blue等)
|
|
text-decoration
|
文字の装飾
|
全要素
|
none
|
スタイルなし
|
|
underline
|
下線
|
|
overline
|
上線
|
|
line-through
|
取消線
|
|
text-align
|
横方向の表示位置
|
ブロックレベル要素
|
left
|
左寄せ
|
|
center
|
中央寄せ
|
|
right
|
右寄せ
|
|
vertical-align
|
縦方向の表示位置
|
インライン要素、th、td要素
|
top
|
セル上寄せ
|
|
middle
|
セル中段寄せ
|
|
bottom
|
セル下寄せ
|
|
baseline
|
ベースライン揃え
|
|
sub
|
上付き文字
|
|
super
|
下付き文字
|
|
text-top
|
文字上端揃え
|
|
text-bottom
|
文字下端揃え
|
|
text-indent
|
インデント
|
ブロックレベル要素
|
20pxや80%など
|
|
text-transform
|
大文字、小文字
|
全要素
|
none
|
スタイルなし
|
|
capitalize
|
単語先頭1文字を大文字
|
|
uppercase
|
全て大文字
|
|
lowercase
|
全て小文字
|
|
white-space
|
ソース中の半角スペース、タブ、改行の扱い
|
全要素
|
normal
|
通常表示
|
|
pre
|
改行等もソースの通り表示
|
|
nowrap
|
ひとつの半角空白・自動改行なし
|
|
letter-spacing
|
文字間隔
|
全要素
|
5pxなど、normal
|
|
line-height
|
行送りの調整
|
●フォント関連のスタイル
フォントの指定も可能です。見方は先と同様です。対象欄の全要素とは、あらゆるタグに指定できる、という意味です。
|
プロパティ
|
概要
|
対象
|
設定値
|
|
font
|
文字属性の一括指定
|
全要素
|
font-style、font-weight、font-size、line-height、font-family
(スペース区切り)
|
|
font-family
|
フォント
|
全要素
|
フォント名
|
|
font-size
|
フォントサイズ
|
全要素
|
12pxや80%など
|
|
xx-large
|
x-largeより1段大きく
|
|
x-large
|
largeより1段大きく
|
|
large
|
mediumより1段大きく
|
|
medium
|
smallより1段大きく、largeより1段小さく
|
|
small
|
mediumより1段小さく
|
|
x-small
|
smallより1段小さく
|
|
xx-small
|
x-smallより1段小さく
|
|
larger
|
現状より1段大きく
|
|
smaller
|
現状より1段小さく
|
|
font-weight
|
太字
|
全要素
|
normal
|
通常表示
|
|
bold
|
太字
|
|
bolder
|
現状より1段階太く
|
|
lighter
|
現状より1段階細く
|
|
font-style
|
斜体文字
|
全要素
|
normal
|
通常表示
|
|
oblique
|
斜体
|
|
italic
|
イタリック
|
|