| 文字色を指定する(CSS) | |||||||||||||||||||
color: #0000ff; | |||||||||||||||||||
color は、全てのタグ（要素）に適用できます。 | |||||||||||||||||||
color は、文字色を指定するプロパティです。<body>タグ（要素）に設定するとページ全体の文字色を指定できます。 | |||||||||||||||||||
strong { color: #0000ff; } … 個別タグの指定 body { color: #008080; } … ページ全体の指定 | |||||||||||||||||||
| |||||||||||||||||||
※ 色の指定は、カラーコード（#ffffff,#fff,rgb(255,0,0)）または、カラーネーム（red,blue）で行います。詳細は、「カラーネーム」のページをご覧下さい。  | |||||||||||||||||||
【 参 考 】 | |||||||||||||||||||
文書全体の文字色を指定する場合は、bodyタグ（要素）にこのプロパティーを指定します。 | |||||||||||||||||||
body { color: #000000; backGround-color: #ffffff; } | |||||||||||||||||||
 文字色を指定する場合は、同時に背景色も指定します。文字色だけを指定すると、ユーザーの環境によっては文字が見づらくなってしまう。 | |||||||||||||||||||
| ★ 使用例とブラウザでの表示 (c1-1)スタイルシートの書き方（基本）は、こちら です。 | |||||||||||||||||||
| |||||||||||||||||||
| 関連するページ | |||||||||||||||||||
CSS スタイルシート ：ボックスの背景色を指定する | |||||||||||||||||||
HTML タグページ  ：文字のサイズと色を指定する
HTML タグページ ：基準の文字サイズなどを指定する | |||||||||||||||||||
| 文字サイズを指定する(CSS) | |||||||||||||||||||||||||||||||||
font-size: *pt; | |||||||||||||||||||||||||||||||||
font-size は、全てのタグ（要素）に適用できます。 | |||||||||||||||||||||||||||||||||
font-size は、文字サイズを指定するプロパティです。 | |||||||||||||||||||||||||||||||||
div { font-size: 12pt; } | |||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||
【文字サイズの指定方法】 | |||||||||||||||||||||||||||||||||
文字のサイズは、以下の3つの方法で指定することができます。 | |||||||||||||||||||||||||||||||||
■長さ・パーセントで指定 | |||||||||||||||||||||||||||||||||
数値＋単位（pt 等）またはパーセントで指定する方法です。 | |||||||||||||||||||||||||||||||||
font-size: 12pt;、font-size: 1.5em; | |||||||||||||||||||||||||||||||||
font-size: 80%; | |||||||||||||||||||||||||||||||||
＊ ブラウザのメニューバーの「表示(V)」で「文字サイズ(X)」を選択できるようにする場合は、パーセントで指定して下さい。 | |||||||||||||||||||||||||||||||||
■キーワード（絶対サイズ）で指定 | |||||||||||||||||||||||||||||||||
次の７段階のキーワードで指定する方法です。 | |||||||||||||||||||||||||||||||||
font-size: xx-large; … 最も大きいサイズ | |||||||||||||||||||||||||||||||||
font-size: x-large; | |||||||||||||||||||||||||||||||||
font-size: medium; … 標準サイズ（初期値） | |||||||||||||||||||||||||||||||||
font-size: small; | |||||||||||||||||||||||||||||||||
font-size: x-small; | |||||||||||||||||||||||||||||||||
font-size: xx-small; … 最も小さいサイズ | |||||||||||||||||||||||||||||||||
xx-large が最も大きいサイズ、xx-small が最も小さいサイズになります。初期値は medium です。 | |||||||||||||||||||||||||||||||||
※ ブラウザの種類や表示モードによっては、small が標準サイズとして扱われる場合があります。
詳しくは「ブラウザの表示モード（標準モードと互換モード）」をご覧下さい。 | |||||||||||||||||||||||||||||||||
■キーワード（相対サイズ）で指定 | |||||||||||||||||||||||||||||||||
基準文字サイズに対して、１段階大きい、または小さいサイズを指定します。 | |||||||||||||||||||||||||||||||||
font-size: larger; … １段階大きいサイズ | |||||||||||||||||||||||||||||||||
font-size: smaller; … １段階小さいサイズ | |||||||||||||||||||||||||||||||||
【参考】 | |||||||||||||||||||||||||||||||||
文書全体の文字サイズを指定する場合は、bodyタグ（要素）に対してこのスタイルを指定します。 | |||||||||||||||||||||||||||||||||
body { font-size: 80%; } | |||||||||||||||||||||||||||||||||
ただし、表示モードが「互換モード」の場合は、上記の指定内容が表のセル内には適用されません（「標準モード」では適用されます）。互換モードでセル内にも適用させたい場合は、次のように thタグ（要素）と tdタグ（要素）に対しても指定しておきます。 | |||||||||||||||||||||||||||||||||
body, th, td { font-size: 80%; } | |||||||||||||||||||||||||||||||||
| ブラウザのメニューバーの「表示(V)」で「文字サイズ(X)」を選択できるようにする場合は、相対的な文字サイズ（パーセント、*em）で指定して下さい。 | |||||||||||||||||||||||||||||||||
| ★ 使用例とブラウザでの表示 (c1-2)スタイルシートの書き方（基本）は、こちら です。 | |||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||
※ この使用例は、ブラウザの文字サイズを「標準（中）」にしてご覧下さい。
Internet Exp.の場合は、表示(V)→文字サイズ(X)で「中(M)」を選択して下さい。 | |||||||||||||||||||||||||||||||||
| 関連するページ | |||||||||||||||||||||||||||||||||
| CSS スタイルシート：文字を拡大（縮小）する | |||||||||||||||||||||||||||||||||
| HTML タグページ ：文字のサイズと色を指定する
HTML タグページ ：基準の文字サイズなどを指定する
HTML タグページ ：大きめの文字と小さめの文字 | |||||||||||||||||||||||||||||||||
| 文字の太さを指定する(CSS) | |||||||||||||||||||||
font-weight: bold; | |||||||||||||||||||||
font-weight は、全てのタグ（要素）に適用できます。 | |||||||||||||||||||||
font-weight は、文字の太さを指定するプロパティです。 | |||||||||||||||||||||
.exam { font-weight: bold; } | |||||||||||||||||||||
| |||||||||||||||||||||
【その他の指定方法】 | |||||||||||||||||||||
以下のように細かく指定する方法もあるが、実際には「太字」と「標準」の２段階でしか表現しません。 | |||||||||||||||||||||
■数値で指定 | |||||||||||||||||||||
font-weight: 700; | |||||||||||||||||||||
＊ 100（最も細い）から 900（最も太い）を９段階で指定できます。400 は normal と同等の太さ、700 は bold と同等の太さになります。 | |||||||||||||||||||||
■相対的に指定 | |||||||||||||||||||||
font-weight: bolder; | |||||||||||||||||||||
＊ 親要素の文字の太さに対して、１段階太く、または細くします。bolder は１段階太くし、lighter は１段階細くします。 | |||||||||||||||||||||
【 参 考 】 | |||||||||||||||||||||
次のように指定すると、太字で表示される文字（strong要素 等）を標準の太さにすることができます。 | |||||||||||||||||||||
strong { font-weight: normal; } | |||||||||||||||||||||
| ★ 使用例とブラウザでの表示 (c1-3)スタイルシートの書き方（基本）は、こちら です。 | |||||||||||||||||||||
| |||||||||||||||||||||
| 関連するページ | |||||||||||||||||||||
| HTML タグページ ：太字にする
HTML タグページ ：文字を強調する | |||||||||||||||||||||
| イタリック体にする(CSS) | |||||||||||||||||||||||
font-style: italic; | |||||||||||||||||||||||
font-style は、全てのタグ（要素）に適用できます。 | |||||||||||||||||||||||
font-style は、フォントのスタイル（イタリック体と斜体）を指定するプロパティです。 | |||||||||||||||||||||||
.exam { font-style: italic; } | |||||||||||||||||||||||
| |||||||||||||||||||||||
【 参 考 】 | |||||||||||||||||||||||
次のように指定すると、イタリック体で表示される文字（em要素 等）を標準のスタイルにできます。 | |||||||||||||||||||||||
em { font-style: normal; } | |||||||||||||||||||||||
| ★ 使用例とブラウザでの表示 (c1-4)スタイルシートの書き方（基本）は、こちら です。 | |||||||||||||||||||||||
| |||||||||||||||||||||||
| 関連するページ | |||||||||||||||||||||||
| HTML タグページ ：イタリック体にする
HTML タグページ ：文字を強調する | |||||||||||||||||||||||
| フォント名を指定する(CSS) | |||||||||||||||||||
font-family: "ＭＳ 明朝"; | |||||||||||||||||||
font-family は、全てのタグ（要素）に適用できます。 | |||||||||||||||||||
font-family は、フォント名を指定するプロパティです。 | |||||||||||||||||||
div { font-family: "ＭＳ 明朝", serif; } | |||||||||||||||||||
| |||||||||||||||||||
【フォント名の指定方法】 | |||||||||||||||||||
フォント名の指定には、「フォントファミリ名」で指定する方法と、「総称ファミリ名」で指定する方法があります。 | |||||||||||||||||||
■フォントファミリ名で指定 | |||||||||||||||||||
＊ フォントの具体的な名前で指定する方法です。フォントファミリ名にスペースが含まれる場合は、その名前を引用符で囲む必要があります。
"ＭＳ Ｐゴシック" | |||||||||||||||||||
■総称ファミリ名で指定 | |||||||||||||||||||
＊ ゴシック体系や明朝体系など、フォントの大まかな種類で指定する方法です。次の５種類の値を指定することができます。
sans-serif … ゴシック体系のフォント
serif … 明朝体系のフォント cursive … 筆記体系のフォント fantasy … 装飾系のフォント monospace … 等幅系のフォント | |||||||||||||||||||
※ 日本語のテキストに cursive を指定すると、パソコンの環境によってはそのテキストが正常に表示されなくなる事もあるようです。 | |||||||||||||||||||
■候補の設定 | |||||||||||||||||||
＊ 指定したフォントで表示できない場合に備え、複数の候補を設定しておくことができます。
font-family: 候補１,候補２,候補３; | |||||||||||||||||||
＊ 上記のように、カンマ（ , ）で区切って複数の候補を記述します。この場合、候補１が利用できなければ候補２を利用する、といった流れになります。 | |||||||||||||||||||
＊ 具体的な指定例は次のようになります。（最後の候補には総称ファミリ名を指定しておきましょう）
font-family: "ＭＳ Ｐ明朝","ＭＳ 明朝",serif; | |||||||||||||||||||
| フォント名を指定した場合でも、利用者の環境にそのフォントがインストールされていなければ、指定した通りのフォントでは表示されません。 | |||||||||||||||||||
| ★ 使用例とブラウザでの表示 (c1-5)スタイルシートの書き方（基本）は、こちら です。 | |||||||||||||||||||
| |||||||||||||||||||
※ .c1-5 p の "margin: 8px 0px;" は、<p>タグの上下の余白を 8ピクセルにする指定です。 | |||||||||||||||||||
| 関連するページ | |||||||||||||||||||
| HTML タグページ ：フォントを指定する
HTML タグページ ：基準の文字サイズなどを指定する | |||||||||||||||||||
| スモールキャピタルを指定する(CSS) | |||||||||||||||||||
font-variant: small-caps; | |||||||||||||||||||
font-variant は、全てのタグ（要素）に適用できます。 | |||||||||||||||||||
font-variant は、スモールキャピタルを指定するプロパティです。このプロパティの値に small-caps を指定すると、アルファベットの小文字の部分が「スモールキャピタル」で表示されます。 | |||||||||||||||||||
div { font-variant: small-caps; } | |||||||||||||||||||
| |||||||||||||||||||
| このスタイルの指定は、大文字と小文字を持つフォントに対してのみ有効です。（日本語などの場合は効果がありません） | |||||||||||||||||||
| ★ 使用例とブラウザでの表示 (c1-6)スタイルシートの書き方（基本）は、こちら です。 | |||||||||||||||||||
| |||||||||||||||||||
※ "small-caps" は、アルファベットの小文字の部分が「スモールキャピタル」で表示されます。
※ .c1-6 p の "margin: 8px 0px;" は、<p>タグの上下の余白を 8ピクセルにする指定です。 | |||||||||||||||||||
| フォントの設定をまとめて指定する(CSS) | |||||||||||||||||||||||||||
font: italic *** *** ....; | |||||||||||||||||||||||||||
font は、全てのタグ（要素）に適用できます。 | |||||||||||||||||||||||||||
font は、フォント関連のスタイル（イタリック体、スモールキャピタル、太さ、サイズ、行の高さ、フォント）をまとめて指定するプロパティです。 | |||||||||||||||||||||||||||
div { font: italic normal bold 14pt/120% "ＭＳ Ｐゴシック"; } | |||||||||||||||||||||||||||
| |||||||||||||||||||||||||||
【指定内容】 | |||||||||||||||||||||||||||
| |||||||||||||||||||||||||||
＊ それぞれの値は、半角スペースで区切ります。「行の高さ」を指定する場合は、「サイズ」の後にスラッシュ（ / ）を入れ、その後に記述します。 | |||||||||||||||||||||||||||
＊ 「イタリック体」、「スモールキャピタル」、「太さ」の値は、記述する順序は自由です。「サイズ」、「行の高さ」、「フォント名」は、上記の順序で記述します。 | |||||||||||||||||||||||||||
| ★ 使用例とブラウザでの表示 (c1-7)スタイルシートの書き方（基本）は、こちら です。 | |||||||||||||||||||||||||||
| |||||||||||||||||||||||||||
※ .c1-7 p の "border: 1px blue solid;" は文字を青線で囲う指定で、"margin: 8px 0px;" はボックスの上下に 8px の隙間を空ける働きをしています。 | |||||||||||||||||||||||||||
| 関連するページ | |||||||||||||||||||||||||||
| CSS スタイルシート：行の高さを指定する | |||||||||||||||||||||||||||
| HTML タグページ ：文字のサイズと色を指定する
HTML タグページ ：フォントを指定する
HTML タグページ ：基準の文字サイズなどを指定する
HTML タグページ ：太字にする
HTML タグページ ：イタリック体にする | |||||||||||||||||||||||||||