CSSで文字・行間２

	では、さっそくスタイルシートの使い方を説明するわね。
	はい、おねがいします！でも難しいんじゃないですか？
	文字・行間の調整だけなら、とっても簡単。まず変更したいページをメモ帳で開いて<head>～</head>の間に↓のように赤文字部分を入力するの。「：」「；」「．」を間違えないようにね。


<head>
<title>Your page</title>
  <META http-equiv="Content-Style-Type" content="text/css">
  <style TYPE="text/css">
  <!--
  td { font-size: 11pt }
  .title { font-size: 13pt }
  -->
  </style>
</head>

	簡単に説明していくわよ。<META http-equiv="Content-Style-Type" content="text/css">は、このページで使うスタイルシート設定にはCSSを使いますという宣言。 <style TYPE="text/css">～</style>は、ここからスタイルシートの設定ですという意味。td { font-size: 11pt } は、ページ中の<td>タグ全部にフォントサイズ11ptを設定。.title { font-size: 13pt } は、「.title」とう名前のクラスにフォントサイズ12ptを設定。
	ということは、そのページの中の<td>タグで囲まれた文章が全部11ptになるってことですよね。えーとクラスは？？
	クラスについては説明するより、やってみたほうがいいわね。前に<table>タグで文章を見やすくしたから、その中の<div>タグにクラスを設定してみましょう。


<table>
  <tr>
    <td>
     <div class="title">タイトル</div>
     文章
    </td>
   <tr>
</table>

	<td>の中の文字サイズがかわりました！<div class="title">で囲んでる部分の文字が大きくなってますね。これがクラスですか？
	そう。<div class="title">は、この<div>タグにクラス名「title」の効果を使うって意味ね。最初に.title { font-size: 13pt; } でクラス名「「title」は文字サイズ13ptって設定したから、その部分が13ptになってるの。
	ところで<div>って何の意味があるんでしょう？
	<div>だけでは意味はないのよ。あえて言うなら<div>～</div>で囲んだ部分を一つのまとまりとして扱うということ。ブラウザー上では</div>の後に改行が入るけどね。ちなみに文章中の一部の文字にスタイルシートを設定する場合は<span>～</span>を利用するといいわね。
	なんとなく、わかりました。

最後に、行間と「.title」に色の設定もして終わりましょ。


  <head>
  <title>Your page</title>
    <style TYPE="text/css">
    <!--
    td { font-size: 11pt; line-height: 140%}
    .title { font-size: 12pt; color: #CC3333}
    -->
    </style>
  </head>

	行間が空きました。140%で指定してるんですね。タイトルの色も変わってます。
	うん、colorっていう属性で色を変えれるの。属性を二つ以上入れる時は「；」を忘れないでね。
	これでページがとても見やすくなりました。ありがとう！
	文字と行間だけの設定ならスタイルシートの設定も難しくないから、どんどん使ってね。それから、ここまで読んでくれた人は必ず次の「CSSを外部ファイルに」も読んでおくようにね。とても重要なことが書いてあるわよ。

あ、面接行くの忘れてた･･･。

	戻る
	Mail / レンタルサーバー：シーサイドネット