ここで紹介するタグはホームページ作成の上で、特に使用頻度の高いタグですので、その他のタグを参照したい場合はHTMLタグ辞典をご覧ください。
なお、色が薄いタグは紹介はするものの使用すべきではないタグです。
画像を挿入する<IMG>
使用例は「実際に作ってみよう：画像を挿入する」
| 使用タグ | 意味合い | 書き方の例 |
|---|---|---|
| <img src=””> | 画像の場所を指定 | <img src=”./xxx/yy.gif”> |
| <img border=””> | 画像に枠線を付ける | <img border=”1″> |
| <img alt=””> | 画像の代替テキスト | <img alt=”画像”> |
| <img width=””> | 画像の幅をピクセルで指定 | <img width=”100″> |
| <img height=””> | 画像の高さをピクセルで指定 | <img height=”100″> |
| <img hspace=””> | 画像の左右の余白をピクセルで指定 | <img hspace=”10″> |
| <img vspace=””> | 画像の上下の余白をピクセルで指定 | <img vspace=”10″> |
| <img align=””> | 画像の回り込みを指定 | — |
| 上揃え | <img align=”top”> | |
| 中央揃え | <img align=”middle”> | |
| 下揃え（初期の設定はこれ） | <img align=”bottom”> | |
| 左寄せ | <img align=”left”> | |
| 右寄せ | <img align=”right”> |
※画像のIMGタグはタグで閉じない。</img>は必要ありません。
組み合わせ例
画像の回り込みは右寄せ。<img src=”../../img/logo.gif” width=”140″ height=”53″ border=”1″ hspace=”5″ vspace=”5″ align=”right” alt=”トップロゴ”>画像の回り込みは右寄せ。
リンクを指定する<A>
使用例は「実際に作ってみよう：リンクを指定する」
| 使用タグ | 意味合い | 書き方の例 |
|---|---|---|
| <a href=””> | リンク場所を指定 | <a href=”./003.html”> |
| <a name=””> | ラベルを付ける | <a name=”abc”> |
| <a target=””> | ウィンドウの表示方法やラベルへのリンク | — |
| 新しいウィンドウに表示 | <a target=”_blank”> | |
| 同じウィンドウに表示 | <a target=”_self”> | |
| 親フレームに表示 | <a target=”_parent”> | |
| フレームを解除する | <a target=”_top”> | |
| ページ内のラベルへ | <a href=”#abc”> | |
| 違うページのラベルへ | <a href=”./01.html#abc”> |
組み合わせ例
<a href=”#top”>画面のトップへ戻る</a>
表（テーブル）を挿入する<TABLE>
使用例は「実際に作ってみよう：表を作成する」
| 使用タグ | 意味合い | 書き方の例 |
|---|---|---|
| <table> | これから表を挿入する | <table></table> |
| <tr> | 行を指定する | <tr></tr> |
| <td> | 行に対する列を指定する | <td></td> |
組み合わせ例
| 1 | 2 | 3 |
| 4 | 5 | 6 |
<table border=”0″ cellpadding=”10″ cellspacing=”1″ bgcolor=”#999999″>
<tbody>
<tr>
<td style=”background-color: #ffffff;”>1</td>
<td style=”background-color: #ffffff;”>2</td>
<td style=”background-color: #ffffff;”>3</td>
</tr>
<tr>
<td style=”background-color: #ffffff;”>4</td>
<td style=”background-color: #ffffff;”>5</td>
<td style=”background-color: #ffffff;”>6</td>
</tr>
</tbody>
</table>
<tbody>
<tr>
<td style=”background-color: #ffffff;”>1</td>
<td style=”background-color: #ffffff;”>2</td>
<td style=”background-color: #ffffff;”>3</td>
</tr>
<tr>
<td style=”background-color: #ffffff;”>4</td>
<td style=”background-color: #ffffff;”>5</td>
<td style=”background-color: #ffffff;”>6</td>
</tr>
</tbody>
</table>
これら表のタグに設定する属性は以下のようになります。
| 各タグの属性 | 属性の意味 | 書き方の例 | |
|---|---|---|---|
| 表の骨格 <table> | border | 表の枠を指定 （0で枠なし） | border=”1″ |
| width | 表の幅を指定 | width=”500″ | |
| width=”80%” | |||
| height | 表の高さを指定 | height=”500″ | |
| height=”80%” | |||
| cellpadding | セル内の余白を指定 | cellpadding”3″ | |
| cellspacing | 罫線の幅を指定 | cellspacing=”1″ | |
| bgcolor | 表全体の背景色を指定 | bgcolor=”#f5f5f5″ | |
| 表のセル <td> | width | 指定したセルの幅 | width=”300″ |
| width=”100%” | |||
| height | 指定したセルの高さ | height=”250″ | |
| bgcolor | 指定したセルの背景色 | bgcolor=”#ffffff” | |
| align | 指定したセル内の位置揃え （右寄せ/中央寄せ/左寄せ） |
align=”right” | |
| align=”center” | |||
| align=”left” |
※セルとは行と列によって区切られた一つの領域のことです。
※セルの属性は基本的に<td>内に書き、<tr>はそのままにします。
HTMLのタグについてもっと知りたい
HTMLタグ一覧 （紹介サイトへ）
