さて、前のページでは、スタイルシートを使った文字の種類（フォント名）や色や大きさを指定する方法を書きました。
ｆｏｎｔタグとの違いも見てもらいましたね。
そして、スタイルシートではさらにいろいろろ文字に設定をすることが出来ます。
スタイルシートはＨＴＭＬのタグに属性としてこのように書き込みます。
（<span>や<div>のほか、<p>や<table>など、ほとんどのタグに使える。）
<span style="font-family:'ＭＳ Ｐゴシック';font-size:12pt;color:green">あ</span>
あ
↑これを基本にして、さらに詳しい設定を見ていきましょう。
フォントはＭＳ Ｐゴシック、サイズは１２ポイント、色はグリーン。
<span
style="font-family:'ＭＳ Ｐゴシック';font-size:12pt;
font-weight:bold;color:green">あ</span>
あ
太字です。
font-weight:nromal;とすると、普通の字。（何も指定しなければ、普通の字）
◆
<span style="font-family:'ＭＳ Ｐゴシック';font-size:12pt;
font-style:italic;color:green">あ</span>
あ
斜体です。
font-style:normal;で、普通の字です。（何も指定しなければ普通の字）
◆
<span style="font-family:'ＭＳ Ｐゴシック';font-size:12pt;
line-height:100%;color:green">
サイコロＴｏｗｎ！あ<br>
サイコロＴｏｗｎ！あ<br>サイコロＴｏｗｎ！あ<br>サイコロＴｏｗｎ！あ
</span>
サイコロＴｏｗｎ！あ
サイコロＴｏｗｎ！あ
サイコロＴｏｗｎ！あ
サイコロＴｏｗｎ！あ
<span style="font-family:'ＭＳ Ｐゴシック';font-size:12pt;
line-height:160%;color:green">
サイコロＴｏｗｎ！あ<br>
サイコロＴｏｗｎ！あ<br>サイコロＴｏｗｎ！あ<br>サイコロＴｏｗｎ！あ
</span>
サイコロＴｏｗｎ！あ
サイコロＴｏｗｎ！あ
サイコロＴｏｗｎ！あ
サイコロＴｏｗｎ！あ
<span style="font-family:'ＭＳ Ｐゴシック';font-size:12pt;
line-height:50%;color:green">
サイコロＴｏｗｎ！あ<br>
サイコロＴｏｗｎ！あ<br>サイコロＴｏｗｎ！あ<br>サイコロＴｏｗｎ！あ
</span>
サイコロＴｏｗｎ！あ
サイコロＴｏｗｎ！あ
サイコロＴｏｗｎ！あ
サイコロＴｏｗｎ！あ
改行の幅です。１００％以下なら字が重なります。
∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞
以上の設定は、まとめて簡略式に表記することが出来ます。
style="font:font-style font-weight font-size/line-height font-family"
という順番で、その値だけをならべて記述します。
例えば・・・
style="font-family:'ＭＳ Ｐゴシック';font-size:12pt;
font-weight:bold;font-style:italic;
line-height:120%"ならば・・
style="font:bold italic 12pt/120% 'ＭＳ Ｐゴシック'"と、書いても良いです。
∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞
◆
<span style="font-family:'ＭＳ Ｐゴシック';font-size:12pt;
text-decoration:underline;color:green">サイコロ Ｔｏｗｎ！あ</span>
サイコロ Ｔｏｗｎ！あ
アンダーラインを引きます。
text-decoration:none;で、普通の字です。（何も指定しなければ普通の字）
<span style="font-family:'ＭＳ Ｐゴシック';font-size:12pt;
text-decoration:overline;color:green">サイコロ Ｔｏｗｎ！あ</span>
サイコロ Ｔｏｗｎ！あ
上にラインを引きます。
text-decoration:none;で、普通の字です。（何も指定しなければ普通の字）
<span style="font-family:'ＭＳ Ｐゴシック';font-size:12pt;
text-decoration:line-through;color:green">サイコロ Ｔｏｗｎ！あ</span>
サイコロ Ｔｏｗｎ！あ
真ん中にラインを引きます。
text-decoration:none;で、普通の字です。（何も指定しなければ普通の字）
◆
<div style="font-family:'ＭＳ Ｐゴシック';font-size:12pt;
text-indent:1em;color:green">
先頭の一文字が一つ下がる。<br>
と、サイコロＴｏｗｎ！あは、言ったとか。<br>
はたまた、言わなかったとか・・
</div>
先頭の一文字が一つ下がる。
と、サイコロＴｏｗｎ！あは、言ったとか。
はたまた、言わなかったとか・・
1emは、１文字分のこと。
この場合、
<span></span>だと、無効です。
<div></div>か
<p></p>なら、有効。
◆
<div style="margin-left:40px">
１行目と２行目を４０ピクセル右にずらす。<br>
と、サイコロＴｏｗｎ！あは、言ったとか。</div>
はたまた、言わなかったとか・・
１行目と２行目を４０ピクセル右にずらす。
と、サイコロＴｏｗｎ！あは、言ったとか。
はたまた、言わなかったとか・・
<span></span>を使用した場合は、最初の１行のみ指定した分だけ右にずれます。
◆
<div style="font-family:'ＭＳ Ｐゴシック';font-size:12pt;
text-align:center;color:green">
中央寄せ
</div>
中央寄せ
text-align:left;なら左寄せ、
text-align:right;なら右寄せ。
<span></span>では、無効。
スタイルシートはそれ自体、たくさんの文字数を記述することになります。
スタイルシートの記述だけで、数行にわたって書くこともめずらしくありません。
ですから、スタイルシートに対応したＨＴＭＬエディターを使うのが良いでしょう。
そして、次回はスタイルシートの記述を出来るだけ少なくする方法についてです。