＜ＨＴＭＬ形式の基礎と多少ばかりの応用術２＞

　はい、ども。管理人が所持している知識を出来るだけ表示して、新しくサイトを立ち上げようとされている人のお役に立てたらこれ幸いと願うページ、２枚目です。

　今回は、前回触れる事が出来なかった文字の大きさを変更する方法とリンクの飛ばし方に付いて触れていこうと思います。

　ＷＯＲＤ文章とＨＴＭＬのちょっとした比較もする予定ですので、何かの参考にでもなれば…。

★参考文献★
『ＨＴＭＬタグ辞典　第５版』　著者：(株)アンク　発行：株式会社翔泳社
『ＨＴＭＬ＆ＪａｖａＳｃｒｉｐｔ上級テクニック集』　著者：株式会社Ｃ＆Ｒ研究所　発行：株式会社ナツメ社

いんでっくす。
＜超基本編　文字の大きさの変更方法＞
＜基本編　リンクの方法＞
＜応用編　リンクの方法２＞
＜ちょっとした知識　ＷＯＲＤとＨＴＭＬの違い＞

＜超基本編　文字の大きさの変更方法＞
　文字の大きさを規定するには、２つの方法があります。
　それが、『絶対的なサイズで表す方法』と『基本サイズを中心として幅を持たす方法』です。

０．文字の大きさの変更は何処に入れるのか？
　第１回にて、色の修飾を入れていたタグを覚えておられるでしょうか？
　そこと同じ場所で文字の大きさを規定するのが１つの方法ですね。
　たとえば、文字を大きく赤くしたい場合。

　こう入れています。

★入力する情報
<FONT size="+3" color="red">こう入れています。</FONT>

１．文字の大きさの規定・�@
　これには、最初に触れた通りに２つの方法があります。
　まずは、『絶対的なサイズで表す方法』ですね。
　この場合、上記のsize"*"という定義にて、大きさを指定します。
　この時使用する数値としては、『１〜７』の７段階で、通常のサイズは『３』です。

　サイズ１では、こんな感じです。
　じっぱひとからげ　←入力情報：<FONT size="1">じっぱひとからげ</FONT>

　これをサイズ７で表すとこうなります。
　じっぱひとからげ
　↑入力情報：<FONT size="7">じっぱひとからげ</FONT>

２．文字の大きさの規定・�A
　管理人は、こちらの方法を最近ではよく使います。『基本サイズを中心として幅を持たす方法』。
　元々は、渚姫峰さんから学んだ方法なのですけどね(苦笑)
　この場合もsize="*"にて大きさを定義するのですが、
　基本サイズを『０』とし、数値の幅を『−２〜＋４』で定義します。

　サイズ−２では、こんな感じです。
　じっぱいひとからげ　←入力情報：<FONT size="-2">じっぱひとからげ</FONT>

　サイズ＋４で、こうなります。
　じっぱひとからげ
　↑入力情報：<FONT size="+4">じっぱひとからげ</FONT>

　この様に表示できるサイズは変わらないのですが、基本サイズを『０』で表す�Aの方が理解しやすいかと思います。

３．文字の大きさの定義・�B
　これは、表題などを表す時に使用されている表現です。
�T：<H>…このタグを、通常の段落組みタグである<P>の代わりとして使用します。
　文字の大きさは『１〜６』までで、６が一番小さくなります。

★表記例

★記入方法

注釈：<!--文章-->タグは、前回説明した様に説明の為に付加しているだけですので、文字サイズには関係してきません。

⇒back to いんでっくす。

＜基本編　リンクの方法＞
　リンクの方法として、大きく分けて数種類在ります。
　ここでは、一番基本となるリンクのタグ説明から入ろうと思います。

１．リンクに関連してくるタグ表記
　通常の文章に文字サイズやカラーの修飾を行なう場合、<FONT>タグ内に書き込む事は気付かれている事と思います。
　リンクの際は、この<FONT>タグの役目を下の表記が行ってくれるわけですね。

<A href="リンクするサイトのアドレス">リンクの名前表示</A>

　例えば、私のサイトの表紙にリンクさせて見ます。
　リンク先からは、ブラウザの『戻る』ボタンで戻ってきてください(汗)
★表記例
　私立図書館トラスタジア

★記入方法
　<A href="http://digidigi.fc2web.com/">私立図書館トラスタジア</A>

２．同じサイト内でリンクする場合
　別サイトへのリンクは上記の形式で可能ですが、それが同じサイト内に置かれたものファイルへのリンクである時はこんな感じになります。
　ポイントとしては、そのファイルの名前だけで飛ぶ事が出来る所でしょう。
　リンク先からは、ブラウザの『戻る』ボタンで戻ってきてください(汗)

★表記例
＜ＨＴＭＬ形式の基礎と多少ばかりの応用術＞

★記入方法
<A href="sub8-41.html">＜ＨＴＭＬ形式の基礎と多少ばかりの応用術＞</A>

３．場所を指定して開く
　時々、『このページを読んでもらうのに、こっちのページを参照として使って欲しい』という場合があります。
　そんな場合は、『別ページで開く』ことを定義してやる方法があり、その定義には『target="_blank"』という命令を使用します。
　この定義の利点は『今のページを開きながら新しいページも閲覧できる』ことにありますが、これを過剰に使用すると新しいウィンドウが次々と開き、ちょっと煩わしく取られる事がありますのでご注意下さい。
　私の場合、長編小説を表示する時にキャラクターについても手元に置いて読んでもらいたいと思ったときはこうしていますね。

　今回のリンク先は、上と同じく前回の文章です。
★表記例
＜ＨＴＭＬ形式の基礎と多少ばかりの応用術＞

★記入方法
<A href="sub8-41.html" target="_blank">＜ＨＴＭＬ形式の基礎と多少ばかりの応用術＞</A>

⇒back to いんでっくす。

＜応用編　リンクの方法２＞
　リンクは、なにも他のページに繋げるだけが役割ではありません。
　ここでは、同じページ内でリンクを飛ばす方法を記載していこうと思います。

０．使用するタグ
　このポイントは、リンク先がリンク元と同じ文章の途中である事。
　と言う事は、そのリンクする先に『ここへ飛びます』という目印がないといけない訳ですね。
　この目印の事を『ラベル』と呼びます。
�T：<A href="**"></A>…このページのラベル『**』へリンクを貼るのに使用します。
�U：<A name="#**"></A>…リンク先にラベル『**』を付けます。

　この方法を使用すると、その指定した場所がページの最上段に移動させられます。
　これを使って、縦に長いページを管理してみると利用方法が見えてくるでしょう。

★表記例
『すぐ下の行』に飛びます



『すぐ下の行』

★記入方法
<A href="#tests">『すぐ下の行』に飛びます</A><BR>
<BR>
<BR>
<BR>
<!--行間を空けるために改行を挟んでいます-->
<A name="tests">『すぐ下の行』</A>

　追伸。このページでも多用していますね(苦笑)

＜ちょっとした知識　ＷＯＲＤとＨＴＭＬの違い＞
　ＷＯＲＤ文章とＨＴＭＬ文章の一番の相違点は、前後に付随されている命令の形式です。
　これは、表記する為の基本の文字が『ＷＯＲＤ文章＝ＭＳ明朝』である事に対して『ＨＴＭＬ文章＝テキスト文字』であることに起因します。

　では、どれくらい表記されるかと言うと、こんな感じです。
　左がＷＯＲＤ文章、右がＨＴＭＬ文章となります。

　このように、ＷＯＲＤをＨＴＭＬで表すとそれぞれの行に文字の内容を定義するタグが組み込まれているんですね。
　このおかげで、表の一番下に表示した様に使用バイト数が大きく変わってくるんです。
　ですので、私のサイトでは可能な限りＷＯＲＤ文章は使用しないようにしているんです。私なりの、小さなこだわりですね。
　実際、ＷＯＲＤ文章は重いので表示に時間がかかってしまうんですよ。
　特に一般電話回線（ブロードバンドのように『大容量で行き来する形式』ではない接続）の時などは。

　で、以前はこの書き替えを総て１行ずつ行っていた訳ですが…最近、とんでもなく便利な事をＡＡＡさんに教えていただきまして。
　今では全ＷＯＲＤタグを一括消去する方法で、戴いた文章を処理しています。

⇒back to いんでっくす。

★おまけ★
　色を変えることを駆使すると、時間がかかりますがこんな表示も作る事が出来ます。
　ポイントは、３ずつ色をずらしていく事によって少しずつ変化する色合いを表現している事でしょうかね？

★表記例
グラデーションです。この様に一文字一文字変更する事によってこんな物も作れますので参考までに…

★記入方法
<B><font size="+2">
<font color="#ff0000">グ</font>
<font color="#ff3300">ラ</font>
<font color="#ff6600">デ</font>
<font color="#ff9900">ー</font>
<font color="#ffcc00">シ</font>
<font color="#ffff00">ョ</font>
<font color="#ccff00">ン</font>
<font color="#99ff00">で</font>
<font color="#66ff00">す</font>
<font color="#33ff00">。</font>
<font color="#00ff00">こ</font>
<font color="#00ff33">の</font>
<font color="#00ff66">様</font>
<font color="#00ff99">に</font>
<font color="#00ffcc">一</font>
<font color="#00ffff">文</font>
<font color="#00ccff">字</font>
<font color="#0099ff">一</font>
<font color="#0066ff">文</font>
<font color="#0033ff">字</font>
<font color="#0000ff">変</font>
<font color="#3300ff">更</font>
<font color="#6600ff">す</font>
<font color="#9900ff">る</font>
<font color="#cc00ff">事</font>
<font color="#ff00ff">に</font>
<font color="#ff00cc">よ</font>
<font color="#ff0099">っ</font>
<font color="#ff0066">て</font>
<font color="#ff0033">こ</font>
<font color="#ff0000">ん</font>
<font color="#ff3300">な</font>
<font color="#ff6600">物</font>
<font color="#ff9900">も</font>
<font color="#ffcc00">作</font>
<font color="#ffff00">れ</font>
<font color="#ccff00">ま</font>
<font color="#99ff00">す</font>
<font color="#66ff00">の</font>
<font color="#33ff00">で</font>
<font color="#00ff00">参</font>
<font color="#00ff33">考</font>
<font color="#00ff66">ま</font>
<font color="#00ff99">で</font>
<font color="#00ffcc">に</font>
<font color="#00ffff">…</font></font></B>

　ふぅ。さすがに疲れました(苦笑)

⇒back to いんでっくす。

★参考文献★
『ＨＴＭＬタグ辞典　第５版』　著者：(株)アンク　発行：株式会社翔泳社
『ＨＴＭＬ＆ＪａｖａＳｃｒｉｐｔ上級テクニック集』　著者：株式会社Ｃ＆Ｒ研究所　発行：株式会社ナツメ社