<<MENU>>

ファイルに保存

ファイルを開く

文字・大きさ・色

背景色の変更
背景に画像設定

画像の貼り付け

音の貼り付け

表の貼り付け

水平線・色・太さ

記号や番号など

スクロール文字

別ページにリンク

同ページ内リンク

動画の貼り付け

アップロード

HTMLタグ関係

FAQのページへ

Frontpageメニュー

講座トップへ

FrontPage
-番外編:HTML基本タグ集-


前ページへ戻る

このタグ集は基礎編ですが、今後はフォームやフレーム、スタイルシート関係なども別ページを作って解説する予定です。

ただ、基礎編といっても、かなり詳細に解説しているので、「タグは無味乾燥でとてもつまらない」という生徒はフロントページの操作方法を習得することに専念してもよいです。

しかし、タグを理解しているのとそうでないのとを比較すれば、当然知っていた方がよいということだけは十分にわかってほしいと思います。

私はこれまでエディタを用いて直接タグを記述しホームページを作ってきました。しかしながら、今回、授業でフロントページを教えることになり、練習がてら、フロントページ2000を使ってこのページ(前のフロントページの解説ページも含む)を記述してきました。
このようなホームページ作成ソフトは使い込んでくるとかなり便利であることも事実です。しかし、時に応じてタグを直接編集していることもしばしばあります。
何といっても大半のホームページ作成ソフトには直接タグを編集する機能(フロントページならば画面下方のHTMLというタブをクリックすればよい)があるわけで、それだけ直接タグを編集する機会もあるのだということを示しているともいえます。

さぁ、恐れずにタグを使ってみましょう。ワープロさえ打てれば大抵のことはできるようになるものです。


HTMLタグの説明
機能 タグ パラメータ 備考
HTMLの範囲を指定 <HTML>~</HTML> このタグで囲まれた部分がHTML文書であることを宣言します。
ヘッダ部の範囲を指定 <HEAD>~</HEAD>   このタグ内にはHTML文書のファイル情報を記述します。

以下に説明する、タイトルの指定やバックグラウンドサウンドの指定もここに記述します。

タイトルの指定 <TITLE>~</TITLE>   ヘッダ部において記述し、ページのタイトルを設定するときに用います。

ブラウザのタイトルバーやお気に入り、ブックマークなどにタイトルが表示されます。

バックグラウンドサウンドの指定
(MSIEのみ利用可)
<BGSOUND> <BGSOUND SRC="サウンドデータのURL" LOOP="サウンドを鳴らす回数"> このページも上述のタイトル指定と同様にヘッダ部に記述します。

文字通り、ページを表示したときに鳴らすバックグラウンドサウンドを指定します。

左の書式に従い、パラメータ指定することにより、バックグラウンドサウンドとサウンドを鳴らす回数を指定するだけでよいです。
無限ループにするにはLOOP="-1"またはLOOP="INFINITE"と記述すればよいです。

本文の範囲を指定 <BODY>~</BODY> <BODY BGCOLOR="指定色のコード"
BACKGROUND ="背景に使う画像のURL" 
TEXT="指定色のコード"
LINK="指定色のコード" VLINK="指定色のコード">~</BODY> 
文字通り、本文の内容を記述する部分です。

以下に説明するタグは、このボディ部に記述します。

パラメータ指定により、背景の色、背景の画像、文字の色、リンクボタンの色、たどったことのあるリングボタンの色などを変更できます。

注釈文 <!-- ~ -->   このタグ内に入れた文章は、注釈文として解釈されます。

そのため、ブラウザで表示したときにこのタグ内の文章は表示されません。

見出し <Hn>~</Hn> <Hn ALIGN="LEFT/CENTER/RIGHT">
~</Hn>
n=1~6(数字が小さい方が大見出しです。)

ALIGN属性で左寄せ、センタリング、右寄せを指定することができます。

改行 <BR>   強制的に改行するときに用います。
改行の禁止 <BR>~</BR> ウィンドウの端などで行われる自動的な改行を禁止するときに用います。
水平線 <HR> <HR SIZE=n WIDTH="" ALIGN="LEFT/CENTER/RIGHT" COLOR ="指定色のコード" NOSHADE> 水平線を引くときに用います。

パラメータを指定することにより、水平線の太さ、長さ、色などを変えることができます。

SIZE指定のnの値には太さを指定するピクセル単位の数字が入ります。
画面上の1ドットを1ピクセルといいます。

WIDTH指定はピクセル単位、またはウィンドウに対する%表記します。

ALIGN指定は通常は関係しないがウィンドウの幅よりも水平線の幅が小さい場合で、左寄せ、センタリング、右寄せのどの配置にするかを指定するときに利用します。

COLOR=""の指定方法はFONTの項を参照すること。

NOSHADE指定をすると立体感のない罫線を引くことができます。

大きい字 <BIG>~</BIG> このタグ内に入れた文字は大きい字で表示されます。

大きい字の例:これが大きい字です。
小さい字 <I>~</I> このタグ内に入れた文字は小さい字で表示されます。

小さい字の例:これが小さい字です。
太字(ボールド) <B>~</B> このタグ内に入れた文章は太字(太字)で表示されます。

太字の例:これが太字(ボールド)です。
斜体字(イタリック) <I>~</I> このタグ内に入れた文章は斜体字(イタリック)で表示されます。

斜体字の例:これが斜体字(イタリック)です。
下線 <U>~</U> このタグ内に入れた文章には下線が引かれます。
取消線の例:これが下線です。
取消線 <S>~</S> このタグ内に入れた文字には取消線が引かれます。

取消線の例:これが取消線です。
等間隔 <TT>~</TT> このタグ内に入れた文字は等間隔になります。

等間隔の例:これが等間隔です。
上つき添字 <SUP>~</SUP>   このタグ内に入れた文字は上つき添字となります。

上つき添字の例:これは上つき添字です。
下つき添字 <SUB>~</SUB>   このタグ内に入れた文字は下つき添字となります。

下つき添字の例:これは下つき添字です。
スクロール文字
(マーキー)
(MSIEのみ利用可)
<MARQUEE>~</MARQUEE> <MARQUEE


DIRECTION="LEFTまたはRIGHT"





BEHAVIOR="SCROLL、SLIDEまたはALTERNATE"








LOOP="スクロールさせる回数"




SCROLLMOUNT=""



SCROLLDELAY=""



BGCOLOR="指定色のコード"


HEIGHT="スクロール枠の高さのピクセル数またはウィンドウに対する%" 

WIDTH="スクロール枠の幅のピクセル数またはウィンドウに対する%"


ALIGN="TOP、MIDDLEまたはBOTTOM"

HSPACE="スクロール枠の左右の間隔" 

VSPACE="スクロール枠の上下の間隔
>
~</MARQUEE> 
このタグ内に入れた文字はスクロール表示させることができます。

DIRECTION属性でスクロールさせる方向を指定できます。

LEFT :左方向にスロール
RIGHT: 右方向にスクロール

BEHAVIORでスクロールパターンを指定できます。

SCROLL :一定方向にスクロール
SLIDE     :端までスクロールし、
              端で停止
ALTERNATE :端までスクロールし
                    端で方向が変わります

左の書式に従い、パラメータ指定することにより、スクロールさせる文字とスクロールさせる回数を指定するだけでよいです。
無限ループにするにはLOOP="-1"またはLOOP="INFINITE"と記述すればよいです。

SCROLLMOUNT属性を設定することで、テキストを何ピクセル単位で動かすかを指定することができます。

SCROLLDELAY属性を設定することで、テキストを動かす時間間隔を0.1ミリ秒単位で変えることができます。

BGCOLOR属性で背景の色を指定します。

HEIGHT属性を指定すると文字通りスクロール枠の高さを変えることができます。


WIDTH属性を指定すると文字通りスクロール枠の高さを変えることができます。


ALIGN属性はスクロール枠の垂直方向の位置を指定します。

HSPACE属性でスクロール枠の左右の間隔をピクセル数で指定します。

VSPACE属性でスクロール枠の上下の間隔をピクセル数で指定します。
点滅(NNのみ利用可) <BLINK>~</BLINK>   このタグ内に入れた文字を点滅させることができます。
ただしMSIEでは点滅しません。

点滅の例:これが点滅です。 

フォント(1) サイズ指定 <FONT>~</FONT> <FONT SIZE=1~7 COLOR ="指定色のコード" FACE="フォント名">~</FONT> パラメータを指定することにより、このタグ内に入れた文章のフォントの種類、大きさ、色などを変えることができます。

SIZEが小さい方が文字が小さいです。

これがSIZE="1"SIZE
これがSIZE="2"SIZE
これがSIZE="3"SIZE
これがSIZE="4"SIZE
これがSIZE="5"SIZE
これがSIZE="6"SIZE
これがSIZE="7"SIZE
フォント(2) 色の指定 <FONT>~</FONT> <FONT SIZE=1~7 COLOR ="指定色のコード" FACE="フォント名">~</FONT> パラメータを指定することにより、このタグ内に入れた文章のフォントの種類、大きさ、色などを変えることができます。

SIZEが小さい方が文字が小さいです。

これがcolor="black"color
これがcolor="blue"color
これがcolor="red"color
これがcolor="skyblue"color
これがcolor="green"color
これがcolor="cyan"color
これがcolor="yellow"color
これがcolor="white"color

または、color="#rrggbb"の書式で、
赤、緑、青系統の色コードを16進数で表記します。

段落 <P>~</P> <P ALIGN="LEFT/CENTER/RIGHT">
~</P>
このタグで段落を指定します。

画面上では2回改行したように指定されます。

ALIGN指定で左寄せ、センタリング、右寄せを決めることができます。
中央揃え <CENTER>~</CENTER> このタグ内に入れた文章は中央揃え(センタリング)されて表示されます。
入力したままの表示 <PRE>~</PRE> このタグ内に入れた文章等は入力したとおりに表示されます。
例えば、「*」を使って下のようなイラスト(?)や詩などの文章もレイアウト通りに表示できます。
     ***            ***
    *   *          *   *
   *     **********     *
   *                    *
   *                    *
   *    *         *     *
   *        **          *
   *                    *    
    *   ************    * 
     *   *        *    *
      *   *      *    *
        *  ******   * 
          *********
   

これをPREタグを使わないと余分な空白文字(スペース)は削除されてしまうので、下のようになり思っていたようなレイアウトにはならなりません。
ブラウザのソース表示(MSIEならばメニューバーの表示をクリックしてソースを選択する)を行い、ここの記述とブラウザでの表示を確認すること。
*** *** * * * * * ********** * * * * * * * * * * ** * * * * ************ * * * * * * * * * * ****** * *********
引用  <BLOCKQUOTE>

</BLOCKQUOTE>
  このタグ内の文章が引用であることを宣言します。
以下の引用の例のように、前の文章と後ろの文章の間に引用文を入れると前後左右に空白文字(スペース)がつけられて表示されます。

引用の例:
前の文章です。前の文章です。
これは引用の例です。
後ろの文章です。後ろの文章です。
アンカー指定 <A>~</A> <A NAME="アンカーを置く部分の名前">~</A>  このタグ内に入れた文章全体に名前(アンカー名)を付けます。

アンカー名に『#』は不要です。

リンクを張る(1) <A>~</A> <A HREF="#リンク先のアンカー名">~</A>  このタグ内に入れた部分にはリンク先の説明を書きます。

この書式に従って、リンク先のアンカー名を指定します。
このとき『#』をアンカー名の前に付けます。

ブラウザで表示されているここをクリックすると、リンク先に飛ぶことができます。

リンクを張る(2) <A>~</A> <A HREF="リンク先のURL">~</A>  このタグ内に入れた部分にはリンク先の説明を書きます。

この書式に従って、リンク先のURLを指定します。

ブラウザで表示されているここをクリックすると、リンク先に飛ぶことができます。

リンクを張る(3) <A>~</A> <A HREF="リンク先のURL#アンカー名">~</A>  このタグ内に入れた部分にはリンク先の説明を書きます。

この書式に従って、リンク先のURL内のアンカー名を指定します。

このとき『#』をアンカー名の前に付けます。

ブラウザで表示されているここをクリックすると、リンク先に飛ぶことができます。

自動メール指定 <A>~</A> <A HREF="mailto:メールアドレス">~</A>  このタグ内に入れた部分にもリンク先のメールアドレスを書きます。

ブラウザで表示されているここをクリックすると、自動的にメールクライアントソフトが起動する。その後、"mailto:メールアドレス"で指定したメールアドレスに、メールが送れる状態(手紙の内容をかける状態)になります。

画像の表示 <IMG> <IMG SRC="画像データファイルのURL"

LOWSRC="画像データファイルのURL"(NNのみ利用可)









ALIGN="LEFTまたはRIGHT"



HEIGHT="画像の高さのピクセル数またはウィンドウに対する%" 

WIDTH="画像の幅のピクセル数またはウィンドウに対する%"

BORDER="線の太さ(ピクセル数)"

HSPACE="画像の左右の間隔" 

VSPACE="画像の上下の間隔" 

ALT="(画像が表示できないときなどに備えて、画像の代わりに表示させる文字列)">
左の書式に従って表示する画像ファイルを指定します。

LOWSRC指定をすると上述のSRCで指定した画像ファイルを表示する前に、LOWSRC指定したファイルが表示される。LOWSRC指定するファイルにはSRC指定するファイルよりもサイズの小さなものを指定するとよいです。(NNのみ利用可)
最低限画像ファイルの名前だけ指定すればよいので、それ以外の属性は必要に応じて指定します。

ALIGN="LEFT"にすると画像は左に寄せられ、文字がその横に配置されます。

HEIGHT属性を指定すると文字通り画像の高さを変えることができます。

WIDTH属性を指定すると文字通り画像の高さを変えることができます。

BORDER属性を指定すると線の太さを変更することができます。

HSPACE、VSPACEの指定方法はそれぞれの間隔をピクセル数で指定します。

ALT指定をしないと画像が表示されない場合、何がなんだかわからなくなるのでこれは必ず指定します。
リンクボタンの設定    <A HREF="リンク先のURL名"><IMG SRC="画像ファイル名" ALT="画像が表示されないときの説明文"
BORDER="0"
WIDTH="画像ファイルの幅" HEIGHT="画像ファイルの高さ">
</A>

リンクボタンとはホームページ上に貼り付けた画像を押すとリンク先のホームページへ飛ぶことができるように設定した画像のことをいいます。

リンクボタンの設定をするには前述のイメージタグ(<IMG>~</IMG>)を左のようにアンカータグ(<A>~</A>)で囲んで記述します。

リンクボタンの例:
リンクボタンの設定をした以下の画像をクリックすると本校のホームページへ飛ぶようにしてあります。
ブラウザ(MSIEやNNなど)でページに飛び動作の確認後は、『戻る』ボタンを押してここに戻ること。

文化女子大学附属杉並中学校・高等学校のホームページ
クリッカブルマップ(1)
<<イメージマップの定義>>
<MAP>~</MAP> <MAP MAP="イメージマップ名">
<AREA SHAPE="CIRCLE、RECT、POLYGONまたはDEFAULT"
COORDS="X1,Y1,X2,Y2・・・・・"
HREF="リンク先のURL名">
</AREA>
<AREA SHAPE="CIRCLE、RECT、POLYGONまたはDEFAULT"
HREF="リンク先のURL名">
以下繰り返し
</AREA>
</MAP> 
クリッカブルマップを定義するには左のようにMAP属性でイメージマップ名を指定すればよいです。

エリアタグ内のSHAPE属性はマップ範囲をどのように設定するかを記述します。
 CIRCLE   :円形
 RECT      :矩形
 POLYGON:多角形
 DEFAULT :領域外

エリアタグ内のCOORDS属性は座標上の各点、または半径等を指定します。
 CIRCLE   :中心のX,Y,半径
 RECT      :左上のX,Y,右下のX,Y
 POLYGON:頂点1のX,Y,頂点2のX,Y・・・・・・・
 DEFAULT :なし

HREF属性は左の書式通りリンク先のURL名を記述します。
クリッカブルマップ(2) <IMG USEMAP> <IMG USEMAP="#イメージマップ名">  USEMAP属性でイメージマップ名を指定すると、その画像をクリッカブルマップとして利用できます。

クリッカブルマップとは、ホームページ上に貼り付けた画像の中で、ある範囲に指定した部分(複数指定可)をクリックすると、その範囲にあらかじめ定義したリンク先(設定した範囲ごとに指定した別々のリンク先)に飛ぶことができるような画像のことをいいます。

例えば、関東地方の白地図画像をホームページに貼り付け、東京都の部分をクリックすると東京都のことが書かれたページへ飛んだり、神奈川県の部分をクリックすると神奈川県について書かれたページへ飛ぶようなことが指定できます。
テーブル指定(1)
<<テーブルの宣言>>

FRAME属性、RULES属性はNN非対応
<TABLE>~</TABLE> <TABLE 
ALIGN="LEFT、CENTERまたはRIGHT"

HEIGHT="テーブルの高さのピクセル数またはウィンドウに対する%" 

WIDTH="テーブルの幅のピクセル数またはウィンドウに対する%"

BORDER="線の太さ(ピクセル数)"

BORDERCOLOR="指定色のコード"

BGCOLOR="指定色のコード"
BACKGROUND="背景に使う画像のURL"


CELLSPACING="セルとセルとの間隔(ピクセル値)"

CELLPADDING="罫線とセルの内容との間隔(ピクセル値)"

FRAME="BOXまたはVOID、ABOVE、BELOW、HSIDE、VSIDE、LHS、RHS"

RULES="ALLまたはNONE、COLS、ROWS、GROUPS"></TABLE>
一つの表の範囲を指定します。
このタグ内に次のTRタグやTDタグを入れます。

HEIGHT、WIDTH属性の指定はテーブルの高さや幅をピクセル数またはウィンドウに対する%で行います。




BORDER属性は線の太さをピクセル値で指定します。

BORDERCOLOR属性で線の色を指定します。

BGCOLOR属性で背景の色を指定します。


CELLSPACING、CELLPADDINGをピクセル値で指定することにより、セルとセルとの間隔、罫線とセルとの間隔を設定することができます。


FRAME属性を設定することにより外枠の表示形式を変更することができます。

 BOX:外枠をすべて表示
 VOID:外枠をすべて表示
 ABOVE:上のみ表示
 BELOW:下のみ表示
 HSIDE:上下のみ表示
 VSIDE:左右のみ表示
 LHS:左のみ表示
 RHS:右のみ表示

RULES属性で内部の罫線の表示方法を指定することができます。

 
ALL       :すべて表示
 
NONE  :表示しない
 COLS  :垂直方向のみ表示
 ROWS    :水平方向のみ表示
 GROUPS:グループの境界のみ表示

それぞれのタグの使用方法はテーブル指定(4)を参考にすること。
テーブル指定(2)
<<テーブルの表題の宣言>>
<CAPTION>~</CAPTION>  <CAPTION ALIGN="TOPまたはBOTTOM">~</CAPTION> このタグにより、テーブルの表題を記述することがてきます。
ALIGN属性を指定することにより表題の位置をテーブルの先頭かテーブルの最下段かを指定できます。
テーブル指定(3)
<<テーブルの行の宣言>>
<TR>~</TR>

<TR ALIGN="LEFT、CENTERまたはRIGHT"



VALIGN="TOP、CENTERまたはBOTTOM"



BORDERCOLOR="指定色のコード"


BGCOLOR="指定色のコード"


BACKGROUND="背景に使う画像のURL">
</TR>
TABLEタグ内に記述し、表の一行を決定します。
ALIGN属性を指定することにより内容の横の表示位置を左寄せ、センタリング、右寄せのどれかに設定できます。

VALIGN属性を指定することにより内容の横の表示位置を左寄せ、センタリング、右寄せのどれかに設定できます。

BORDERCOLOR属性の指定により、表の罫線色を変更できます。

BGCOLOR属性の指定により、表の背景色を変更できます。

BACKGROUND属性の指定により、表の背景に画像を張り付けることができます。
テーブル指定(4)
<<テーブルのセルの宣言>>
<TD>~</TD> <TD ALIGN="LEFT、CENTERまたはRIGHT"




VALIGN="TOP、CENTERまたはBOTTOM"



HEIGHT="テーブルの高さのピクセル数またはウィンドウに対する%" 

WIDTH="テーブルの幅のピクセル数またはウィンドウに対する%"

BORDERCOLOR="指定色のコード"


BGCOLOR="指定色のコード"


BACKGROUND="背景に使う画像のURL" >


COLSPAN="セルを横方向にまたがるセル数"
RAWSPAN="セルを縦方向にまたがるセル数"

</TD> 
TRタグ内に記述し、表中の一行の各データを指定します。
ALIGN属性を指定することにより内容の横の表示位置を左寄せ、センタリング、右寄せのどれかに設定できます。
VALIGN属性を指定することにより内容の横の表示位置を左寄せ、センタリング、右寄せのどれかに設定できます。

HEIGHT、WIDTH属性の指定はテーブルの高さや幅をピクセル数またはウィンドウに対する%で行います。



BORDERCOLOR属性の指定により、表の罫線色を変更できます。

BGCOLOR属性の指定により、表の背景色を変更できる。

BACKGROUND属性の指定により、表の背景に画像を張り付けることができます。

左の赤で記述したタグは複数のセルを横または縦に結合する機能を持っており、知っていると非常に便利なタグです。
テーブル指定(5)
<<テーブル見出しの宣言>>
<TH>~</TH>  上記のTD属性と同じである。 このタグにより、表の中で見出しにあたるセルを記述します。
テーブル指定(6)
<<テーブル関連タブ概要>>
特に上で説明したような属性を指定しなくても、以下のように記述すれば少なくとも表を記述することができます。

<TABLE BORDER="1"><-----ここからが表であり、線の太さが1ピクセルであるることを宣言
<TR><TD>1行1列目</TD><TD>1行2列目</TD><TD>1行3列目</TD></TR>
<TR><TD>2行1列目</TD><TD>2行2列目</TD><TD>2行3列目</TD></TR>
</TABLE><----ここまでが表であることを宣言

上のタグの記述によるテーブルの表示例
1行1列目 1行2列目 1行3列目
2行1列目 2行2列目 2行3列目

リスト(1)
<<図形つきリスト>>
<UL>~</UL> <UL TYPE="DISC、CIRCLEIまたはSQUARE">
<LI TYPE="TYPE="DISC、CIRCLEIまたはSQUARE">
<LI>
~</UL> 
ULタグで行頭に図形がついたリストを記述できる。リストの各要素はLIタグの後ろに記述する。<LI>で1段落分下がり、</LI>で1段落分上がる。

TYPE属性は行頭につく図形の種類を指定する。
  • で表示(DISC指定)
  • で表示(CIRCLE指定)
  • で表示(SQUARE指定)
TYPE属性がULタグについいたときには全体に、LIタグについたときにはその項目だけの指定になります。

ちなみにこのTYPE属性についての解説はULタグを用いて記述しています。
リスト(2)
<<記号・番号つきリスト>>
<OL>~</OL> <OL TYPE="A、a、1、Iまたはi"
START="番号の初期値">
<LI TYPE="A、a、1、Iまたはi">
<LI>
~</OL> 
OLタグで行頭に番号がついたリストを記述できる。リストの各要素はLIタグの後ろに記述する。<LI>で1段落分下がり、</LI>で1段落分上がります。

TYPE属性は行頭につく番号の種類を指します。
 A:アルファベット大文字で表示
 a:アルファベット小文字で表示
 1:数字で表示
 I:ギリシャ数字大文字(Ⅰ・Ⅱ・Ⅲ)で表示
 i:ギリシャ数字小文字(ⅰ・ⅱ・ⅲ)で表示

TYPE属性がOLタグについいたときには全体に、LIタグについたときにはその項目だけの指定になります。

ちなみに、下の参考文献欄はこのリスト機能を用いています。 
リスト(3)
<<キーワード定義型リスト>> 
<DL>~</DL>
<DL>
<DT>~
<DD>~
</DL>
DLタグを用いて、見出し(用語)とその説明をリストで表すことができます。
説明文のところには字下げが行われます。
DTタグの後ろには見出しを記述、DDタグの後ろには説明文を記述します。
参考文献:
  1. 改訂版HTMLタグ辞典          アンク著    翔泳社(1998.6.15初版第7刷)
  2. FrontPage2000活用ガイド  アイティティ著 技術評論社(1999.08.25初版第1刷)
  3. HTML4.0&スタイルシートリファレンス(DOS/VPOWERREPORT984月号付録) 羽室 響・広野忠敏共著 インプレス(1998.04.01)


課題16のページへ(中学生課題)
課題40のページへ(高校生課題)

最初のページへ