HTML作成編　2

２.文字関連タグ

まず、文字の大きさを変えてみよう。

■　<h*>～</h*>

*=1～6までの数字を指定、太文字になり上下に改行スペースが空くので見出しなどに使おう。

<hr>に付け加えれる記述

「align=left」　(左に揃える指定)
「align=center」　(中央に揃える指定)
「align=right」　(右に揃える指定)
「align=justify」　(文字列が長いと自動的に折り返す指定)

*が１の時
<h1>The PurPose</h1>
The PurPose

*が２の時
<h2>The PurPose</h2>
The PurPose

*が３の時
<h3>The PurPose</h3>
The PurPose

*が４の時
<h4>The PurPose</h4>
The PurPose

*が５の時
<h5>The PurPose</h5>
The PurPose

*が６の時
<h6>The PurPose</h6>
The PurPose

alignを使用
<h4 align=right>
The PurPose</h4>
The PurPose

■　<font size=*>～</font*>　(*=1～7までの数字を指定)

<font>に付け加えれる記述

「color="#******"」　(色の指定)
「face="*****"」　(書体の指定) いろんなFACEを見てみる

*が１の時
<font size=1>
The PurPose
</font> The PurPose

*が２の時
<font size=2>
The PurPose
</font> The PurPose

*が３の時
<font size=3>
The PurPose
</font> The PurPose

*が４の時
<font size=4>
The PurPose
</font> The PurPose

*が５の時
<font size=5>
The PurPose
</font> The PurPose

*が６の時
<font size=6>
The PurPose
</font> The PurPose

*が７の時
<font size=7>
The PurPose
</font> The PurPose

※ <font>設定では、その他に<basefont size=*>を使った指定方法があります。
1)上の表で見たように 1～7までで、どの大きさを基準にするか決めます。
2)基準fontから「+」「-」を使って大きさを変えます。
<basefont size=4>
ここでは、この大きさを基準としました。<br>
The PurPose<p>
<font size=+1>The PurPose</font><br>
<font size=+2>The PurPose</font><br>
<font size=+3>The PurPose</font><br>
<font size=-1>The PurPose</font><br>
<font size=-2>The PurPose</font><br>
<font size=-3>The PurPose</font><br>

ここでは、この大きさを基準としました。
The PurPose
The PurPose
The PurPose
The PurPose
The PurPose
The PurPose
The PurPose

　■　<small>～</small*>　(少し小さく)
　　　 <big>～</big*>　(少し大きく)

smallの時
<small>The PurPose</small> The PurPose

bigの時
<big>The PurPose</big> The PurPose

次に飾り文字など。

「※」は、反映されないブラウザもある。

- 太文字フォント -
■　<b>～</b>　(太文字)
■　<strong>～</strong>　(強調)
■　<kbd>～</kbd>　(※キーボードのキーとして表示したい場合)

- 斜体フォント -

■　<i>～</i>　(斜体)
■　<em>～</em>　(イタリック)
■　<var>～</var>　(※コードや変数を表したい場合)
■　<cite>～</cite>　(※タイトルイタリック)

- ライン付きフォント -
■　<u>～</u>　(アンダーライン)
■　<s>～</s>　(取り消しライン)

- 等幅フォント -
■　<pre>～</pre>　(プログラムソースを表したい場合)
■　<code>～</code>　(プログラムソースを表したい場合)
■　<address>～</address>　(電子メールアドレスなどを表したい場合)
■　<samp>～</samp>　(※エラー表示などを表したい場合)
■　<tt>～</tt>　(タイプライター的に表したい場合)

太文字フォント

bの時
<b>The PurPose</b> The PurPose

strongの時
<strong>The PurPose</strong> The PurPose

kbdの時
<kbd>A B C D</kbd> A B C D

斜体フォント

iの時
<i>The PurPose</i> The PurPose

emの時
<em>The PurPose</em> The PurPose

varの時
<var>The PurPose</var> The PurPose

citeの時
<cite>The PurPose</cite> The PurPose

ライン付きフォント

uの時
<u>The PurPose</u> The PurPose

sの時
<s>The PurPose</s> ~~The PurPose~~

等幅フォント

preの時
<pre>#00ff00</pre>
#00ff00

codeの時
<code>#00ff00</code> #00ff00

addressの時
<address>
s-tomey@tau.bekkoame.or.jp
</address>
s-tomey@tau.bekkoame.or.jp

sampの時
<samp>Script Errer</samp> Script Errer

ttの時
<tt>Script Errer</tt> Script Errer

※　文字が小さいなど表示結果に不満がある時は、
<b>や<font size=*>を使うといいですよ。　
例：<font size=6><code>#00ff00</code></font>
#00ff00

最後に、文字を動作させてみよう。

■　<marquee>～</marquee>
(文字のスクロール = Internet Explorerのみかもしれない)

<marquee>に付け加えれる記述

「bgcolor="#******"」
　(スクロールする文字のバックの色の指定)
「width=** height=**」
　(スクロールする文字のバックの幅と高さの指定、％指定でも良い)
「loop=**」 (スクロールさせる回数。infiniteと入れると無限)
「scrolldelay=**」
　(スクロールする速さを指定、1000分の1秒単位)
「scrollamount=**」　(スクロールする速さを幅で指定、ドット数)
「align=top」　(画像との組み合わせの時使う)
「align=middle」　　　　(　　〃　　)
「align=bottom」　　　　(　　〃　　)
「hspace=**」　(画像の左右にスペースを付ける)
「vspace=**」　(画像の上下にスペースを付ける)

ここで注意したいことは、太文字<b>を使う時<marquee>の外で囲まないと太文字にならないようです。
<b>
<marquee>
<font size=4>Welcome !! The PurPose</font>
</marquee>
</b>

Welcome !! The PurPose

.

ここでは、もっとカラフルにしサイズも使ってみましょう。
　ここでも、<font color="#******"b>を使う時<marquee>の外で囲まないと色が着かないようです。
※　#000000(黒)は、なぜか色が着きません。
<center>
<b>
<font color="#00ff00" size=6>
<marquee bgcolor="#000011" width=200 height=50>
Welcome !! The PurPose
</marquee>
</font>
</b>
</center>

Welcome !! The PurPose

.

2回だけループさせる。

<center>
<b>
<font color="#00ff00" size=6>
<marquee loop=2 bgcolor="#000011" width=200 height=50>
Welcome !! The PurPose
</marquee>
</font>
</b>
</center>

Welcome !! The PurPose

.

速さを変える。周りの記述は省略します。

1) <marquee scrolldelay=300 bgcolor="#000011" width=200 height=50>
2) <marquee scrollamount=100 bgcolor="#000011" width=200 height=50>

1)※ 1(秒)～1000(1000分の1秒)の数字、よって1が一番早い

Welcome !! The PurPose

2)※ ここは、ドット数なので数字が大きいほど早い

Welcome !! The PurPose

.

画像を使う。その一

1)
<img src="images/purlogo_k.jpg">
<marquee width=200>
Welcome !! The PurPose
</marquee>
2)
<img src="images/purlogo_k.jpg">
<marquee width=200 align=top>
Welcome !! The PurPose
</marquee>
3)
<img src="images/purlogo_k.jpg">
<marquee width=200 align=middle>
Welcome !! The PurPose
</marquee>
4)
<img src="images/purlogo_k.jpg">
<marquee width=200 align=bottom>
Welcome !! The PurPose
</marquee>
5)
<img src="images/purlogo_k.jpg">
<marquee width=200 align=bottom hspace=15>
Welcome !! The PurPose
</marquee>

1) alignの指定なし
Welcome !! The PurPose
2) align=top
Welcome !! The PurPose
3) align=middle
Welcome !! The PurPose
4) align=bottom
Welcome !! The PurPose
5) align=bottom hspace=15
・ここで hspace=**を使って画像とのスペースをあけました。画像の左右にスペースを空ける記述です。
Welcome !! The PurPose
※　IE4では、align=***の指定が効かないようですので、画像タグに指定となります。

画像を使う。その二

1)
<center>
<marquee width=200>
Welcome !! The PurPose
</marquee>
<img src="images/purlogo_k.jpg"><br>
<marquee width=200>
Welcome !! The PurPose
</marquee>
</center>
2)
<center>
<marquee width=200 vspace=10>
Welcome !! The PurPose
</marquee>
<img src="images/purlogo_k.jpg"><br>
<marquee width=200 vspace=10>
Welcome !! The PurPose
</marquee>
</center>

1)

Welcome !! The PurPose

Welcome !! The PurPose

2) 違いか分かるでしょうか vspace=*が入るとスペースが画像の上下にスペースが空きました。

Welcome !! The PurPose

Welcome !! The PurPose

.

■　<blink>～</blink>
(文字の点滅 = Internet Explorerでは動作なし)

<blink>
<font size=5><b>Welcome</b></font>
</blink>

ここは、Nav3.0では、おかしく見えるのでTABLEの外でも表示させます。(Nav4.0bでは、OKだと思います。)
Welcome

Welcome　← Nav3.0の方のために

次のPAGEは、書式関連タグです。

http://www.web-purpose.com/purpose/

Copyright (C) 1997-2005 Tomio Sato. All Rights Reserved.