※ここの解説は、後になるほど省略されている場合がありますのでできるだけ順番に読んでください。
■ 4.文字の飾り付け
背景色が決まったら次は、文字色や文字の大きさを決めましょう。
文字を修飾するタグは、何種類もありますが、その中で最も単純なタグを最初に記述します。
（太字） <B>Bタグを指定しますと、太字になります。</B>
（強調） <STRONG>STRONGタグを使用しますと強調文字になります。</STRONG>
（斜体） <I>Iタグを指定しますと、斜体になります。</I>
（下線） <U>Uタグを使用しますと下線が付きます。</U>
（取消） <S>Sタグを使用しますと取消線が付きます。</S>
（取消） <STRIKE>STRIKEタグを使用しますと取消線が付きます。</S>
（上付き） SUPタグを使用しますと次のように上付き文字になります。
Windows*11を使用しています。
（下付き） SUBタグを使用しますと次のように下付き文字になります。
log102
したがって「SPAN」タグのスタイル属性で装飾するなどの方法を取ってください。
「SPAN」タグの使用方法はこのページで後述しています。
（太字） → 「<STRONG>」タグを使用する
（斜体） → スタイル属性の「style="font-style: italic;"」を使用する
あるいは、代替方法として「<EM>」タグを使用する
（下線） → スタイル属性の「style="text-decoration: underline;"」を使用する
（取消） → スタイル属性の「style="text-decoration: line-through;"」を使用する
上記のタグは次のように入れ子にすることもできます。
<B><I><U>タグを入れ子にして記述してみました。</U></I></B>
ページ全体の文字色はBODYタグで指定します。
<BODY TEXT="blue"> や
<BODY TEXT="#0000FF"> と記述します。
スタイル属性で指定するなら、
<BODY style="color: blue;"> や
<BODY style="color: #0000FF"> と記述します。
スタイル属性の「color:」で指定するようにしてください。
部分的に指定したいときは、FONTタグやSPANタグを使用します。
以降の記述はすべて「SPAN」タグの方を利用するようにしてください。
<FONT COLOR="blue">
<FONT COLOR="#0000FF">や
<SPAN STYLE="color: blue">
<SPAN STYLE="color: #0000FF">と記述します。
SPANタグを使用しますと文字の背景色を変えることもできます。
<SPAN STYLE="background-color: red">や
<SPAN STYLE="background-color: #FF0000">です。
今までの説明で次のような画面を作成することができます。
太字 斜体 文字色:#FF0066
文字背景色:#FF99FF 文字色:#0000FF
背景に画像を埋め込んだサンプル
文字背景色:#FFFFCC 文字色:#FF0066
また、リンク文字の色指定もBODYタグで指定します。
<BODY LINK="blue" ALINK="red" VLINK="green">や
<BODY LINK="#0000FF" ALINK="#FF0000" VLINK="#008000">と記述します。
それぞれ、LINKは未リンク状態の文字、ALINKはマウスが重なっているときの文字、VLINKはリンク済みの文字の文字色を指定します。
スタイルシートを利用した記述に変更してください。
上記の例は次のように記述できます。
<STYLE type="text/css"> <!-- a{ color: blue; } a:active{ color: red; } a:visited{ color: green; } --> </STYLE> <STYLE type="text/css"> <!-- a{ color: #0000FF; } a:active{ color: #008000; } a:visited{ color: #FF0000; } --> </STYLE>
詳しくは「HTMLの解説」−「15.スタイルシート」をご参照下さい。
※一覧形式のカラーサンプルを作成していますので参考にしてください。
カラーサンプル、文字カラーピッカー、背景カラーピッカー
フル（全色）カラーピッカー
次に、ページ全体の文字の大きさですが、これも、BODYタグかBASEFONTタグで指定します。
<BODY STYLE="font-size: 10pt">や
<BASEFONT SIZE="2">と記述します。
BASEFONTタグもBODY句内で記述し、それ以降の文字に影響を与えます。
10PTとは、10ポイント相当の文字です。
SIZE="2"も10ポイント相当の文字です。
部分的な文字の大きさは、FONTタグで指定します。
<FONT SIZE="2">や
<FONT STYLE="font-size: 10pt">と記述します。
<表示サンプル>
<FONT SIZE="7">SIZE=7</FONT>
<FONT SIZE="6">SIZE=6</FONT>
<FONT SIZE="5">SIZE=5</FONT>
<FONT SIZE="4">SIZE=4</FONT>
<FONT SIZE="3">SIZE=3</FONT>
<FONT SIZE="2">SIZE=2</FONT>
<FONT SIZE="1">SIZE=1</FONT>
したがって「SPAN」タグのスタイル属性で指定するようにしてください。
また、今回の「SIZE」属性のような指定はありませんので別の単位で指定するようになります。
詳しくは「HTMLの解説」−「14.スタイル属性」、「15.スタイルシート」をご参照下さい。
また、次のように標準フォントと比較して1段階大きくや1段階小さくするという指定方法もあります。
この指定は、-7〜+7まで指定することが可能です。
標準がSIZE=2の時、<FONT SIZE="+2">SIZE=4と同じ</FONT>
ただし、上下3段ずつしか変化できません。
<span style="font-size: xx-large; line-height: 1.0em;">3段大きく</span> <span style="font-size: x-large; line-height: 1.0em;">2段大きく</span> <span style="font-size: large; line-height: 1.0em;">1段大きく</span> <span style="font-size: midium; line-height: 1.0em;">同じ大きさ</span> <span style="font-size: small; line-height: 1.0em;">1段小さく</span> <span style="font-size: x-small; line-height: 1.0em;">2段小さく</span> <span style="font-size: xx-small; line-height: 1.0em;">3段小さく</span>
また、一段階大きくしたり、一段階小さくすると言うタグもあります。
<BIG>一段階大きくなる。</BIG>
<SMALL>一段階小さくなる。</SMALL>
見出し文字指定のHタグを使用すると次のようになります。
<H1> H1の文字 </H1>
<H2> H2の文字 </H2>
<H3> H3の文字 </H3>
<H4> H4の文字 </H4>
<H5> H5の文字 </H5>
<H6> H6の文字 </H6>
文字の左揃え・中央揃え・右揃えは、DIVタグかPタグで括ります。
<P align="left"> 左揃えの指定。</P>
<P align="center"> 中央揃えの指定。</P>
<P align="right"> 右揃えの指定。</P>
次のようにスタイル属性の「text-align」を使用しましょう。
<DIV style="text-align: left;"> 左揃えの指定。</DIV> <DIV style="text-align: center;"> 中央揃えの指定。</DIV> <DIV style="text-align: right;"> 右揃えの指定。</DIV> <P style="text-align: left;"> 左揃えの指定。</P> <P style="text-align: center;"> 中央揃えの指定。</P> <P style="text-align: right;"> 右揃えの指定。</P>
Pタグには、段落という意味が含まれているため、上記の表示でもわかるように、Pタグを使用した前後には余分な空白が表示されます。
何も加工したくない場合は、DIVタグを、文章の段落などで区切りたい時はPタグを使用しましょう。
また、文字の中央揃えの場合のみ、CENTERタグという特殊なタグがあります。
次のように「DIV」タグのスタイル属性を使用しましょう。
<DIV style="text-align: center;">
これらのタグは覚えておくと非常に便利で表組みの中の一部分を指定したい時にも使用できます。