1. 現在位置:
  2. トップページ
  3. tipsトップ
  4. HTML-タグ
タグ
HTMLHyper Text Markup Language ハイパー・テキスト・マークアップ・ランゲージ
タグ機能用法読み方
<A></A>ハイパーリンクを作る<A HREF="リンク先のファイルの場所とファイル名">クリックする文字や画像</A>アンカータグ(anchor)
<HTML></HTML>HTMLの開始と終了を示すHTMLファイルの先頭と末尾に記述する。エイチティーメムエルタグ
<HEAD></HEAD>HTMLファイルのヘッダーを構成HTMLファイルの設定するタグをこの間に記述する。ヘッダータグ
<TITLE></TITLE>HTMLファイルのタイトルを表示<HEAD></HEAD>の間に記述し、HTMLファイルのタイトルを表示する。タイトルタグ
<BODY></BODY>HTMLファイルの本文を構成<BODY></BODY>の間にHTMLファイルの本文を表示する。ボディタグ
<BR>
終了タグ無し
改行 改行したい位置に記述する。 改行タグ
<H●></H●>見出し文字を表示(見出しの次の行に空白行できる)<H●>見出し</H●>ヘディングタグ
<CENTER></CETER>センタリングする <CENTER>文字列</CENTER> センタータグ
<IMG>
終了タグ無し
インラインイメージを表示する<IMG SRC="画像ファイルのパス(URL)">イメージタグ
<P></P>
終了タグ省略可能
段落をつける。<P>前の段落の文字列</P>
<P>次の段落の文字列</P>
段落タグ
(パラグラフ)
<HR>
終了タグなし
区切り線を引く。<HR SIZE=10>区切り線タグ
(ホリゾンタルルール)
<FONT></FONT>文字にアトリビュートで指定した効果を付ける<FOTN SIZE=2>大きさを変えたい文字列</FONT>フォントタグ
<B></B>文字を太字で表示<B>効果を与えたい文字列</B>ボールドタグ
<I></I>文字を斜体で表示<I>効果を与えたい文字列</I>イタリックタグ
<U></U>文字に下線を付ける<U>効果を与えたい文字列</U>アンダーラインタグ
<STRIKE></STRIKE>取り消し文字にする<STRIKE>効果を与えたい文字列</STRIKE>ストライクタグ
<TABLE></TABLE>表の開始と終わり<TABLE>
<TR><TD>123</TD></TR>
</TABLE>
テーブル
<TR></TR>
終了タグ省略可能
行の開始と終わり<TR><TD>123</TD></TR>テーブルロー
<TD></TD>
終了タグ省略可能
セルの開始と終わり<TD>123</TD>テーブルデータ
<TH></TH>見出し項目セルを指定<TR><TD>123</TD></TR>テーブルヘッダ
<UL></UL>マーク付きリストの開始と終わり<UL>
<LI>項目
</UL>
ユーエル
(アンオーダーデド)
<LI></LI>
終了タグ省略可能
項目の開始<UL>
<LI>項目
</UL>
エルアイ
(リストアイテム)
<OL></OL>番号付きリストの開始と終わり<OL>
<LI>項目
</OL>
オーエル
(オーダーデド)
<LI></LI>
終了タグ省略可能
項目の開始<OL>
<LI>項目
</OL>
エルアイ
(リストアイテム)
<DL></DL>
<DT></DT>終了タグ省略可能
<DD></DD>終了タグ省略可能
解説付きリストの開始と終わり
項目の開始
項目の説明
<DL>
<DT>項目
<DD>項目の説明
</DL>
ディーエル
ディーティー
ディーディー
<FORM></FORM>フォームの開始と終わり<FORM>
<INPUT TYPE="TEXT">
</FORM>
フォーム
<INPUT>
終了タグ無し
インプットフィールドの作成<INPUT TYPE="TEXT">インプット
(インプットフィールド)
<SELECT></SELECT>セレクトメニューの開始と終わり<SELECT NAME="sample">
<OPTION VALUE="koumoku1">項目1
</SELECT>
セレクト
(セレクトメニュー)
<OPTION></OPTION>
終了タグ省略可能
セレクトメニューの項目の作成<OPTION VALUE="koumoku1">オプション
<TEXTAREA></TEXTAREA>テキストエリアの開始と終わり<TEXTAREA NAME="sample" ROWS=3 COLS=30>
</TEXTAREA>
テキストエリア
<META>
終了タグ無し
メタ情報の記述<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">メタ
<!-- -->作業上の備忘録などを表記する。連続ハイフンの間に記述した文字は、ブラウザを通した見た目に影響しない。<!-- -->コメントアウトタグ
アトリビュート(属性)機能用法読み方
HREF=リンク先の場所とファイル名を指定<A HREF="リンク先のファイルの場所とファイル名">クリックする文字や画像</A>エイチアールイーエフ
ALIGN=文字揃えを指定ALIGN=LEFT、CENTER、RIGHTアライン
BGCOLOR=背景色を指定BGCOLOR="#rrggbb"ビージーカラー(バックグラウンドカラー)
TEXT=ページの基本文字色を指定TEXT="#rrggbb"テキスト(テキストカラー)
SRC=画像ファイルのパス(URL)を指定するSRC="画像ファイルのパス(URL)"ソース(の略)
ALIGN=段落の文字揃えを指定<P ALIGN=LEFT、CENTER、RIGHT>アライン
ALIGN=区切り線の揃え方<HR ALIGN=LEFT、CENTER、RIGHT>アライン
ALIGN=セル内の揃え方<TD ALIGN=LEFT>
<TH ALIGN=LEFT>
<TR ALIGN=LEFT>
アライン
ALIGN=LEFT or RIGHT画像と回り込む文字列の配置<IMG SRC=(中略)ALIGN=LEFT>アライン
WIDTH=区切り線の長さ<HR WIDTH=(ピクセル)、(%)>ウィズス
SIZE=区切り線の太さ<HR SIZE=(ピクセル)>サイズ
NOSHADE区切り線の影を消す<HR NOSHADE>ノーシェード
SIZE=文字の大きさを指定<FONT SIZE=2>大きさを変えたい文字列</FONT>サイズ
COLOR=文字の色を指定<FONT COLOR="#00FF00">色を付けたい文字列</FONT>カラー
BACKGROUND=ページの背景イメージを表示する<BODY BACKGROUND="背景にしたい画像ファイルの場所とファイル名">バックグラウンド
LINK=ハイパーリンクの色を指定する<BODY LINK="#rrbbgg">リンクカラー
VLINK=リンク済みのパイパーテキストの色を指定する<BODY VLINK="#rrggbb">ブイリンク
ALINK=リンクの瞬間のパイパーテキストの色を指定する<BODY ALINK="#rrggbb">エイリンク
BORDER=表の罫線の太さ<TABLE BODER=1>ボーダー
WIDTH=表の横幅<TABLE WIDTH=1>ウィズス
CELLPADDING=罫線とセル内データの間隔<TABLE CELLPADDING=10>セルパディング
BGCOLOR=表の背景色<TABLE BGCOLOR="#FFFFCC">ビージーカラー(バックグラウンドカラー)
ROWSPAN=1つのセルに複数行を割り当てる<TD ROWSPAN=2>ロースパン
COLSPAN=1つのセルに複数列を割り当てる<TD COLSPAN=2>コルスパン
VALIGN=セル内の縦方向の揃え方<TD VALIGN=TOP>
<TH VALIGN=TOP>
<TR VALIGN=TOP>
ブイアライン
HEIGHT=セルの高さ<TD HEIGHT=80P>
<TH HEIGHT=80>
ハイト
<A HREF="MAILTO:電子メールアドレス">ハイパーリンクによる電子メールソフトの起動<A HREF="MAILTO:メールアドレス">メイルトゥ
CLEAR=回り込みの中止<BR CLEAR=LEFT>クリア
ALIGN=TOP画像の上端と文章の1行分を揃えて表示<IMG SRC=(中略) ALIGN=TOP>アライン=トップ
ALIGN=MIDDLE画像の中央と文章の1行分を揃えて表示<IMG SRC=(中略) ALIGN=MIDDLE>アライン=ミドル
ALIGN=BOTTOM画像の下端と文章の1行分を揃えて表示<IMG SRC=(中略) ALIGN=BOTTOM>アライン=ボトム
HSPACE=画像左右の間隔<IMG SRC=(中略) HSPACE=10>エイチスペース(ホリゾンタルスペーシング)
VSPACE=画像上下の間隔<IMG SRC=(中略) VSPACE=10>ブイスペース(バーティカルスペーシング)
TYPE=リストのマークの種類を指定
TYPE=DISK・・・●
TYPE=CIRCLE・・・○
TYPE=SQUARE・・・■
<UL TYPE=DISK>
<LI TYPE=DISK>
タイプ
TYPE=リストの数字の種類を指定
TYPE=1・・・1,2,3(アラビア数字)
TYPE=I・・・I,II,III(ローマ大数字)
TYPE=i・・・i,ii,iii(ローマ小数字)
TYPE=A・・・A,B,C(アルファベット大文字)
TYPE=a・・・a,b,c(アルファベット小文字)
<OL TYPE=i>
<LI TYPE=i>
タイプ
START=リストの数字の開始番号の指定
START=3
<OL START=3>スタート
VALUE=リストの数字の開始番号の指定
VALUE=3
<LI VALUE=3>バリュー
ALT=画像に対するコメント<IMG SRC=(中略) ALT="画像の説明">エイエルティー/オルト
<PRE></PRE>整形済みテキスト<PRE>
文字列
文字列
</PRE>
整形済みテキスト
NOWRAPセル内文字列の折り返し禁止<TD NOWRAP>ノーラップ
CELLSPACING=セルとセルの間隔<TABLE CELLSPACING=20>セルスペーシング
TYPE=インプットフィールドの形状の指定<INPUT TYPE="TEXT">タイプ
NAME=インプットフィールドの項目名<INPUT NAME="shimei">ネーム
SIZE=テキストボックスの横幅を半角文字数で指定<INPUT SIZE=20>サイズ
MAXLENGTH=テキストボックスに入力できる最大の半角文字数<INPUT MAXLENGTH=30>マックスレングス
VALUE=テキストボックスにあらかじめ表示しておく文字列<INPUT VALUE="ここに名前を入力">バリュー
SELECTEDあらかじめ選択された項目の指定<OPTION VALUE="koumoku1" SELECTED>セレクテッド
TYPE="RADIO"インプットフィールドをラジオボタンに指定<INPUT TYPE="RADIO">ラジオ
CHECKEDあらかじめ選択された項目の指定<INPUT TYPE="RADIO" CHECKED>チェックド
TYPE="CHECKBOX"インプットフィールドをチェックボックスに指定<INPUT TYPE="CHECKBOX">チェックボックス
CHECKEDあらかじめ選択された項目の指定<INPUT TYPE="CHECKBOX" CHECKED>チェックド
SIZE=リストボックス内の項目の個数<SELECT SIZE=4>サイズ
MULTIPLE複数選択可能化<SELECT MULTIPLE>マルチプル
ROWS=テキストエリアの高さを行数で指定<TEXTAREA ROWS=3 >ローズ
COLS=テキストエリアの横幅を半角文字数で指定<TEXTAREA COLS=30 >コルス
TYPE="SUBMIT"インプットフィールドを実行ボタンに指定<INPUT TYPE="SUBMIT">サブミット
TYPE="RESET"インプットフィールドをリセットボタンに指定<INPUT TYPE="RESET">リセット
METHOD=サーバのフォームの内容解釈の方式を指定<FORM METHOD="POST"メソッド
ACTION=フォームの送信宛先<FORM ACTION="url"アクション
ENCTYPE=フォームの送信時のエンコード方式の指定<FORM ENCTYPE="application/x-www-urlencoded"エンコードタイプ
<A HREF="#url">ページ内の特定の場所へのリンク<A HRFE="#top">エイチアールイーエフ
<A NAME="url">ページ内リンクのターゲット<A NAME="top"ネーム
HTTP-EQUIV=情報の種類を表すHTTP-EQUIV="Content-Type"エイチティーティーピーイクイーブ
CONTENT=HTTP-EQUIV=アトリビュートの情報の種類を表すCONTENT="text/html;charset=Shift_JIS"コンテント
NAME="keywords"キーワードの設定NAME="keywords" CONTENT="キーワード"ネーム
NAME="description"説明文の設定NAME="description" CONTENT="説明文"ネーム