フォント，テキスト関連のプロパティ

　ブラウザに表示する文字の大きさや色をfontタグの属性として指定することは広く行われていますが，W3Cではfontタグは非推奨になっています。これからはこうした属性は，CSSのプロパティを使って指定するのが望ましいでしょう。

フォント関連
font-family
・字体を指定する
・書式　{ font-family: "family-name", generic-family }
・主な値
　family-name：ＭＳ Ｐ明朝，Courierなど
　generic-family：serif，sans-serif，cursive，fantasy，monospace（等間隔）など。値は""で囲まないこと

font-size
・大きさを指定する
・主な値
　○px（ピクセル数），xx-small，x-small，medium，large，x-large，xx-large

font-style
・斜体を指定する
・主な値
　normal（デフォルト），italic（イタリック），oblique（斜体）

font-weight
・太さを指定する
・主な値
　100～900（100の倍数で指定。大きいほど太い），normal（標準），bold（太い），bolder（親要素のフォントより太い，lighter（親要素のフォントより細い）

font
・フォントに関するプロパティをまとめて指定する
・主な値
　フォント関係のプロパティ値を半角スペースで区切って記述する（font-style font-weight font-size/line-height font-family）。font-sizeとfont-family以外は省略可能

color
・文字など要素の色を指定する
・主な値
　カラーネーム，RGB値


テキスト関係
line-height
・行送りの幅を指定する
・主な値
　○px（文字の高さを含むピクセル数），○em（1文字の高さに対する倍率），○%（1文字の高さに対するパーセント）

letter-spacing
・文字の間隔を指定する
・主な値
　○px（文字の幅を含むピクセル数），○em（1文字の幅に対する倍率），○%（1文字の幅に対するパーセント）

text-align
・テキストのそろえ位置（左右）を指定する
・主な値
　left（左そろえ，デフォルト），right（右そろえ），center（中央そろえ），justify（左右いっぱいに均等割り付け）

vertical-align
・テキストのそろえ位置（上下）を指定する
・主な値
　baseline（通常の位置），bottom（下そろえ），middle（中央），top（上そろえ），sub（下付き文字の位置），super（上付き文字の位置）

float
・画像などが配置されているときに，テキストの回りこみを指定する
・主な値
　right（画像を右に配置するとき），left（画像を左に配置するとき）

clear
・テキスト回り込みの解除を指定する
・主な値
　right（右），left（左）

text-decoration
・テキストの装飾を指定する
・主な値
　none（装飾無し，デフォルト），underline（下線），overline（上線），
　line-through（取り消し線）。同時に複数を指定できる
　※aタグ内部でnoneを指定すると下線を非表示にできる

サンプル1-1●CSSでフォント関係のプロパティを指定したHTML文書とその表示 

<html>
  <head>
    <title>これだけは知っておきたいCSS</title>
    <style type="text/css">
    <!--
    h1{
    font-family:"ＭＳ Ｐ明朝", sans-serif;
    font-size:32;
    font-style:normal;
    font-weight:bold;
    line-height:1.5em;
    color:#FF0000;
    text-align:center;
    }
    h2{
    font-family:"ＭＳ Ｐゴシック", sans-serif;
    font-size:20;
    font-style:italic;
    font-weight:bold;
    line-height:1.5em;
    color:#0000FF;
    text-align:left;
    }
    -->
    </style>
  </head>
  <body>
    <h1>これは大見出しです</h1>
    <div>
      <h2>これは中見出し（１）です</h2>
      <p>ここに中見出し（１）の本文を記述します</p>
    </div>
    <div>
      <h2>これは中見出し（２）です</h2>
      <p>ここに中見出し（２）の本文を記述します</p>
    </div>
  </body>
</html>

サンプル1-2●テキストの装飾を指定した 
<html>
  <head>
    <title>これだけは知っておきたいCSS</title>
  </head>
  <body>
    <p style="text-decoration:underline">下線</p>
    <p style="text-decoration:overline">上線</p>
    <p style="text-decoration:line-through">取り消し線</p>
  </body>
</html>

サンプル1-3●テキストの位置を指定した 
<html>
  <head>
    <title>これだけは知っておきたいCSS</title>
  </head>
  <body>
    <p style="text-align:center">テキストを<br>左右中央に配置します</p>
    <p style="text-align:left">テキストを<br>左そろえで配置します</p>
    <p style="text-align:right">テキストを<br>右そろえで配置します</p>
    <p><img src="0501hyoushi.jpg" alt="日経ソフトウエア1月号表紙" 
style="vertical-align:middle">画像の上下中央の位置にテキストを配置します</p>
  </body>
</html>

サンプル1-4●画像に対するテキストの回り込みを指定した 
<html>
  <head>
    <title>これだけは知っておきたいCSS</title>
  </head>
  <body>
    <p><img src="0501hyoushi.jpg" alt="日経ソフトウエア1月号表紙" 
style="vertical-align:top">floatプロティを指定しないと，ブラウザの縁でテ
キストが折り返されると，画像の下に続きのテキストが表示されてしまいます。
これでは読みにくいですね。</p>
    <p><img src="0501hyoushi.jpg" alt="日経ソフトウエア1月号表紙" 
style="vertical-align:top; float:left">floatプロパティを指定すると，ブラ
ウザの縁でテキストが折り返されると，画像の隣に続きが表示されます。これを
回り込み表示と呼びます。</p>
    <p style="clear:left">clearプロパティで回り込みを解除すると，画像の下
に続きのテキストが表示されます。
  </body>
</html>