color:色;

• 文字色（前景色）を指定する。
• 文字色を指定するときは　背景色　も指定する。
• 例　（いずれも青い文字を指定している）
  color:blue;
  color:#0000FF;
  color:#00F;
  color:rgb(0,0,255);
  color:rgb(0%,0%,100%);

cssソース

BODY {color:#FF9900;background-color:#FFFF33;}

HTMLソース

文字色と背景色はある程度のコントラストをつけて読みやすくしましょう。

font: 〜 ;

• １．　font-style
  ２．　font-variant
  ３．　font-weight
  ４．　font-size　（省略不可）
  ５．　/line-height　（省略可　指定時はスラッシュが前に必要）
  ６．　font-family　（省略不可）
  の順に値をまとめて指定できる。（１．２．３は入れ替え自由　省略可）
• line-height: 〜 ; のみ スラッシュ（/） で区切り、他は半角スペースで区切る。
• 例　：　font:italic bold 12px/20px "ＭＳ 明朝";

cssソース

.eng {font:italic bold 30px/60px Impact,"Comic Sans MS";
      color:white;background-color:gray;}
.ja {font:16px "MS UI Gothic";}

HTMLソース

<P class="eng">ABCDEF<BR>abcdef</P>
<P class="ja">あいうえお<BR>かきくけこ</P>

font-size: 〜 ;

• フォントのサイズを　数値（単位必須）か % か　キーワードで指定。

• 絶対指定キーワード
  • xx-small　　x-small　　small　　medium　　large　　x-large　　xx-large
  • medium が標準サイズ。１段階上がると大きさが1.2倍になる。
• 相対指定キーワード
  • larger　（１段階大きい）　/　smaller　（１段階小さい）
• サイズ指定例
  • キーワード指定はブラウザによって解釈が違うので注意。

cssソース

P.big {font-size:60px;}

HTMLソース

<P class="big">BIG !</P>

font-family: 〜 ;

• フォントの種類を指定。
  コンマ（,）の区切りで複数候補を指定可。
• 例　：　font-family:Verdana,Chicago,sans-serif;
• 詳しくは フォントの種類 のページを参照

cssソース

P {font-family:"Comic Sans MS";font-size:30px;}

HTMLソース

<P>I Love You !</P>

font-weight: 〜 ;

• フォントの太さを　数値 か キーワードで指定。

• キーワード
  • normal　　　・・・　デフォルト　普通の太さ
  • bold　　　・・・　太い
  • bolder　　　・・・　1段階太い
  • lighter　　　・・・　１段階細い
• 数値
  • 100　　200　　300　　400　　500　　600　　700　　800　　900
  • この９種類のみ可。数値が大きいほど太い。400が標準サイズ。
    実際コレだけの太さを用意したフォントはあまりなく、normal　/　bold　ぐらいしか使わない。

cssソース

H3 {font-weight:normal;}

HTMLソース

<H3>H要素など、デフォルトで太く表示する要素に、通常の太さを指定</H3>

font-style: 〜 ;

• フォントのスタイルを指定。

• normal　　　・・・　デフォルト
• italic　　　・・・　イタリック体
• oblique　　　・・・　斜体
• イタリック体の方が同じ斜めでもデザイン性が強いらしい。
  イタリック体や斜体が用意されていないときは標準のものを斜めに傾けて表示。
  （日本語フォントはほとんど用意されていないのでイタリックも斜体も同じが多い）

cssソース

H1 {font-style:italic;}

HTMLソース

<H1>italic</H1>

font-variant: 〜 ;

• フォントをスモールキャップにする。
  小文字の表示形式が小文字サイズの大文字（abcdef）になる。
• normal　（デフォルト）　/　small-caps　（スモールキャップ）

HTMLソース

ABCDEF <SPAN style="font-variant:small-caps;">abcdef</SPAN> abcdef

line-height: 〜 ;

• 行間（行の高さ）を指定する。

• 数値（単位必須）
  • フォントも数値で指定しないと行が重なる恐れアリ。
  • 例　：　line-height:20px;font-size:12px;
• 数字のみ
  • その数字にフォントサイズをかけた値になる。
  • 例　：　line-height:1.7;　　（170% と同じ）
• %
  • いちばん使いやすいかも。
  • 例　：　line-height:180%;
• normal
  • デフォルト。
  • ブラウザが判断。普通は100%。行に隙間がなく、読みにくい。

• ブラウザによって（IE3 など）バグが起きるらしいので注意。
• 画像が文章の間に入っているとこの指定は無視される。
• 一般的に小さめの文字ほど行間を大きくとった方が読みやすい。（130 〜 180% あたり？）
• font: 〜 ;　を使うと、行間 と フォント（文字のサイズ、種類、太さ etc ...）を一括で指定できる。

cssソース

.lh180 {line-height:180%;}
.lh80 {line-height:80%;}

HTMLソース

<P class="lh180">line-height:180%;<BR>あいうえおかきくけこさしすせそたちつてと
<BR>なにぬねのはひふへほまみむめも<BR>やゆよらりるれろわをん</P>

<P class="lh80">line-height:80%;<BR>あいうえおかきくけこさしすせそたちつてと
<BR>なにぬねのはひふへほまみむめも<BR>やゆよらりるれろわをん</P>