Yahooオークションに関するある掲示版をなんとな〜く眺めていると、こんなフレーズを目にする事があります。
「オークションテンプレートって何?」
「あの文章の枠みたいなのはどうやってやるのですか?」
それに対する回答って結構冷たかったりします。こんな感じです。
「そんな初心者はオークションに出品する資格無し」
「下の方にリンクがあるからクリックしてみてください」
等々です。もちろん中には親切な人もいます。何の為の掲示版なのだか分かりません。
親切に教えてあげれば良いのに・・・
ではお教え致しましょう。
テンプレートとはHTML(ハイパーテキストマークアップラングエッジ)を利用した主にフレーム等から構成される…
ってそんな専門用語使われてしまったら分かりませんよね?
HTML(えいちてぃーえむえる)とは皆さんが閲覧しているサイト(インターネット)に文字や画像を表示させる為の
言語(簡単に言うと命令)です。
例えば、今から私がブラウザ(インターネットエクスプローラ(IE)等)に対して「大文字を表示せよ」と命令しましょう。
そうすると
こんな風に
文字が
大きくなっちゃった!
文字のサイズを大きくする為の命令はこんな風に書いています。
<font size="3">そうすると</font>
<font size="4">こんな風に</font>
<font size="5">文字が</font>
<font size="6">大きくなっちゃった!</font>
人の目には見えない部分でフォントのサイズを指定する命令(=タグと言います)が記されているのです。
ブラウザ(インターネットエクスプローラ(IE)等)は私の命令(タグ)を解析し、大きな文字を表示したのです。
上記命令の 「font size =」
が徐々に大きな数字に変わっていますよね?
この命令の事をタグ(「ただ」じゃないよ「たぐ」だよ)と言いテンプレートを作る為の重要な役割を果たすのです。
タグとテンプレートとどんな関係が有るのでしょう?
実はテンプレートを構成する枠や文字の装飾は実は全てこのタグで囲まれています。
要するにテンプレートはタグがあってこそ表現できるのです。
もう一つ例を挙げてみます。
斜めになれ
<i>斜めになれ</i>
(アルファベットの「アイ」で囲む:イタリックの意味)
下線を引け
<u>下線を引け</u>
(アルファベットの「ユー」で囲む:アンダーラインの意味)
<table border="1"
width="10%">
<tr>
<td width="100%">枠を書け</td>
</tr>
</table>
そろそろ分かって来ましたね?あのテンプレートは(ホームページも)全てこのタグで構成されている為、
綺麗な枠が書いてあったり、色が付いていたりリンクが張られているのです。
オークションテンプレートはホームページの中に埋め込まれた小さなホームページといった感じです。
なぜならYahooのオークションサイトのホームページの真中に埋め込まれていますよね?
↓↓↓
商品説明 |
説明
|
支払方法 |
説明
|
発送方法 |
説明
|
注意事項 |
説明
|
この表示に隠されているタグはこんな感じになります。
<center>
<table BORDER="1" WIDTH="600"
bordercolor="#000000">
<tr>
<td WIDTH="100" ALIGN="center"
BGCOLOR="#ffffff"><font COLOR="#000000"><b>商品説明</b></center></font></td>
<td WIDTH="500" ALIGN="center"
BGCOLOR="#ffffff">
<p ALIGN="left">説明</p>
</td>
</tr>
<tr>
<td WIDTH="100" ALIGN="center"
BGCOLOR="#ffffff"><font COLOR="#000000"><b>支払方法</b></font></center></td>
<td WIDTH="500" ALIGN="center"
BGCOLOR="#ffffff">
<p ALIGN="left">説明</p>
</td>
</tr>
<tr>
<td WIDTH="100" ALIGN="center"
BGCOLOR="#ffffff"><font COLOR="#000000"><b>発送方法</b></font></center></td>
<td WIDTH="500" ALIGN="center"
BGCOLOR="#ffffff">
<p ALIGN="left">説明</p>
</td>
</tr>
<tr>
<td WIDTH="100" ALIGN="center"
BGCOLOR="#ffffff"><font COLOR="#000000"><b>注意事項</b></font></center></td>
<td WIDTH="500" ALIGN="center"
BGCOLOR="#ffffff">
<p ALIGN="left">説明</p>
</td>
</tr>
</table>
</center>
(現段階では意味はわからなくて良いです。難しいと思って逃げないでくださいね。)
ホームページの中のホームページ???意味がわからない方の為に説明を追加致しましょう・・・
ホームページ(サイトの内容)を表示させる為の最小の構成のタグはこうなります。
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
一番大きな枠 <html></html>
で囲み、「HTMLで記されている」と言う表示をする。
ヘッダー部分<head><title>
</title></head> にタイトルを記し、ホームページのタイトルを記す。
ボディー部分<body></body>
にホームページの内容を記す。
ですから、あのテンプレートタグをホームページを表示するような形にするとこうなります。(この単体での表示はこうなります)
<html>
<head>
<title> </title>
</head>
<body>
省略しますがココに上記のタグが記されている
</body>
</html>
Yahooのオークションで表示されているテンプレートはさらに
<html>
<head>
<title> </title>
</head>
<body>
Yahooの情報を表示するタグ
省略しますがココに上記のタグが記されている
Yahooの情報を表示するタグ
</body>
</html>
分かっていただけましたでしょうか?オークション用のテンプレートは色々な表等を表示為のタグなのです。
余談ですが、アドレスバーの最後の「index.html」部分はこのファイルを表示せよと言う命令に基きエクスプローラーがそれを表示しています。この「index.html」ファイルの中身は本当にたくさんのタグで構成されているのです。
雑談
タグって、よく洋服買う時に首の後ろについている値札みたいなやつの事ですよ。アレをレジに持って行ってバーコードで「ピピピ」とやると値段が分かるじゃないですか。洋服と値段を関連づけているのがタグの役割ですね。
HTML言語では文字とその表現方法を関連付けています。
おさらい
ブラウザはホームページを見るためのソフト
HTMLはブラウザに情報を表示させる為の言語語
タグは色々な命令語
オークションテンプレートはオークションサイトのホームページに埋め込まれたタグの内容が表示されているのである
|