alles logo 　
search
ご使用方法はこちらです
入会のご案内 お客様サポート 各種手続き・変更
メンテナンス情報 障害のお知らせ アクセスポイント情報 B-BOX
HTMLタグリファレンス




ここでは基本的なHTMLタグをご紹介します。
HOMEPAGE作ってみよう！


インデックス

基本構造タグ
文字スタイル
文章レイアウト
リストタグ
イメージ表示タグ
リンクタグ
テーブル設定タグ
フレーム設定タグ
その他





●基本構造タグ

<HTML> </HTML> ページ全体を囲むドキュメントタグ。
<HEAD> </HEAD> タイトル情報を記入する部分のタグ。画面には表示されない。
<TITLE> </TITLE> タイトル文を表示するタグ。<HEAD> </HEAD>の間に入れる。ブラウザーのタイトル位置に表示される。
<BODY> </BODY> 本文を表示するタグ。ホームページとして表示される情報は、すべてこのタグに挟まれた部分です。以下は<BODY>タグのアトリビュートです。

・TEXT="#00FF00" テキストの色
・LINK="#FF0000" リンク色の指定
・VLINK="#0000FF" 見たことのあるリンクの色
・ALINK="#FFFF00" リンクをクリックしたときの色
・BGCOLOR="#FFFFFF" ページ背景色の指定
・BACKGROUND="back.gif" 背景に張る画像のURL
<ADDRESS> </ADDRESS> ページの最後にメールアドレスや作成日時、コピーライトの但し書きなどを記入します。
<!--コメント--> 表示させたくないコメントを記入するタグです。
<META> 画面を書き換える指定タグ。

・HTTP-EQUIV="refresh" CONTENT="秒数;URL=指定したページのURL"
　 指定した秒数後に、指定したURLを表示します。

・NAME="情報の種類" CONTENT="情報" 検索ロボット用の情報記述
author（ページの作者）、description（ページ内容の説明）、keywords（ページのキーワード）
<BASE> 本来はファイル名を相対パスで指定する場合の基準となるパス名を指定するためのタグですが、実際はフレームを使用した場合のデフォルトのターゲットウィンドウを指定することが多いようです。
(ｿ
・TARGET="ターゲットウィンドウ名" リンク先を表示させるウィンドウの指定
↑TOP



●文字スタイル

<H1> </H1> 見出しを指定するタグ。6が最小、1が最大の大きさになります。
<FONT> </FONT> 文字の大きさや色を指定するタグ。以下の設定ができます。1が最小、7が最大の大きさになります。

・SIZE="4" 大きさの指定
・COLOR="#0000FF" 色の指定
・FACE="helvetica" 書体の指定
・POINT-SIZE="ポイント数 " 文字の大きさを直接指定
<BASEFONT> ページで基準となるフォントの大きさを指定します。このタグは任意の位置に指定できます。

・SIZE="ポイント数" 1～7の値を指定します。通常は3を指定します。
<B> </B> 太文字の指定
<I> </I> イタリック体の指定
<TT> </TT> 等幅フォントの指定
<SUP> </SUP> 上付き文字
<SUB> </SUB> 下付き文字
<U> </U> アンダーラインをつける
<S> </S> 取消線
<CITE> </CITE> 引用文の指定です。斜体になります。
<CODE> </CODE> プログラムコードに使用します。等幅フォントになります。
<DFN> </DFN> 定義された単語
<EM> </EM> 文字を強調します。どのように強調されるかは、ブラウザーに依存します。
<KBD> </KBD> キーボード入力を記述するときに使用します。等幅フォントになります。
<SAMP> </SAMP> プログラムの出力例などを記述するときに使用します。
<STRONG> </STRONG> <EM>タグよりも文字を強調するために使用します。どのように強調されるかは、ブラウザーに依存します。
<VAR> </VAR> テキストの中で変数を表すときに使います。
<BIG> </BIG> 文字サイズを大きくする指定
<SMALL> </SMALL> 文字サイズを小さくする指定
<BLINK> </BLINK> 文字列を点滅表示させます。
<XMP> </XMP> HTMLで記述した通りに表示されます。このタグを使用すると、<>などの本来タグとして認識してしまう文字をそのまま表示できます。
↑TOP



●文章レイアウト

<BR> 強制改行の指定
<P> 段落の始まりを指定するタグ。1行の空白をいれて改行します。ALIGNを使用する場合は</P>でタグを閉じます。

・ALIGN="left/right/center" 行揃えの指定
<WBR> 弱い改行
<NOBR> </NOBR> 改行の禁止を指定
<DIV> </DIV> 文章の表示位置の指定

・ALIGN="left/right/center" 表示位置の指定
<BLOCKQUOTE> </BLOCKQUOTE> 引用文の指定。引用された部分は字下げされて表示されます。ブロックを目立たせたいときにも使用します。
<HR> 水平線の指定

・SIZE="ピクセル数" 太さの指定
・WIDTH="ピクセル数or %" 長さの指定
・ALIGN="left/center/right" 表示位置の指定
・NOSHADE 影なしの指定
<PRE> </PRE> 入力された通りに表示するタグ。改行、空白、タブがそのまま表示されます。
<CENTER> </CENTER> センタリングの指定
<MARQUEE> </MARQUEE> 電光掲示板のようにスクロールする文字列を表示します。

・WIDTH="ピクセル数or %" 横の長さの指定
・HEIGHT="ピクセル数or %" 縦の長さの指定
・ALIGN="top/middle/bottom" 表示位置の指定
・BEHAVIOR="alternate/scroll/slide" 動作の指定
・BGCOLOR="#FFFFFF" 背景色の指定
・DIRECTION="left/right" 流れる方向
・SCROLLAMOUNT="ピクセル数" 文字列の移動距離
・SCROLLDELAY="ミリ秒" 文字列の表示スピード
・LOOP="回数/infinite" 繰り返す回数
・HSPACE="ピクセル数" マーキーの上下マージン
・VSPACE="ピクセル数" マーキーの左右マージン
・BORDER="ピクセル数" 枠線の幅の指定
<MULTICOL> </MULTICOL> 段組の指定

・COLS="段組の数" 段組の数の指定
・WIDTH="ピクセル数or %" 段組の幅の指定
・GUTTER="ピクセル数" 段組の間隔の指定
<SPACER> 空白の制御

・TYPE="vertical/horizontal/block" タイプ指定
・SIZE="ピクセル数" 幅の指定
・WIDTH="ピクセル数" 横幅の指定(blockの場合)
・HEIGHT="ピクセル数" 縦幅の指定(blockの場合)
・ALIGN="left/center/right" 回り込みの指定(blockの場合)
↑TOP



●リストタグ

<UL> </UL> 番号なしのマーク付き個条書きの指定。disc/square/circleのアトリビュートが指定できます。

・TYPE="disc/square/circle" マークの形を指定します。

（例）
<UL TYPE="disc">
<LI>項目1</LI>
<LI>項目2</LI>
<LI>項目3</LI>
</UL>
<OL> </OL> 番号付き個条書きの指定。"1/A/Ⅰ/"などの数字のスタイルや、 項目の番号をいくつから始めるかなどが指定できます。

・TYPE="1/A/Ⅰ/" 番号のスタイルの指定
・START="開始番号" 開始する番号の指定

（例）
<OL TYPE="1" START="番号">
<LI>項目1</LI>
<LI>項目2</LI>
</OL>
<LI> </LI> <UL>や<OL>タグの各項目の先頭につけるタグです。
<DL> </DL> 用語の説明など、各項目に見出しの付いた個条書きを指定。アトリビュートにCOMPACTを指定すると、見出しの後で改行せずにその横から説明文を始めます。

・COMPACT 改行せずに同じ行に表示されます。

（例）
<DL>
<DT>定義1
<DD>内容の説明文
<DT>定義2
<DD>内容の説明文
</DL>
<DT> <DL>タグの中で見出しを定義するタグです。
<DD> <DL>タグの中で内容説明文を定義するタグです。
↑TOP



●イメージ表示タグ

<IMG> ページ内にイメージを配置するタグです。

・SRC="URL" 画像ファイルのURL
・ALT="表示するテキスト" 画像の代りに表示するテキスト
・WIDTH="ピクセル数or %" 画像の横の長さの指定
・HEIGHT="ピクセル数or %" 画像の縦の長さの指定
・ALIGN="left/center/right/top/middle/bottom" 配置する位置の指定
・BORDER="ピクセル数" 周りを囲む枠線の太さの指定
・HSPACE="ピクセル数" 横方向の空きの指定
・VSPACE="ピクセル数" 縦方向の空きの指定
・LOWSRC="URL" 先に読み込ませるファイルの指定
・USEMAP="#MAP名" イメージマップの指定
↑TOP



●リンクタグ

<A> </A> 他のページとのハイパーリンクを設定するためのタグです。

・HREF="URL" リンク先のURL
・HREF="mailto：メールアドレス" メールウィンドウを開きます。
・HREF="#アンカー名" ファイル内リンクの指定
・NAME="アンカー名" ファイル内リンクのジャンプ先に設定します。
・TARGET="フレーム名" どのフレームに表示させるかの指定
・TARGET="_blank" 新しいウィンドウに表示
・TARGET="_self" クリックされたフレームに表示
・TARGET="_parent" 1つ上のフレームに表示
・TARGET="_top" ウィンドウ全体に表示
　　　
ファイル内リンクをする場合は次のようになります。
・<A HREF="#アンカー名">はじめに</A> スイッチ側
・<A NAME="アンカー名"> <H3> はじめに </H3> </A> ジャンプ先
↑TOP



●テーブル設定タグ

<TABLE> </TABLE> 表組を表示させるタグです。

・BORDER="ピクセル数" 枠線の太さの指定
・WIDTH="ピクセル数or %" 表の横の長さの指定
・HEIGHT="ピクセル数or %" 表の縦の長さの指定
・CELLPADDING="ピクセル数" テキストとセルの間隔
・CELLSPACING="ピクセル数" セルの区切り枠の太さ
・ALIGN="top/middle/bottom/left/center/right" 表示位置の指定
・VSPACE="ピクセル数" 縦方向のスペース
・HSPACE="ピクセル数" 横方向のスペース
・BGCOLOR="#00FF00" セルの背景色
・BACKGROUND="背景画像のURL" 表全体に貼込む画像の指定
・BORDERCOLOR="#00FF00" 外枠の色指定
<TR> </TR> 行の定義をするタグです。

・ALIGN="left/center/right" セル内のテキスト表示位置
・VALIGN="top/middle/bottom" セル内のテキスト表示位置
・BGCOLOR="#FF0000" セルの背景色
<TD> </TD> セル（列）の定義をするタグです。

・ALIGN="left/center/right" セル内のテキスト表示位置
・VALIGN="top/middle/bottom" セル内のテキスト表示位置
・WIDTH="ピクセル数or ％" セル幅の指定
・HEIGHT="ピクセル数or％" セルの高さの指定
・COLSPAN="3" 横（列）にまたがるセル
・ROWSPAN="3" 縦（行）にまたがるセル
・NOWRAP セル内のテキスト改行禁止
・BGCOLOR="#0000FF" セルの背景色
・BACKGROUND="背景画像のURL" セルに貼込む画像の指定
<CAPTION> </CAPTION> 表題を表すタグです。

・ALIGN="top/bottom" キャプションの位置
※テーブル作成例

（例1）
<TABLE BORDER WIDTH="300" HEIGHT="150">
<TR ALIGN="center"><TH>見出し1 　<TH>見出し2 　<TH>見出し3
<TR ALIGN="center"><TD>データ1-1 <TD>データ2-1 <TD>データ3-1
<TR ALIGN="center"><TD>データ1-2 <TD>データ2-2 <TD>データ3-2
</TABLE>

（例2）
<TABLE BORDER="5" WIDTH="300" HEIGHT="150">
<TR ALIGN="center">
<TH ROWSPAN="3">大見出し <TH>見出し1　<TH>見出し2　<TH>見出し3
<TR ALIGN="left">　<TD>データ1-1　<TD>データ2-1　<TD>データ3-1
<TR ALIGN="left">　<TD>データ1-2　<TD>データ2-2　<TD>データ3-2
</TABLE>

（例3）
<TABLE BORDER="5" WIDTH="300" HEIGHT="150">
<TR ALIGN="center"><TH COLSPAN="3">大見出し
<TR ALIGN="center"><TH>見出し1 <TH>見出し2 <TH>見出し3
<TR ALIGN="left">　<TD>データ1-1 <TD>データ2-1 <TD>データ3-1
<TR ALIGN="left">　<TD>データ1-2 <TD>データ2-2 <TD>データ3-2
</TABLE>
↑TOP



●フレームタグ

<FRAMESET> </FRAMESET> フレームを定義するタグです。このタグを使用する場合は、<BODY> </BODY>タグは使用できません。

・COLS="150,*" 画面を縦に分割
・ROWS="400,*" 画面を横に分割
・FRAMEBORDER="yes/no" 境界線の表示指定
・BORDER="ピクセル数" 境界線の太さの指定
・BORDERCOLOR="#00FF00" 境界線の色指定
<FRAME> 個々のフレームの指定

・SRC="URL" 表示するページのURL
・NAME="名前" フレームの名前
・MARGINWIDTH=" ピクセル数"フレーム内の左右のマージン
・MARGINHEIGHT=" ピクセル数"フレーム内の上下のマージン
・SCROLLING="yes/no/auto" スクロールバーの表示の指定
・NORESIZE フレームサイズの変更禁止
・FRAMEBORDER="yes/no" 境界線を立体的にするかどうか
・BORDERCOLOR="#00FF00" 境界線の色指定
<NOFRAMES> </NOFRAMES> フレーム機能を使用できないブラウザ用のテキスト表示
※フレーム作成例

◇左右に分割
<FRAMESET COLS="150,*">
<FRAME SRC="menu.html" NAME="f1" SCROLLING="auto" NORESIZE>
<FRAME SRC="text.html" NAME="f2" SCROLLING="auto">
</FRAMESET>

◇上下に分割
<FRAMESET ROWS="400,*">
<FRAME SRC="text.html" NAME="f1" SCROLLING="auto">
<FRAME SRC="menu.html" NAME="f2" SCROLLING="auto" >
</FRAMESET>
↑TOP



●その他

<BGSOUND> 背景でサウンドを鳴らす。

・SRC="URL" サウンドファイルのURL
・LOOP="回数" 演奏回数の指定
<EMBED> </ENBED> ShockwaveやVRMLなどのオブジェクトを埋め込むためのタグです。

・SRC="URL" オブジェクトのURL
・WIDTH="ピクセル数" 表示領域の幅
・HEIGHT="ピクセル数" 表示領域の高さ
・ALIGN="left/center/right/top/middle/bottom" 表示位置の指定
・BORDER="ピクセル数" 外枠の太さ
・FRAMEBORDER="no" "no"を指定すると枠がなくなります。
・HIDDEN="false/true" 表示をするかしないかの指定
・HSPACE="ピクセル数" 横方向のスペース
・VSPACE="ピクセル数" 縦方向のスペース
・NAME="名前" オブジェクトの名前
・PLUGINSPACE="URL" プラグインのダウンロード先のURL
・TYPE="mimeタイプ" プラグインのMIMEタイプの指定
・PALETTE="foreground/background" パレットの設定
・TEXTFOCUS="onMouse/onStart/never" キー入力の設定
<NOEMBED></NOEMBED> <EMBED>タグをサポートしていない場合や、プラグインがインストールされていない環境でメッセージを表示する。
<SCRIPT> </SCRIPT> スクリプトを記述するためのタグです。

・LANGUAGE="JavaScript" スクリプト名の定義
・SRC="ファイル名（URL）" 拡張子に.isを持つファイル名の指定
<NOSCRIPT> </NOSCRIPT> JavaScriptが動作しない環境や、<SCRIPT>タグがサポートされていない環境でメッセージを表示します。
↑TOP




＜HOME ＜ B-BOX INDEX
Copyright (C) ejworks corporation All rights reserved