HTML基礎タグ

フリーソフト
 アップローダー
 Let's WinMX
IPチェッカー
 .htaccessパスワード生成
 シークレットアルバム
 リンク抽出
 短縮アドレス
 動画落とし
 暗号文
 楽天アフィリエイト支援ツール

サンプルコードホームページ作成テクニック
HTML基礎タグ
WSH簡単プログラム

文字のサイズの指定
文字の書体の指定
文字の装飾（色・太字・斜体・下線・固定幅・取り消し線・上付き・下付き）
文字にマウスポインタを合わせたときに文字を表示
改行する・改行させない
リンクの作成
メールを送信するリンクの作成
画像の表示
画像のサイズを指定
画像にマウスポインタを合わせたときに文字を表示
画像にリンクを加える
リストの作成
水平線を引く
水平線の長さ・太さを指定
水平線の位置を指定
水平線の色を指定
水平線の影を取り除く
スクロール
スクロールの方向・動作を指定
スクロールの再描画の秒数・速度を指定
スクロールの回数を制限
スクロールの幅・高さを指定
スクロールの左右・上下の余白を指定
スクロールの背景色を指定
スタッフロール風に縦スクロール
レイアウトを中央に揃える（センタリング）

16進数で表した標準色

`#000000`
`#808080`
`#c0c0c0`
`#ffffff`
`#0000ff`
`#000080`
`#008080`
`#008000`
`#00ffff`
`#00ff00`
`#ffff00`
`#ff00ff`
`#808000`
`#800080`
`#800000`
`#ff0000`

文字のサイズの指定

上へ

タグ		実際のイメージ
<FONT size="-2">フォントサイズ</FONT> <FONT size="-1">フォントサイズ</FONT> フォントサイズ <FONT size="+1">フォントサイズ</FONT> <FONT size="+2">フォントサイズ</FONT> <FONT size="+3">フォントサイズ</FONT> <FONT size="+4">フォントサイズ</FONT> <FONT size="1">フォントサイズ</FONT> <FONT size="2">フォントサイズ</FONT> <FONT size="3">フォントサイズ</FONT> <FONT size="4">フォントサイズ</FONT> <FONT size="5">フォントサイズ</FONT> <FONT size="6">フォントサイズ</FONT> <FONT size="7">フォントサイズ</FONT>		フォントサイズフォントサイズフォントサイズフォントサイズフォントサイズフォントサイズフォントサイズフォントサイズフォントサイズフォントサイズフォントサイズフォントサイズフォントサイズフォントサイズ

文字の書体の指定

上へ

タグ		実際のイメージ
<FONT face="ＭＳＰ明朝">フォントスタイル</FONT> <FONT face="ＭＳＰ明朝,MS UI Gothic">フォントスタイル</FONT>		フォントスタイルフォントスタイル

ＭＳＰ明朝,MS UI Gothic のように , で区切り、複数の書体を指定すると、パソコンにＭＳＰ明朝が入っていなくても、次の候補の MS UI Gothic で表示することができます。

文字の装飾（色・太字・斜体・下線・固定幅・取り消し線・上付き・下付き）

上へ

タグ		実際のイメージ
<FONT color="#ff00ff">フォントカラー</FONT> <B>太い文字</B>（太字） <I>斜めの文字</I>（斜体） <U>文字の下に線を引く</U>（下線）文字の幅を均一にする<TT>123</TT>123（固定幅） <S>取り消し線を引く</S>（取り消し線）上側に<SUP>文字を小さく</SUP>付ける（上付き）下側に<SUB>文字を小さく</SUB>付ける（下付き）		フォントカラー太い文字（太字）斜めの文字（斜体）文字の下に線を引く（下線）文字の幅を均一にする`123`123（固定幅） ~~取り消し線を引く~~（取り消し線）上側に^{文字を小さく}付ける（上付き）下側に_{文字を小さく}付ける（下付き）

文字にマウスポインタを合わせたときに文字を表示

上へ

タグ		実際のイメージ
<P title="このように、表示されます。">ここに、マウスポインタを合わせると…</P>		ここに、マウスポインタを合わせると…

改行する・改行させない

上へ

タグ		実際のイメージ
文章を<BR> 改行<BR> します。 <NOBR>ここに入力した文字は、ウインドウ幅を超えても改行されません。</NOBR>		文章を改行します。この文字は、ウインドウ幅を超えても改行されません。

リンクの作成

上へ

タグ		実際のイメージ
<A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A>		リンク

target="_blank" = 新しいウィンドウで開く。
target="_self" = 同一ウィンドウで開く。
target="_parent" = 親ウィンドウで開く。
target="_top" = 全画面で開く。

メールを送信するリンクの作成

上へ

タグ		実際のイメージ
<A href="mailto:**@.ne.jp">メールを送る</A> <A href="mailto:*@*.ne.jp?Subject=ホームページより">メールを送る（件名有り）</A>		メールを送るメールを送る（件名有り）

****@***.ne.jp をあなたのメールアドレスに変更。
件名を指定する場合は、 ?Subject= に続けて、件名を入力。

画像の表示

上へ

タグ		実際のイメージ
<IMG src="http://applis.org/img/logo.png">

画像のサイズを指定

上へ

タグ		実際のイメージ
<IMG src="http://applis.org/img/logo.png" width="150" height="39">

画像にマウスポインタを合わせたときに文字を表示

上へ

タグ		実際のイメージ
<IMG src="http://applis.org/img/logo.png" alt="Yahoo! JAPAN">

画像にリンクを加える

上へ

タグ		実際のイメージ
<A href="http://www.yahoo.co.jp/" target="_blank"><IMG src="http://applis.org/img/logo.png" border="0"></A>

target="_blank" = 新しいウィンドウで開く。
target="_self" = 同一ウィンドウで開く。
target="_parent" = 親ウィンドウで開く。
target="_top" = 全画面で開く。

リストの作成

上へ

タグ

実際のイメージ

<UL>
<LI>標準のリスト
<LI>標準のリスト
</UL>

<UL type="square">
<LI>黒い四角のリスト
<LI>黒い四角のリスト
</UL>

<UL type="circle">
<LI>中抜きの丸のリスト
<LI>中抜きの丸のリスト
</UL>

<UL style="list-style-type : none">
<LI>マークを表示しないリスト
<LI>マークを表示しないリスト
</UL>

<OL>
<LI>連番数字のリスト
<LI>連番数字のリスト
</OL>

<OL type="a">
<LI>連番小文字英語のリスト
<LI>連番小文字英語のリスト
</OL>

<OL type="A">
<LI>連番大文字英語のリスト
<LI>連番大文字英語のリスト
</OL>

<OL type="i">
<LI>連番小文字ローマ数字のリスト
<LI>連番小文字ローマ数字のリスト
</OL>

<OL type="I">
<LI>連番大文字ローマ数字のリスト
<LI>連番大文字ローマ数字のリスト
</OL>

標準のリスト
標準のリスト

黒い四角のリスト
黒い四角のリスト

中抜きの丸のリスト
中抜きの丸のリスト

マークを表示しないリスト
マークを表示しないリスト

連番数字のリスト
連番数字のリスト

連番小文字英語のリスト
連番小文字英語のリスト

連番大文字英語のリスト
連番大文字英語のリスト

連番小文字ローマ数字のリスト
連番小文字ローマ数字のリスト

連番大文字ローマ数字のリスト
連番大文字ローマ数字のリスト

水平線を引く

上へ

タグ		実際のイメージ
<HR>

水平線の長さ・太さを指定

上へ

タグ		実際のイメージ
<HR width="160"> <HR width="80%"> <HR size="8">

長さ = width=""
太さ = size=""

長さ・太さともに、ピクセル・割合（%）どちらでも指定可能。

水平線の位置を指定

上へ

タグ		実際のイメージ
<HR align="left" width="160"> <HR align="center" width="160"> <HR align="right" width="160">

水平線の色を指定

上へ

タグ		実際のイメージ
<HR color="#0000ff">

水平線の影を取り除く

上へ

タグ		実際のイメージ
<HR noshade>

スクロール

上へ

タグ		実際のイメージ
<MARQUEE>スクロール</MARQUEE>		スクロール

スクロールの方向・動作を指定

上へ

タグ		実際のイメージ
<MARQUEE direction="left">スクロール</MARQUEE> <MARQUEE direction="right">スクロール</MARQUEE> <MARQUEE behavior="scroll">スクロール</MARQUEE> <MARQUEE behavior="alternate">スクロール</MARQUEE> <MARQUEE behavior="slide">スクロール</MARQUEE>		スクロールスクロールスクロールスクロールスクロール

direction="left" = 左に流れる。
direction="right" = 右に流れる。
behavior="scroll" = 繰り返す。
behavior="alternate" = 端で折り返す。
behavior="slide" = 端でストップ。

スクロールの再描画の秒数・速度を指定

上へ

タグ		実際のイメージ
<MARQUEE scrolldelay="160">スクロール</MARQUEE> <MARQUEE scrollamount="32">スクロール</MARQUEE>		スクロールスクロール

秒数 = scrolldelay="" ミリ秒で指定。デフォルトは85。
速度 = scrollamount="" デフォルトは6。

スクロールの回数を制限

上へ

タグ		実際のイメージ
<MARQUEE loop="3">スクロール</MARQUEE>		スクロール

スクロールの幅・高さを指定

上へ

タグ		実際のイメージ
<MARQUEE width="32">スクロール</MARQUEE> <MARQUEE width="50%">スクロール</MARQUEE> <MARQUEE height="32">スクロール</MARQUEE> <MARQUEE height="50%">スクロール</MARQUEE>		スクロールスクロールスクロールスクロール

幅 = width=""
高さ = height=""

幅・高さともに、ピクセル・割合（%）どちらでも指定可能。

スクロールの左右・上下の余白を指定

上へ

タグ		実際のイメージ
<MARQUEE vspace="16">スクロール</MARQUEE> <MARQUEE hspace="16">スクロール</MARQUEE>		スクロールスクロール

左右 = vspace=""
上下 = hspace=""

ピクセルで指定。

スクロールの背景色を指定

上へ

タグ		実際のイメージ
<MARQUEE bgcolor="#ff00ff">スクロール</MARQUEE>		スクロール

スタッフロール風に縦スクロール

上へ

タグ		実際のイメージ
<MARQUEE direction="UP" loop="0" scrollamount="1" scrolldelay="80" height="32">スクロール<BR> スクロール<BR> スクロール</MARQUEE>		スクロールスクロールスクロール

レイアウトを中央に揃える（センタリング）

上へ

タグ

実際のイメージ

<CENTER>
<TABLE border="1">
<TBODY>
<TR>
<TD>このように表や</TD>
</TR>
</TBODY>
</TABLE>

<IMG src="http://applis.org/img/logo.png">

画像なども
まとめて
センタリング
できます</CENTER>

このように表や

画像なども
まとめて
センタリング
できます

sponsor's link

アプリス/フリーソフト/アップローダー/1cc.jp/i06/piafis/トイプードルの飼い方/ダイエット食品/サンゲツ/リリカラ