HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード
HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)

HTMLタグボードトップ >> ゼロから始めるホームページ作成講座 >> 仕組みを理解しよう >> 主なタグの紹介
お問い合わせはこちら サイトマップはこちら

仕組みを理解しようメニュー
1.ホームページとは
2.HTMLのはたらきと仕組み
3.HTMLタグの基礎
4.主なタグの紹介
5.相対リンクと絶対リンク
6.ファイル名の決め方
7.ファイルの種類

主なタグの紹介 2

[ 1 ] [ 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 bgcolor="#ffffff">1</td>
<td bgcolor="#ffffff">2</td>
<td bgcolor="#ffffff">3</td>
</tr>
<tr>
<td bgcolor="#ffffff">4</td>
<td bgcolor="#ffffff">5</td>
<td bgcolor="#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>はそのままにします。


<< 前のページ 1 2 3 4 5 6 7 8 次のページ >>

画面のトップへ戻る

こんな時どうする?

HTMLのタグについてもっと知りたい


HTMLタグ一覧 (紹介サイトへ)

HTMLタグ辞典 - HTMLタグボード


画面のトップへ戻る

ゼロから始めるホームページ作成講座のトップへ

必要なものを揃えよう
伝えたい情報を考えよう
仕組みを理解しよう
実際に作ってみよう
作ったファイルを公開しよう
製作にあたり注意すべきこと
練習問題にチャレンジ!

訪問者優位のWEBデザインTipsのトップへ

インターネットで小遣い稼ぎのトップへ

今すぐ使える!便利ツールのトップへ