トップ > HTMLの解説

※ここの解説は、後になるほど省略されている場合がありますのでできるだけ順番に読んでください。

■ 4.文字の飾り付け

背景色が決まったら次は、文字色や文字の大きさを決めましょう。

文字を修飾するタグは、何種類もありますが、その中で最も単純なタグを最初に記述します。
(太字) <B>Bタグを指定しますと、太字になります。</B>
(強調) <STRONG>STRONGタグを使用しますと強調文字になります。</STRONG>
(斜体) <I>Iタグを指定しますと、斜体になります。</I>
(下線) <U>Uタグを使用しますと下線が付きます。</U>
(取消) <S>Sタグを使用しますと取消線が付きます。</S>
(取消) <STRIKE>STRIKEタグを使用しますと取消線が付きます。</S>
(上付き) SUPタグを使用しますと次のように上付き文字になります。
  Windows*11を使用しています。
(下付き) SUBタグを使用しますと次のように下付き文字になります。
  log102

これらの多くはHTML4.01で非推奨となっています。
したがって「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"> と記述します。

BODYタグ「TEXT=""」属性HTML4.01で非推奨となっています。
スタイル属性「color:」で指定するようにしてください。

部分的に指定したいときは、FONTタグSPANタグを使用します。

FONTタグHTML4.01で非推奨となっています。
以降の記述はすべて「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">です。

今までの説明で次のような画面を作成することができます。

背景色:#99CCFF
太字 斜体 文字色:#FF0066
文字背景色:#FF99FF 文字色:#0000FF

背景に画像を埋め込んだサンプル

文字背景色:#006600 文字色:#FFFFFF
文字背景色:#FFFFCC 文字色:#FF0066


また、リンク文字の色指定もBODYタグで指定します。

<BODY LINK="blue" ALINK="red" VLINK="green">や
<BODY LINK="#0000FF" ALINK="#FF0000" VLINK="#008000">と記述します。

それぞれ、LINKは未リンク状態の文字、ALINKはマウスが重なっているときの文字、VLINKはリンク済みの文字の文字色を指定します。

BODYタグリンクの文字色HTML4.01で非推奨となっています。
スタイルシートを利用した記述に変更してください。
上記の例は次のように記述できます。
<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>

FONTタグは前述の通り、HTML4.01で非推奨となっています。
したがって「SPAN」タグスタイル属性で指定するようにしてください。
また、今回のSIZE」属性のような指定はありませんので別の単位で指定するようになります。
詳しくは「HTMLの解説」−「14.スタイル属性」、「15.スタイルシート」をご参照下さい。

また、次のように標準フォントと比較して1段階大きくや1段階小さくするという指定方法もあります。
この指定は、-7〜+7まで指定することが可能です。

標準がSIZE=2の時、<FONT SIZE="+2">SIZE=4と同じ</FONT>

上記の記述をスタイル属性で指定する場合、次のように「SIZE」属性の変わりに文字列で指定します。
ただし、上下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タグで括ります。

<DIV align="left"> 左揃えの指定。</DIV>
<DIV align="center"> 中央揃えの指定。</DIV>
<DIV align="right"> 右揃えの指定。</DIV>

<P align="left"> 左揃えの指定。</P>

<P align="center"> 中央揃えの指定。</P>

<P align="right"> 右揃えの指定。</P>

これら「align」属性HTML4.01では非推奨です。
次のようにスタイル属性「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タグという特殊なタグがあります。

<CENTER> 中央揃えの指定。 </CENTER>

「center」タグも非推奨です。
次のように「DIV」タグスタイル属性を使用しましょう。
<DIV style="text-align: center;">

これらのタグは覚えておくと非常に便利で表組みの中の一部分を指定したい時にも使用できます。


page update:2010/01/23 20:32

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom