アプリス お気に入りに追加

アプリス > いろんなサンプルコード >

HTML基礎タグ


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


HP・ブログ設置ツールアクセスカウンター
ミニ掲示板
検索窓
お天気窓


SEO対策バックリンクチェック
検索順位チェック
METAタグ生成フォーム


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




16進数で表した標準色

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



文字のサイズの指定

up 上へ

タグ 実際のイメージ
<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>
フォントサイズ
フォントサイズ
フォントサイズ
フォントサイズ
フォントサイズ
フォントサイズ
フォントサイズ

フォントサイズ
フォントサイズ
フォントサイズ
フォントサイズ
フォントサイズ
フォントサイズ
フォントサイズ



文字の書体の指定

up 上へ

タグ 実際のイメージ
<FONT face="MS P明朝">フォントスタイル</FONT>

<FONT face="MS P明朝,MS UI Gothic">フォントスタイル</FONT>
フォントスタイル

フォントスタイル
  • MS P明朝,MS UI Gothic のように , で区切り、複数の書体を指定すると、パソコンに MS P明朝が入っていなくても、次の候補の MS UI Gothic で表示することができます。



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

up 上へ

タグ 実際のイメージ
<FONT color="#ff00ff">フォントカラー</FONT>

<B>太い文字</B>(太字)

<I>斜めの文字</I>(斜体)

<U>文字の下に線を引く</U>(下線)

文字の幅を均一にする<TT>123</TT>123(固定幅)

<S>取り消し線を引く</S>(取り消し線)

上側に<SUP>文字を小さく</SUP>付ける(上付き)

下側に<SUB>文字を小さく</SUB>付ける(下付き)
フォントカラー

太い文字(太字)

斜めの文字(斜体)

文字の下に線を引く(下線)

文字の幅を均一にする123123(固定幅)

取り消し線を引く(取り消し線)

上側に文字を小さく付ける(上付き)

下側に文字を小さく付ける(下付き)



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

up 上へ

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

ここに、マウスポインタを合わせると…




改行する・改行させない

up 上へ

タグ 実際のイメージ
文章を<BR>
改行<BR>
します。

<NOBR>ここに入力した文字は、ウインドウ幅を超えても改行されません。</NOBR>
文章を
改行
します。

この文字は、ウインドウ幅を超えても改行されません。



リンクの作成

up 上へ

タグ 実際のイメージ
<A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A> リンク
  • target="_blank" = 新しいウィンドウで開く。
  • target="_self" = 同一ウィンドウで開く。
  • target="_parent" = 親ウィンドウで開く。
  • target="_top" = 全画面で開く。



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

up 上へ

タグ 実際のイメージ
<A href="mailto:****@***.ne.jp">メールを送る</A>

<A href="mailto:****@***.ne.jp?Subject=ホームページより">メールを送る(件名有り)</A>
メールを送る

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



画像の表示

up 上へ

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



画像のサイズを指定

up 上へ

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



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

up 上へ

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



画像にリンクを加える

up 上へ

タグ 実際のイメージ
<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" = 全画面で開く。



リストの作成

up 上へ

タグ 実際のイメージ
<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>
  • 標準のリスト
  • 標準のリスト
  • 黒い四角のリスト
  • 黒い四角のリスト
  • 中抜きの丸のリスト
  • 中抜きの丸のリスト
  • マークを表示しないリスト
  • マークを表示しないリスト
  1. 連番数字のリスト
  2. 連番数字のリスト
  1. 連番小文字英語のリスト
  2. 連番小文字英語のリスト
  1. 連番大文字英語のリスト
  2. 連番大文字英語のリスト
  1. 連番小文字ローマ数字のリスト
  2. 連番小文字ローマ数字のリスト
  1. 連番大文字ローマ数字のリスト
  2. 連番大文字ローマ数字のリスト



水平線を引く

up 上へ

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



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

up 上へ

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

<HR width="80%">

<HR size="8">





  • 長さ = width=""
  • 太さ = size=""
  • 長さ・太さともに、ピクセル・割合(%)どちらでも指定可能。



水平線の位置を指定

up 上へ

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

<HR align="center" width="160">

<HR align="right" width="160">








水平線の色を指定

up 上へ

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



水平線の影を取り除く

up 上へ

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



スクロール

up 上へ

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



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

up 上へ

タグ 実際のイメージ
<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" = 端でストップ。



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

up 上へ

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

<MARQUEE scrollamount="32">スクロール</MARQUEE>
スクロール

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



スクロールの回数を制限

up 上へ

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



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

up 上へ

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

<MARQUEE width="50%">スクロール</MARQUEE>

<MARQUEE height="32">スクロール</MARQUEE>

<MARQUEE height="50%">スクロール</MARQUEE>
スクロール

スクロール

スクロール

スクロール
  • 幅 = width=""
  • 高さ = height=""
  • 幅・高さともに、ピクセル・割合(%)どちらでも指定可能。



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

up 上へ

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

<MARQUEE hspace="16">スクロール</MARQUEE>
スクロール

スクロール
  • 左右 = vspace=""
  • 上下 = hspace=""
  • ピクセルで指定。



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

up 上へ

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



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

up 上へ

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



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

up 上へ

タグ 実際のイメージ
<CENTER>
<TABLE border="1">
<TBODY>
<TR>
<TD>このように表や</TD>
</TR>
</TBODY>
</TABLE>

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

画像なども
まとめて
センタリング
できます</CENTER>
このように表や



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



sponsor's link




新着情報  ツール一覧  デスクトップテーマ  リンク  管理者  ヘルプ  お問い合わせ  サイトマップ



©applis



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