<文字を表示しよう>

 ホームページの内容というのは、ほとんどが文字と画像です。
そこで、ここでは文字の表示について学んでみましょう。

 まず、<BODY>タグの次の行に”こんにちは”と入力してファイルを保存し、ブラウザで見てみましょう。

<BODY>
こんにちは
</BODY>

 画面の左上に”こんにちは”と表示されましたね。

 次に”こんにちは”の後ろで改行して”さようなら”と入力し、同じように保存してブラウザで見てみましょう。

<BODY>
こんにちは
さようなら
</BODY>

 ”こんにちはさようなら”と表示されましたね。HTMLで改行しても表示では改行されていません。基本的にHTMLの記述で改行は何の意味も無いのです。
 それでは、改行して表示させるにはどうしたら良いのでしょう。
それには<BR>というタグを使います。基本事項の所でタグは2個1組と説明しましたが、この<BR>タグは単独で使用します。そして、改行したい所に記述します。

<BODY>
こんにちは<BR>
さようなら
</BODY>

 今度はちゃんと改行されましたね。

 次に”こんにちは”の上に<!-- 文字の記述 -->と入れてみましょう。”文字の記述”以外は半角文字です。

<BODY>
<!-- 文字の記述 -->
こんにちは<BR>
さようなら
</BODY>

 ブラウザで見てもさっきと変わりませんね。実は”<!-- ”から” -->”の間はコメントとして扱われ、ブラウザには反映されません。ですから、後で自分がドキュメントを直すときにわかり易い様にコメントを書いておく事が出来ます。

 今度はこの様に書いてみましょう。

<BODY>
<!-- 文字の記述 -->
<P>こんにちは</P>
<P>さようなら</P>
<P>また明日</P>
</BODY>

 それぞれの文章の前後が1行空きましたね。<P></P>は段落を設定するタグなのです。<BR>タグと合わせて次のような使い方が出来ます。

<BODY>
<!-- 文字の記述 -->
<P>こんにちは</P>
<P>さようなら</P>
<P>また明日<BR>よろしくね</P>
</BODY>

 次はこうしてみましょう。

<BODY>
<!-- 文字の記述 -->
<P ALIGN="CENTER">こんにちは</P>
<P ALIGN="RIGHT">さようなら</P>
<CENTER>また明日<BR>よろしくね</CENTER>
</BODY>

 ”こんにちは”が画面の横中央に、”さようなら”が画面の右端に、”また明日”と”よろしくね”が画面の横中央に表示されましたね。”P”の後半角でスペースを空けて記入してある”ALIGN="CENTER"”というのは”P”タグのオプションです。この様にタグには色々なオプションを付けることによって様々な効果を得る事が出来ます。この場合は、この段落を画面の横中央に表示するという意味です。次の”ALIGN="RIGHT"”も同じように右端に表示するという意味です。次の<CENTER></CENTER>はその間に記述してあるものを画面の横中央に表示するという意味のタグです。ですから、3行目は

<CENTER><P>こんにちは</P></CENTER>

と記述しても意味は同じです。

 さあ、いかがでしょう。だいぶ慣れてきましたか?
ここからは、文字表示に関してどのような事が出来るのかを説明して行きます。
サンプルのHTMLを記述してその表示のされ方を確認してみましょう。

●文字大きさを変える

 <FONT SIZE=○></FONT>を使います。○は1から7までの数字で大きい数字ほど表示が大きくなります。

<FONT SIZE=1>一番小さいサイズ</FONT><BR>
<FONT SIZE=7>一番大きいサイズ</FONT>

 または、<BASEFONT SIZE=○><FONT SIZE=±○>を使います。

<BASEFONT SIZE=3>これが基本のサイズになります</FONT><BR>
<FONT SIZE=+3>3段階大きなサイズ</FONT><BR>
<FONT SIZE=-3>3段階小さなサイズ</FONT>

●色々な文字効果をつける

 次のように色々な効果を付ける事が出来ます。

これが基本の文字です<BR>
<B>これは太字</B><BR>
<I>これは斜体</I><BR>
<S>これは取消線</S><BR>
<STRIKE>これも取消線</STRIKE><BR>
<U>これはアンダーライン</U><BR>
これは<SUP>上につく</SUP>文字<BR>
これは<SUB>下につく</SUB>文字<BR>
<BLINK>これは点滅(Netscapeのみ)</BLINK><BR>
<MARQUEE>これは左右にスクロールするマーキー
(Internet Explorer)</MARQUEE><BR>
<MARQUEE DIRECTION="LEFT" BEHAVIOR="ALTERNATE">マーキーのオプション</MARQUEE>

 どうですか、これだけでも文字の表示に幅が出てきますね。
上のタグの中で<MARQUEE></MARQUEE>には次のようなオプションがあります。

DIRECTION="LEFT","RIGHT"・・・スクロール(移動する)方向を指定[左,右]
BEHAVIOR="SCROLL","SLIDE","ALTERNATE"・・・移動種類[通常,端で止まる,端まで行って戻る]
BGCOLOR="色指定"・・・背景に色をつける[色名かRGB指定](※色指定に関しては次で説明します。)
LOOP="INFINITE","任意の数値"・・・繰り返しの数[無限,その回数]
SCROLLDERAY="時間(ミリ秒)"・・・再描画までの時間
SCROLLMOUNT="距離(ピクセル)"・・・再描画までの距離
WIDTH="数値","%"・・・横幅の指定[ピクセル,ウインドウ横幅に対する割合]
HEIGHT="数値","%"・・・縦幅の指定[ピクセル,ウインドウ縦幅に対する割合]
HSPACE="数値"・・・横方向の余白[ピクセル]
VSPACE="数値"・・・縦方向の余白[ピクセル]
ALIGN="TOP","MIDDLE","BOTTOM"・・・文字の垂直方向の位置指定[上,真中,下]

●文字に色をつける

 文字に色をつけるには<FONT>〜</FONT>タグでオプション設定をします。

<FONT COLOR="#FF0000">これは赤色です</FONT><BR>
<FONT COLOR="RED">これも赤色です</FONT><BR>
<FONT SIZE=3 COLOR="#008000">これはサイズ3で緑色です</FONT><BR>
<FONT SIZE=3 COLOR="GREEN">これもサイズ3で緑色です</FONT>

 この”#”(必ず付ける)以下の英数字はRGB値(16進表記)と言って、左から2桁づつ”赤(R)”,”緑(G)”,”青(B)”の指定になっており、それぞれ”00”から”FF”までの256通りづつの組み合わせで色を表現しています。また、2行目や4行目の指定のように色の英語表記でも指定する事が出来ます。気に入った色名が分かっているならこの指定で良いでしょうし、RGB値を色々変えて色を探すのも面白いと思います。

●見出しをつける

 <H*></H*>(*は1から7の数字)で見出しを設定する事が出来ます。”1”が一番大きい文字になり、すべて太字で前後に1行ずつ空きます。

<H1>1番大きい見出し</H1><BR>
<H2>2番目に大きい見出し</H2><BR>
<H7>1番小さい見出し</H7>

 このタグには”ALIGN”オプションが使えます(LEFT,CENTER,RIGHT)ので試してみましょう。
 ここで注意したいのは、このタグはあくまでも「見出し」を設定する為のものであって、普通の文章の文字サイズを変えるものではないということです。普通の文章の文字サイズを変えるには上記の<FONT>タグや<B>タグを使ってください。

●書体を変える

 ホームページは、なにも指定していなければ使用するブラウザで設定してある標準フォント(書体)で表示されます。これを他のフォントで表示するように指定できます。

<FONT FACE="Comic Sans MS,MS 明朝,FA ぽぽる">FONT FACE</FONT>

 この様にコンマで区切って複数指定できますが、この場合左にあるフォントのほうが優先順位が高く、そのフォントが無い場合に次のフォントが適用されます。ここで注意しなければならないのが、フォントはホームページを見る人のコンピュータにセットされていなければならないという事です。ホームページを作成しているあなたのコンピュータにそのフォントがセットされていてもそのホームページを見る不特定多数の人のコンピュータには必ずしもセットされているとは限らないという事を認識する必要があります。


メニュー / 基礎 / 文字 / 装飾 / 画像 / リンク / テーブル / フレーム / フォーム / ステップ