主要なHTMLタグについて(その2)

ここで紹介するタグはホームページ作成の上で、特に使用頻度の高いタグですので、その他のタグを参照したい場合は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>

これら表のタグに設定する属性は以下のようになります。

各タグの属性 属性の意味 書き方の例
表の骨格 <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タグ一覧 (紹介サイトへ)

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSSを優しく学ぶには

created by Rinker
¥2,178 (2020/09/04 03:50:38時点 Amazon調べ-詳細)

WordPressで簡単にブログを書いてみたい方

最新情報をチェックしよう!