このコンテンツは、実例サンプルでみる用途別HTMLタグの解説と、
フォントや特種文字の表示サンプル、カラーチャートなど、
HTMLに関する初心者向けの情報を総合的に扱っています。
( HyperText Markup Language )
の略で、( World Wide Web Consortium )
というADDRESS, BLOCKQUOTE, CENTER, DIV, FORM, H1~H6, HR, NOFRAMES, OL, P, PRE, TABLE, UL
A, ACRONYM, B, BIG, BR, BUTTON, CITE, CODE, EM, FONT, I, IFRAME, IMG, INPUT, OBJECT, S, SELECT, SMALL, SPAN, STRONG, SUB, SUP, TEXTAREA, TT, U, VAR
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML> <HEAD> 最初に読み込まれる部分。 文章の情報やスタイルシート、JavaScriptなど。 </HEAD> <BODY> 実際ブラウザに表示される文章の内容。 </BODY> </HTML>
<TITLE>秋のホームページ</TITLE>
<!--コメント-->
<ADDRESS>秋@管理人</ADDRESS>
<META http-equiv="refresh" content="秒数">
<META http-equiv="refresh" content="秒数;URL=http://~">
<META http-equiv="Site-OUT" content="RevealTrans(Duration=2,Transition=23)"> <META http-equiv="Page-Enter" content="RevealTrans(Duration=2,Transition=23)"> <META http-equiv="Page-Exit" content="RevealTrans(Duration=2,Transition=23)">
<H4>見出し</H4>
<P align="center">段落</P>
段落
改行<BR>する
<PRE>入力した とおりに 表示</PRE>
入力した とおりに 表示
<BLOCKQUOTE> HTMLとは( HyperText Markup Language ) の略で、<BR>
タグという手段を使ってPCが情報を読めるようにできる言語です。 </BLOCKQUOTE>
HTMLとは( HyperText Markup Language ) の略で、
タグという手段を使ってPCが情報を読めるようにできる言語です。
<EM>強調</EM>
<STRONG>より強い強調</STRONG>
<SUP>上付き</SUP>文字
<SUB>下付き</SUB>文字
<DEL>打ち消し線</DEL>
<BLINK>点滅</BLINK>
<MARQUEE direction="left" behavior="scroll">スクロール文字</MARQUEE>
<BODY bgcolor="色">
文章
</BODY>
<BODY background="URL">
文章
</BODY>
<BODY text="色" link="色" vlink="色" alink="色">
文章
</BODY>
<FONT color="red">文字</FONT>
<DIV align="right">文字</DIV>
こんな<HR size="3" color="red" width="80%" align="right">かんじ
<BODY oncontextmenu="return false">
<BODY onselectstart="return false">
<FONT size="1">フォントの大きさ</FONT> <FONT size="7">フォントの大きさ</FONT>
<FONT face="HG正楷書体-PRO">正楷書体</FONT>
<B>太字</B> <I>斜体</I> <S>抹消線</S> <TT>等幅</TT> <U>下線</U> <BIG>直前の文字より大きめ</BIG> <SMALL>直前の文字より小さめ</SMALL>
<UL type="square"> <LI>酒</LI> <LI>たばこ</LI> <LI>女</LI> </UL>
<OL type="1"> <LI>酒</LI> <LI>たばこ</LI> <LI>女</LI> </OL>
<DL> <DT>アルコール飲料</DT> <DD>一般的に『お酒』といわれ、日本酒やウィスキーなどがある。</DD> </DL>
<IMG src="banner02.gif" width="88" height="31" border="0" alt="バナー">
<A href="index.html" target="_self">HTML</A>
<A href="mailto:aki2nd@yahoo.co.jp">管理人にメール</A>
<FORM action="mailto:aki2nd@yahoo.co.jp" method="post" enctype="text/plain"> 名前<INPUT type="text" size="20" name="Name"><BR> 題名<INPUT type="text" size="20" name="Subject"><BR> 内容<BR> <TEXTAREA cols="50" rows="5" name="contents"></TEXTAREA><BR> <INPUT type="submit" value="送信"><INPUT type="reset" value="リセット"> </FORM>
<TABLE width="200" height="" border="1" bordercolor="red" bgcolor="yellow" cellSpacing="0" cellpadding="5"> <TR><TH>たばこ</TH><TH>値段</TH></TR> <TR><TD>マルボロ</TD><TD>280円</TD></TR> <TR><TD>ラーク</TD><TD>250円</TD></TR> </TABLE>
たばこ | 値段 |
---|---|
マルボロ | 280円 |
ラーク | 250円 |
※表は<TABLE>~</TABLE>内に設定します。 ※要素<TR>で横の行を定義。 ※要素<TD>でセル内のデータを定義。 ※要素<TH>で見出しを定義。セル内で、文字は太字でセンタリングされる。 ※<TABLE>内の属性width、heightで表の大きさを指定。 ※<TABLE>内の属性borderで枠の太さを指定。 ※<TABLE>内の属性bordercolorで枠の色を指定。 ※<TABLE>内の属性bgcolorで背景色を設定。 ※<TABLE>内の属性cellSpacingでセルとセルの間隔を設定。 ※<TABLE>内の属性cellpaddingでセルとセル内の内容との間隔を設定。
<TABLE background="bg.gif" border="1" cellpadding="25"> <TR> <TD>マルボロ</TD> <TD>280円</TD> </TR> </TABLE>
マルボロ | 280円 |
※<TABLE>内の属性backgroundで背景画像(URL)を指定。
<EMBED src="html.mid" autostart="false" repeat="false" width="200" height="45"> </EMBED>
※属性srcで音楽ファイルのURLを指定。 ※属性autostartでページを開いたとき自動的に再生するかを指定。 属性値は他に"true"で自動再生。 ※属性repeatで繰り返し再生するかどうかを指定。 属性値は他に"true"で繰り返し再生。 ※属性width、heightでプラグインのパネルの大きさを指定。 属性値は"ピクセル"。
<IFRAME name="update" src="URL~" frameBorder="1" width="300" height="90" scrolling="yes"> </IFRAME>
※属性nameはフレーム名。リンクからのtarget先に使用される。 ※属性srcはフレーム内に表示される内容で、属性値は"ページのURL"。 ※属性frameBorderはフレームの枠で、属性値"0"で非表示。 ※属性width、heightはフレームの幅。属性値は"ピクセル"か"%"。 ※属性scrollingはスクロールの指定で、 属性値"yes"は可能、属性値"no"は不可能、 属性値"auto"でデフォルト(必要に応じて)。
Colornameをご参照ください。
#000000 | #000033 | #000066 | #000099 | #0000aa | #0000cc | #0000ff |
#003300 | #003333 | #003366 | #003399 | #0033aa | #0033cc | #0033ff |
#006600 | #006633 | #006666 | #006699 | #0066aa | #0066cc | #0066ff |
#009900 | #009933 | #009966 | #009999 | #0099aa | #0099cc | #0099ff |
#00aa00 | #00aa33 | #00aa66 | #00aa99 | #00aaaa | #00aacc | #00aaff |
#00cc00 | #00cc33 | #00cc66 | #00cc99 | #00ccaa | #00cccc | #00ccff |
#00ff00 | #00ff33 | #00ff66 | #00ff99 | #00ffaa | #00ffcc | #00ffff |
#330000 | #330033 | #330066 | #330099 | #3300aa | #3300cc | #3300ff |
#333300 | #333333 | #333366 | #333399 | #3333aa | #3333cc | #3333ff |
#336600 | #336633 | #336666 | #336699 | #3366aa | #3366cc | #3366ff |
#339900 | #339933 | #339966 | #339999 | #3399aa | #3399cc | #3399ff |
#33aa00 | #33aa33 | #33aa66 | #33aa99 | #33aaaa | #33aacc | #33aaff |
#33cc00 | #33cc33 | #33cc66 | #33cc99 | #33ccaa | #33cccc | #33ccff |
#33ff00 | #33ff33 | #33ff66 | #33ff99 | #33ffaa | #33ffcc | #33ffff |
#660000 | #660033 | #660066 | #660099 | #6600aa | #6600cc | #6600ff |
#663300 | #663333 | #663366 | #663399 | #6633aa | #6633cc | #6633ff |
#666600 | #666633 | #666666 | #666699 | #6666aa | #6666cc | #6666ff |
#669900 | #669933 | #669966 | #669999 | #6699aa | #6699cc | #6699ff |
#66aa00 | #66aa33 | #66aa66 | #66aa99 | #66aaaa | #66aacc | #66aaff |
#66cc00 | #66cc33 | #66cc66 | #66cc99 | #66ccaa | #66cccc | #66ccff |
#66ff00 | #66ff33 | #66ff66 | #66ff99 | #66ffaa | #66ffcc | #66ffff |
#990000 | #990033 | #990066 | #990099 | #9900aa | #9900cc | #9900ff |
#993300 | #993333 | #993366 | #993399 | #9933aa | #9933cc | #9933ff |
#996600 | #996633 | #996666 | #996699 | #9966aa | #9966cc | #9966ff |
#999900 | #999933 | #999966 | #999999 | #9999aa | #9999cc | #9999ff |
#99aa00 | #99aa33 | #99aa66 | #99aa99 | #99aaaa | #99aacc | #99aaff |
#99cc00 | #99cc33 | #99cc66 | #99cc99 | #99ccaa | #99cccc | #99ccff |
#99ff00 | #99ff33 | #99ff66 | #99ff99 | #99ffaa | #99ffcc | #99ffff |
#aa0000 | #aa0033 | #aa0066 | #aa0099 | #aa00aa | #aa00cc | #aa00ff |
#aa3300 | #aa3333 | #aa3366 | #aa3399 | #aa33aa | #aa33cc | #aa33ff |
#aa6600 | #aa6633 | #aa6666 | #aa6699 | #aa66aa | #aa66cc | #aa66ff |
#aa9900 | #aa9933 | #aa9966 | #aa9999 | #aa99aa | #aa99cc | #aa99ff |
#aaaa00 | #aaaa33 | #aaaa66 | #aaaa99 | #aaaaaa | #aaaacc | #aaaaff |
#aacc00 | #aacc33 | #aacc66 | #aacc99 | #aaccaa | #aacccc | #aaccff |
#aaff00 | #aaff33 | #aaff66 | #aaff99 | #aaffaa | #aaffcc | #aaffff |
#cc0000 | #cc0033 | #cc0066 | #cc0099 | #cc00aa | #cc00cc | #cc00ff |
#cc3300 | #cc3333 | #cc3366 | #cc3399 | #cc33aa | #cc33cc | #cc33ff |
#cc6600 | #cc6633 | #cc6666 | #cc6699 | #cc66aa | #cc66cc | #cc66ff |
#cc9900 | #cc9933 | #cc9966 | #cc9999 | #cc99aa | #cc99cc | #cc99ff |
#ccaa00 | #ccaa33 | #ccaa66 | #ccaa99 | #ccaaaa | #ccaacc | #ccaaff |
#cccc00 | #cccc33 | #cccc66 | #cccc99 | #ccccaa | #cccccc | #ccccff |
#ccff00 | #ccff33 | #ccff66 | #ccff99 | #ccffaa | #ccffcc | #ccffff |
#ff0000 | #ff0033 | #ff0066 | #ff0099 | #ff00aa | #ff00cc | #ff00ff |
#ff3300 | #ff3333 | #ff3366 | #ff3399 | #ff33aa | #ff33cc | #ff33ff |
#ff6600 | #ff6633 | #ff6666 | #ff6699 | #ff66aa | #ff66cc | #ff66ff |
#ff9900 | #ff9933 | #ff9966 | #ff9999 | #ff99aa | #ff99cc | #ff99ff |
#ffaa00 | #ffaa33 | #ffaa66 | #ffaa99 | #ffaaaa | #ffaacc | #ffaaff |
#ffcc00 | #ffcc33 | #ffcc66 | #ffcc99 | #ffccaa | #ffcccc | #ffccff |
#ffff00 | #ffff33 | #ffff66 | #ffff99 | #ffffaa | #ffffcc | #ffffff |
=ご注意=
フォントには沢山の種類が存在しますが、環境によって表示できたり出来なかったりします。 そのためユーザー個々の環境によりご利用できないフォントに関しては、
『MS Pゴシック』で代用表示されています。
serif | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
---|---|
Batang | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Book Antiqua | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Bookman Old Style | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Century | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Gungsuh | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Garamond | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Georgia | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
PMingLiU | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
MS PMincho | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
MS P明朝 | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Modern | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Roman | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Palatino Linotype | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Times New Roman | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
New York | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Palatino | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Times | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
平成明朝 | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
sans-serif | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
---|---|
Arial | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Arial Black | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Arial Unicode MS | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Century Gothic | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Comic Sans MS | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Copperplate | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Helvetica | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Impact | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Lucida | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Lucida Sans Unicode | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
MS UI Gothic | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
MS Pゴシック | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
MS PRゴシック | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
News Gothic | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Tahoma | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Trebuchet MS | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Verdana | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Charcoal | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Chicago | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Geneva | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Osaka | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
中ゴシック体 | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
平成角ゴシック | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
cursive | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
---|---|
HG正楷書体-PRO | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
HGP行書体 | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
HGS行書体 | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Script | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Zapf-Chancery | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
monospace | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
---|---|
BatangChe | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Courier | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Courier New | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
GungsuhChe | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
HG行書体 | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Lucida Console | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
MingLiU | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
MS Mincho | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
MS 明朝 | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
MS ゴシック | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
OCRB | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
SimSun | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Monaco | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Osaka-等幅 | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
細明朝体 | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
fantasy | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
---|---|
Goudy | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Symbol | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
---|---|
Webdings | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
Wingdings | ABCDEFGHTJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 あいうえお 日本語 |
タグに用いられている予約文字(&、<、>、"など) やキーボードにない文字を使用する場合、 特殊な記述方法が必要となります。例えば特殊文字を名前で指定する場合は、 &+キーワード+;(セミコロン)という形式で記述します。
記号 | 記述方法 | 記号名 |
---|---|---|
< | < | 小なり |
> | > | 大なり |
& | & | アンパーサンド |
" | " | 引用符 |
, | , | コンマ |
| スペース |
|
|
|
|
|
|