HTMLを理解しタグを操ることで、オークションに掲載する文章を際立たせる事が出来ます。しかし、それにはタグの意味を理解していないといけません。ここでご紹介するタグは基本的なものに過ぎず、オークションでも充分に利用できるものです。覚えておくと便利です。
タグは基本的に
<命令> 命令される文字
</命令終り>
の規則があった事を忘れないでください。一部例外もあります。また、タグは必ず半角で記入してください。
説明 |
タグの記入方法 |
表示例 |
改行 |
ここで改行<br>すると改行される |
ここで改行
すると改行される |
真中に表示 |
<center>真中</center> |
真中 |
段落 |
<p>1段目</p><p>2段目</p>
または
<p>1段目<p>2段目 |
1段目
2段目 |
太字 |
<b>太字</b> |
太字 |
イタリック文字 |
<i>イタリック</i> |
イタリック |
下線 |
<u>下線</u> |
下線 |
リンクを張る |
<a href= "http://
リンク先URL">リンク先</a> |
リンク先 |
画像表示 |
<img src="http://
リンク先URL"> |
|
文字サイズ変更 |
<font size =1>文字サイズ</font> |
文字サイズ(size=1)
文字サイズ(size=2)
文字サイズ(size=3)
文字サイズ(size=4) |
文字色 |
<font color=#000000>文字色</font> |
文字色(#000000)
文字色(#0000FF)
文字色(#00FF00)
文字色(#FF0000)
※3原色で表示 |
表(1行2列) |
<table
border="1">
<tr>
<td>1行1列</td>
<td>1行2列</td>
</tr>
</table> |
※borderは線の太さの指定
|
表(2行2列) |
<table
border="1">
<tr>
<td>1行1列</td>
<td>1行2列</td>
</tr>
<tr>
<td>2行1列</td>
<td>2行2列</td>
</tr>
</table> |
1行1列td>
| 1行2列 |
2行1列td>
| 2行2列 |
|
※
色についての説明です。少々面倒くさいですが…
@
色は3原色レッド・グリーン・ブルー(RGB)で表わされ、各々の混ざり具合で色が決まる
例 赤?% + 緑?% + 青?%
A それぞれの階調(色の濃さ)は256段階である
例 赤64(25%) 赤128(50%)
赤192(75%) 赤256(100%)
B
256の階調は16進数(0〜F迄)2桁で表される
例 16進数 → 0 1 2 3 4 5 6 7 8 9 A(10) B(11) C(12)
D(13) E(14) F(15)
16進数2桁 00(10進数) → 00(16進数)
256(10進数) → FF(16進数)
更に詳しく記すと
10進数 |
0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
… |
128 |
… |
256 |
16進数 |
00 |
01 |
02 |
03 |
04 |
05 |
06 |
07 |
08 |
09 |
0A |
0B |
0C |
0D |
0E |
0F |
10 |
11 |
12 |
… |
80 |
… |
FF |
C 色はRGBそれぞれの2桁の16進数を6桁で表現したもの
例 色 #000000(黒) は R(00) + G(00) +
B(00) で、それぞれの一番暗い階調00を足し合わせた
色 #FFFFFF(白) は R(FF) + G(FF) + B(FF) で、それぞれの一番明るい階調00を足し合わせた
色 #0000FF(青) は R(00) + G(00) + B(FF) で、青のみ一番明るい階調
中でも<table>(テーブル=表)タグは非常に良く使われるので詳しく説明します。
テーブルの中の各々のマスはセルと呼ばれています。
説明 |
タグの記入方法 |
表示例 |
行 |
<tr></tr> |
-
|
列 |
<td></td> |
- |
罫線なし(border="0") |
<table
border="0">
<tr>
<td>1行1列</td>
<td>1行2列</td>
</tr>
</table> |
|
背景色変更(表自体の背景色) |
<table
border="1" bgcolor="#0000FF">
<tr>
<td>1行1列</td>
<td>1行2列</td>
</tr>
</table> |
|
背景色変更(表自体のとセルの背景色) |
<table
border="1" bgcolor="#0000FF">
<tr>
<td bgcolor="#00FFFF">1行1列</td>
<td bgcolor="#FF00FF">1行2列</td>
</tr>
</table> |
|
列を連結する(tdの中でcolspan) |
<table
border="1" bgcolor="#0000FF">
<tr>
<td bgcolor="#00FFFF" colspan="2">A</td>
</tr>
<tr>
<td bgcolor="#00FFFF">B</td>
<td bgcolor="#FF00FF">C</td>
</tr>
</table> |
※2マス分の連結はcolspan=2
|
行を連結する(tdの中でrowspan) |
<table
border="1" bgcolor="#0000FF">
<tr>
<td bgcolor="#00FFFF" rowspan="2">A</td>
<td bgcolor="#FF00FF">B</td>
</tr>
<tr>
<td bgcolor="#FF00FF">C</td>
</tr>
</table> |
|
テーブルサイズセルサイズの指定 |
<table
border="1" width="100" height="100">
<tr>
<td width="50">A</td>
<td width="50">B</td>
</tr>
<tr>
<td width="50">C</td>
<td width="50">D</td>
</tr>
</table> |
※テーブル幅・高さ100ピクセル、セル幅50ピクセル
|
実際にオークションでタグを利用する際は、単体で使用することは殆どありません。以下に複数数のタグを用いた複合型のタグの表示方法を記しますので参考にしてください。タグの組み合わせ次第で非常に綺麗なテンプレートを作る事が出来ます。
説明 |
タグの記入方法 |
表示例 |
表をを真中に表示
<center>と<table>の組み合わせ |
<center>
<table border="1" >
<tr>
<td>1行1列</td>
<td>1行2列</td>
</tr>
</table>
</center>
|
|
段落タグとの複合
align=center等で文字を真中に寄せられる。 |
<center>
<table
border="1" width=80 >
<tr>
<td><p
align=center>1行目</p></td>
</tr>
</table>
</center> |
|
表の中で改行 |
<table
border="1">
<tr>
<td>1行1列<br>表の中で改行したよ</td>
</tr>
</table> |
|
表を真中に表示し |
<center>
<table border="1">
<tr>
<td bgcolor="#00FFFF">商品説明</td>
<td bgcolor="#CCFFFF">綺麗なテーブル</td>
</tr>
</table>
</center> |
|
リンク先を強調(太字) |
<a href= "http://
リンク先URL"><b>リンク先</b></a>
|
リンク先 |
簡単にタグの説明をさせてもらいましたが、HTML言語で使用できるタグはもっとたくさんあります。実際にさらに勉強されたい方は書籍等を参考にしてみてください。
残念な事にオークションで使用できるタグには制限があるため、全て使用出来る訳ではないので注意してください。
タグを練習したい場合はこちらのサイトの練習場をご利用してみてください。
おさらい
タグには色々な種類が有り、その組み合わせで綺麗なテンプレートがつくれるようになる。
|