HTMLタグを理解する

 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>
1行1列 1行2列
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列 1行2列
2行1列 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>
1行1列 1行2列
背景色変更(表自体の背景色) <table border="1" bgcolor="#0000FF">
<tr>
<td>
1行1列</td>
<td>
1行2列</td>
</tr>
</table>
1行1列 1行2列
背景色変更(表自体のとセルの背景色) <table border="1" bgcolor="#0000FF">
<tr>
<td bgcolor="#00FFFF">
1行1列</td>
<td bgcolor="#FF00FF">
1行2列</td>
</tr>
</table>
1行1列 1行2列
列を連結する(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>
A
B C

※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>
A B
C

 

テーブルサイズセルサイズの指定 <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>
A B
C D
※テーブル幅・高さ100ピクセル、セル幅50ピクセル

実際にオークションでタグを利用する際は、単体で使用することは殆どありません。以下に複数数のタグを用いた複合型のタグの表示方法を記しますので参考にしてください。タグの組み合わせ次第で非常に綺麗なテンプレートを作る事が出来ます。

説明

タグの記入方法

表示例

表をを真中に表示
<center>と<table>の組み合わせ
<center>
<table border="1" >
<tr>
<td>
1行1列</td>
<td>
1行2列</td>
</tr>
</table>
</center>
1行1列 1行2列
段落タグとの複合
align=center等で文字を真中に寄せられる。
<center>
<table border="1" width=80 >
<tr>
<td>
<p align=center>1行目</p></td>
</tr>
</table>
</center>

1行目

表の中で改行 <table border="1">
<tr>
<td>
1行1列<br>表の中で改行したよ</td>
</tr>
</table>
1行1列
表の中で改行したよ
表を真中に表示し <center>
<table border="1">
<tr>
<td bgcolor=
"#00FFFF">商品説明</td>
<td bgcolor=
"#CCFFFF">綺麗なテーブル</td>
</tr>
</table>

</center>
商品説明 綺麗なテーブル
リンク先を強調(太字)
<a href= "
http:// リンク先URL"><b>リンク先</b></a>
リンク先

 簡単にタグの説明をさせてもらいましたが、HTML言語で使用できるタグはもっとたくさんあります。実際にさらに勉強されたい方は書籍等を参考にしてみてください。
残念な事にオークションで使用できるタグには制限があるため、全て使用出来る訳ではないので注意してください。

タグを練習したい場合はこちらのサイトの練習場をご利用してみてください。


おさらい


タグには色々な種類が有り、その組み合わせで綺麗なテンプレートがつくれるようになる。

 

戻る

 

 

 

 

 

 

 

 

 

 

 

SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送