タグで遊ぼう

「今日から使えるタグ講座」

インターネットでWEBサーフィンをしていて文字の色やサイズ、フォントすら変えてあるページを見たことはありませんか？
時には掲示板の掻き込みで、他の方の投稿文とは一味異なった文字使いの書込みは？
他にも、他のページへどうやってリンクしてるか、不思議に思った事は？

これらは全てタグと呼ばれる、一種の「コマンド（命令）」を使っているからです。
WEBではこのタグを用いる事で、豊かな表現を実現しています。
もちろん、美しくレイアウトされたWEBを作成するには、複雑なタグを用なければいけませんが、
「ちょっと文字を強調したい」って程度の事であれば、複雑なタグは必要有りません。
ここでは「すぐに使える」をテーマに、簡単なタグの使い方を紹介していきます。

1.タグの書き方

1.1基本

1.2引数

2.文字で遊ぶ・・・タグ

2.1色を変える

2.2サイズを変える

2.2.1サイズを指定して変える

2.2.2相対指定で変える

2.2.3タグで変える

2.3字体を変える

2.3.1タグで変える

3.リンクを張っちゃえ・・・<A>タグ

3.1「リンク」とは？

3.2リンクのはりかた

4.補足

4.1カラーパレット

1.タグの書き方

タグの種類は多数あり、しかも拡張されていますので、それらを全て覚えるのは至難の業です。しかし記述方法そのモノは非常に簡単ですので、誰でもすぐに覚えられます。ここでは記述の仕方について、簡単に説明します。

1.1基本

HTMLという言葉を聞いた事はありますね。HTMLとはHyper Texst Markup Languageと言う、ぺージ記述言語の一種です。
乱暴な言い方をすれば、「コンピュータへの命令の集まり」と言っても良いでしょう。
つまり命令な訳ですから、その記述は必ず「何々に対して、何々せよ」という形になります。「何々せよ」の命令部分がタグとして記述される部分になります。そして、「何々に対して」の先頭に命令を書き、その命令が終える部分にも「命令はここで終わりだよ」と示してやります。

「この文章はセンターに割りつけられます。」

こんな一文があったとします。しかしこれでは、センターへの割りつけがなされていません。何故でしょう？
そう、割りつけを命じるタグが記述されていないからです。

「この文章はまん中に割りつけられます」

今度はどうですか？ちゃんとセンターに割りつけられていますね。この様に表示させるには、以下の様に記述します。

<CENTER>「この文章はまん中に割りつけられます」</CENTER>

これの意味は「<CENTER>と</CENTER>に囲まれた部分を、センターに割りつけなさい」って意味です。つまり<CENTER>で命令が発行されて、</CENTER>で命令が終了する事になります。
この様にタグは以下の書式で記述される事が、決められています。

<タグ> タグで制御される部分 </タグ>

タグを記述する際には、これが基本となりますのでしっかりと覚えて置いて下さい。

1.2引数

「タグは命令」であることは。理解頂けたでしょうか。さて、命令でも単純な命令ならば「何々しろ」で済みますが、もう少しえれがんとに実行させたい事がありませすね。
例えば「髪を切れ」と命令するとします。しかし「切れ」だけではどれくらいの長さに切るのかが判りませんね。そこで「襟足は短く」とか「前髪は眉位」等と注文をつける訳なんですが、この注文の部分を「引数」と言います。
「引数」については、次章の「文字で遊ぶ」で実例を使って説明しますので、ここでは

「引数とは、命令に対する注文」と覚えて置いて下さい。

2.文字で遊ぼう

ここでは、フォントの扱いについて説明します。文字の色や大きさを変えたりするには、FONTタグを用います。
FONTタグは、その機能から必ず引数（属性）を指定します。この引数の指定によって、文字の色や書体を変更するだけでも、豊かな表現が可能になるんですよ。
掲示板への書込みでもすぐに使えるテクニックですし、自分のサイトを運用するようになると、使用頻度の高さNo1のタグですから、是非マスターして下さいね。
なお、このサイトに設置された掲示板は、タグの利用が可能な掲示板ですから、いろいろと試して見て下さいね。

2.1色を変える

フォントタグで最も多く用いられる引数が、この表示色を変える「COLOR」でしょう。引数の表記形式にはカラーコードと、カラーネームで指定する方法の、二種類があります。どちらの方法でも使いやすい方で指定すれば良いのですが、それぞれ一長一短があります。

  ・カラーコードでの指定の仕方

    RGB（Red Green Blue 光の三原色）の割合を、16進数で指定します。
    記述の仕方は以下の通り。例は「タグ」の文字を青色で表示させます。

        <FONT COLOR=#0000FF>タグ</FONT> → タグ


  ・カラーネームでの指定の仕方
    各色ごとに指定された「色の名前」で指定します。
    このとき、色の名前を「"（ダブルクォーテーション）」で囲むのを忘れないで下さい。
    記述方法は以下の通り。カラーコードの場合と比べて見て下さい。

        <FONT COLOR="blue">タグ</FONT> → タグ

どんな色がどういう名前であるか？とか、使いたい色のカラーコードが知りたいといった場合は、カラーパレットを用意しましたので、参考にしてください。

さて、ここで出て来たの「COLORの部分が、引数（属性）の指定になります。
「」の定義の解釈は、「COLORで指定された色で、文字（FONT）を表示しなさい」という意味になります。
最初のほうで出て来た「<CENTER>」タグでは、引数を用いる事は有りません（CENTERが引数に使われる事はあります）が、「FONT」タグでは文字に対し何らかの処理を行わせるタグですから、引数（属性）の指定は必須となります。

2.2文字のサイズを変える

文字の大きさを変更する方法は、実に様々な方法がありますが主に三種類の方法が使われます。

・文字表示サイズの変更方法

フォントタグの引数（属性）で、サイズを明示する。
フォントタグの引数（属性）で、相対サイズを指定する。
タグを用いて変更する。

フォントタグの引数（属性）にはSIZEを用います。
以下、それぞれの方法について説明して行きます。

2.2.1サイズを指定して変える

WEBブラウザーでは、文字のサイズを7段階に変化させる事が可能です。1～7のうち「 3」が基準値となり、文字を大きくしたい場合には4～7を、小さくしたい場合には1～2をSIZEの後に指定してやります。

サイズ指定の例

文字を大きくしたい時
文字の大きさ → 文字の大きさ
文字の大きさ → 文字の大きさ
文字の大きさ → 文字の大きさ
文字の大きさ → 文字の大きさ

文字を小さくしたい場合
文字の大きさ → 文字の大きさ
文字の大きさ → 文字の大きさ

2.2.1サイズを相対指定して変える

2.2.2で紹介した方法は、文字サイズを1～7の七段階で絶対指定する方法でした。
文字サイズの変更にはもう一つ、基準となる文字サイズに対する、相対指定でも可能です。
ちょっと、話がややこしくなりますが、お付き合い下さい。

WEBブラウザーで基準となる文字サイズは<BASEFONT>で指定されます。
しかし現在、一般に用いられるWEBブラウザーでは、この<BASEFONT>タグでの指定が無かった場合には、文字サイズは七段階の3が自動で指定されます。
相対指定とは、この基準サイズに対してちょっと大きくとかちょっと小さくしたい時に使えます。
以下の例は、基準サイズを4としてサイズを相対指定しています。

基準サイズは「4」

文字の大きさ → 文字の大きさ（SIZE=7相当）
文字の大きさ → 文字の大きさ（SIZE=6相当）
文字の大きさ → 文字の大きさ（SIZE=5相当）
文字の大きさ → 文字の大きさ（SIZE=3相当このページ全体の基準サイズ）
文字の大きさ → 文字の大きさ（SIZE=2相当）
文字の大きさ → 文字の大きさ（SIZE=1相当）

2.2.3タグで変える

今まではフォントに対して都度、大きさを指定して来ましたが論理スタイルと呼ばれるタグを用いる事によって、文字のサイズを変えます。
これは、スタイルシートで定義しておくと、とても便利なタグなんですがこの「定義」をミスると、ワチャワチャになります。（笑）
もっとも、スタイルシートを使っていなくても便利に使えますので、覚えておいて損はありません。

文字を大きくする<BIG>タグ→<BIG>大きく</BIG>
文字を小さくするタグ→小さく

2.3書体を変える

文字列を表示するのに、色や大きさの他にはこのように書体を変化させる方法も有ります。
書体を変化させるには、タグを用いる方法と、タグを用いる方法の二種類がありますが、タグを用いる方法が一般的です。
理由はタグを利用する場合、タグの「FACE」属性を用いて表示フォントを指定します。
ところがWEBを閲覧している人のコンピュータに、指定されたフォントが入っていなければブラウザーは、そのフォント指定を無視して標準に指定されたフォントで表示するように、設計されていますので日本語環境ではゴシック体と明朝体程度しか、指定できないと考えて良いでしょう。

2.3.1タグで書体を変える

タグを用いて書体を変えるには、以下のタグが利用できます。

タグ記述機能

B 文字 強調（ボールド）します

I 文字 斜体（イタリック）で表示

S <S>文字</S> 削除線を付けます。こんな漢字感じ

TT <TT>文字</TT> 等幅フォントで表示します
等幅フォントで表示します

3.リンクを張る

WEBをお散歩していて面白いサイト等を見つけた時、誰かにそれを教えてあげたいですよね？
仲間うちなら電子メールの同報機能（ccメール）で知らせる事もできますが、掲示板ならより多くの人に知らせる事ができます。
ここでは、リンクの張り方を覚えてみましょう。

注》<A>（アンカータグ）の使用を禁じた掲示板も数多く有るので注意。

3.1リンクとは？

「リンク（Link）」とは英語で「鎖の輪、連結（装置）、連鎖」を意味し、動詞としては「つなぐ、連結する」事を表しています。
コンピュータやWWW（World Wide Web）では、ファイルの実体に対するシンボルとの関連付けを「リンクする」と呼んでいます。
ちょっと乱暴な例えですが、本の目次と本文の関係と言えるでしょう。

3.2リンクの張り方

こおこまで進んで来た方なら、大体の書式はおわかりだと思います。アンカータグの属性には「HREF」を用いてリンクさせたいURLを指定し、文字列をアンカータグで挟みます。

<A HREF="http://homepage1.nifty.com/himadin/">あほなぺーじ</A>見つけた→あほなページ見つけた

また掲示板では使えませんが（使う方法はあるけど）、画像にもリンクを設定できます。
よく「リンクにはこのバナーをお使い下さい」等とありますよね。WEBサイトを開設するとリンクの設定は必須項目ですから、こちらも説明しておきます。
と言っても、そんなに難しくはありません。上の例で「あほなページ」の部分を画像ファイルに置き換えるだけです。

<A HREF="http://homepage1.nifty.com/himadin/"><IMG SRC="画像ファイルのありか></A>→

以上で「タグで遊ぼう」を終わりますが、いかがでしたでしょうか？
よろしかったら、感想・御意見・リクエスト等を質問箱へ書込んで頂けると嬉しいです。
特に「ここの意味が判らんぢょ～」なご意見は大歓迎です。

「PCの部屋」へ戻る

タグ	記述	機能
B	<B>文字</B>	強調（ボールド）します
I	<I>文字</I>	斜体（イタリック）で表示
S	<S>文字</S>	削除線を付けます。こんな漢字感じ
TT	<TT>文字</TT>	`等幅フォントで表示します` 等幅フォントで表示します