HTMLの基本

/　HTMLの基本　/　基本タグ　/　文字の装飾　/　リスト　/

HTMLの基本
< >で囲まれたものをタグと言います。
例えば<HTML>はこれはHTMLでの記述です。という宣言になっています。
<HTML>ではじめたものは</HTML>でここまで、と指定します。
<***>と</***>ではさんで指定しているわけです。
代表的なものをいくつかあげてみます。

<HTML> ： HTMLで記述するという宣言です。
<HEAD> ： ヘッダー情報を書きます。
<BODY> ： 本文を書きます。

これだけで簡単なページが作れます。

<HTML>
<HEAD>
</HEAD>
<BODY>ようこそ、私のホームページへ
</BODY>
</HTML>
この内容をジオシティーズの場合、アドバンスドエディタで記入して、[保存]ボタンを押します。そして自分のホームページのURLを入力すると、
（一般的には、Windowsに標準装備の【メモ帳】で編集してファイル名を　****.html　{****には、好きな文字を半角英数で入れます}として保存します。そして、おなじファイルを、InternetExplorerなどのブラウザで開くと、

ブラウザでの表示状態
と表示されてます。


基本HTMLタグ　▲TOP
少し手を加えるためによく使うタグを一部紹介します。
<***>から</***>までという指定をします。
< タグ _ オプション = 指定 > ここに任意の文字を入れる < /タグ >
例：　<BODY LINK="blue">フォントカラーを青にしました</BODY>

また、続けてオプションを指定することもできます
< タグ _ オプション = 指定 _ オプション = 指定 ... > 文字列 < /タグ >

ただし、改行等はその場所だけの指定ですので、</***>はいりません。
<***> 〜 </***>　の　〜　には、任意の文字を入れてください
< タグ >

タグ オプション 指定 説明
<HTML>　〜　</HTML> HTMLであることの宣言　このタグで全ての文字を囲みます
<HEAD>　〜　</HEAD> ヘッダ　<HTML> </HTML>内に記述
<TITLE>　〜　</TITLE> タイトル　<HEAD> </HEAD>内に記述

（例：<TITLE>CoolerBox</TITLE>と記述した場合）
　　↓↓これがタイトル　
<BODY>　〜　</BODY> ボディー　
TEXT #RRGGBB または 色名 文字色の指定
LINK リンクの色の指定
VLINK 行ったことのあるリンク色の指定
ALINK リンクをクリックしたときの色の指定
BGCOLOR 背景色の指定
BACKGROUND URL 背景に張る画像ファイルのアドレス
● バックグラウンドと文字色の指定例
<BODY BGCOLOR="#FFFFFF" TEXT="#00FF00" LINK="#FF0000" VLINK="#0000FF" ALINK="#FFFF00">
 ● バックグラウンドに画像を張った例
<BODY BACKGROUND="sky2.gif" TEXT="green" LINK="red" VLINK="purple" ALINK="blue">
<ADDRESS> 〜　</ADDRESS> アドレス　
例： <ADDRESS>icebox2087@geocities.co.jp</ADDRESS>
上を実行してみると↓になります
icebox2087@geocities.co.jp
斜体文字になるだけですけどね
<!--　〜　--> コメント
例：　ここから<!--ここの文字は隠れて見えません-->ここまで
上を実行してみると↓になります
ここからここまで
<!-- -->で囲んだ部分がかくれて見えませんね


文字表示タグ　▲TOP
<BIG>　〜　</BIG> 文字を大きく表示
大きい文字普通の文字
<SMALL>　〜　</SMALL> 文字を小さく表示
文字を小さく表示普通の文字
<FONT>　〜　</FONT> 文字フォントの変更
SIZE 1〜7 フォントサイズの指定
COLOR #RRGGBB
または色名		 文字色を設定
FACE フォント名 フォントの指定
●文字フォント・サイズ変更例
<FONT size="1">フォントサイズ1</FONT>
<FONT size="2">フォントサイズ2</FONT>
<FONT size="3">フォントサイズ3</FONT>
<FONT size="4">フォントサイズ4</FONT>
<FONT size="5">フォントサイズ5</FONT>
<FONT size="6">フォントサイズ6</FONT>
<FONT size="7">フォントサイズ7</FONT>		 フォントサイズ1
フォントサイズ2
フォントサイズ3
フォントサイズ4
フォントサイズ5
フォントサイズ6
フォントサイズ7
●文字フォント・フォント変更例
<FONT face="ＭＳ ゴシック">MSゴシックで表示</FONT>
<FONT face="ＭＳ 明朝">MS明朝で表示</FONT>
<FONT face="HG創英角ﾎﾟｯﾌﾟ体">HG創英角ポップ体で表示</FONT>		 MSゴシックで表示
MS明朝で表示
HG創英角ポップ体で表示
<BASEFONT> 基本フォントサイズの変更
SIZE 1〜7 基本サイズ設定
<B>　〜　</B> 太字（ボールド）
<I>　〜　</I> 斜体文字（イタリック）
<TT>　〜　</TT> 等幅フォント
<SUP>　〜　</SUP> 上付文字
<SUB>　〜　</SUB> 下付文字
<U>　〜　</U> 下線（アンダーライン）
<S>　〜　</S> 取消し線
●装飾タグによる装飾
<B>太字</B>
<I>斜体文字</I>
<TT>等幅フォント</TT>
標準<SUP>上付文字</SUP>
標準<SUB>下付文字</SUB>
<U>下線</U>
<S>取消し線</S>		 太字
斜体文字
等幅フォント
標準上付文字
標準下付文字
下線
取消し線
特殊文字 特殊文字
　<　や　>　はタグの一部として使用してますが、もし、どうしても　<　や　>　を表示したい時はしたの表の
コードを直接書きます
コード &lt; &gt; &amp; &quot;
特殊文字 < > & "
<H1〜6>　〜　</H> 見出し
●見出しの表示例

<H1>見出し1</H1>
<H2>見出し2</H2>
<H3>見出し3</H3>
<H4>見出し4</H4>
<H5>見出し5</H5>
<H6>見出し6</H6>

見出し１

見出し２

見出し３

見出し４

見出し５
見出し６
<BR> 改行
●改行の例
この次から改行します<BR>改行しました		 この次から改行します
改行しました
<HR> 水平線
<CENTER>　〜　</CENTER> 中央揃え
<BLINK>　〜　</BLINK> 点滅
注意：このタグはNetscape Navigatorでのみ表示可能です。Internet Explorerでは点滅しません
<MARQUEE>　〜　</MARQUEE> スクロール文字
注意：このタグはInternetExplorerでのみ表示されます。NetscapeNavigatorではスクロールしません
ここで紹介するのは、基本です。
スクロールの応用編はこちらです
BEHAVIOR alternate
scroll
slide		 スクロールの動き
上から、交互・スクロール・スライド
BGCOLOR #RRGGBBまたは色名 背景の色の指定
DIRECTION left
right
up
down		 スクロールの向き
上から、左・右・上・下
SCROLLAMOUNT 移動するピクセル数 文字の移動距離
SCROLLDELAY ミリ秒 文字の表示されるスピード
SCROLLDERAYの時間内に、SCROLLAMOUNTピクセル移動します
LOOP 回数 スクロールの繰り返し回数
WIDTH ピクセル数 横幅
HEIGHT ピクセル数 高さ
●スクロール文字の表示例１
<MARQUEE>文字がスクロールします</MARQUEE>		 文字が流れます

文字がスクロールしていす
●スクロール文字の表示例2
<MARQUEE DIRECTION="right" SCROLLAMOUNT="50" SCROLLDELAY="1000">1秒ごとに50ピクセル移動します</MARQUEE>
 1秒ごとに50ピクセル移動します
1秒間（1000ミリ秒）ごとに50ピクセルづつ右向きにスクロールしていす
●スクロール文字の表示例3
<MARQUEE DIRECTION="up" SCROLLAMOUNT="1" SCROLLDELAY="10" BGCOLOR="yellow" WIDTH="100" HEIGHT="80">上向きに移動します。横幅は100ピクセル、高さは80ピクセルです。バックカラーは黄色です</MARQUEE>		 上向きに移動します。横幅は100ピクセル、高さは80ピクセルです。バックカラーは黄色です


リスト　▲TOP
<UL>　〜　</UL> マーク付リスト　　項目ごとに　<LI>　〜　</LI>　で囲む
<OL>　〜　</OL> 番号付リスト　　　項目ごとに　<LI>　〜　</LI>　で囲む
<LI>　 〜　 </LI> リストの項目　　上記の　<UL></UL>　または　<OL></OL>　の間に記述
TYPE disc
square
circle

 マーク付リスト　<UL></UL>　のマーク　（上から）
  • 黒丸
  • 黒四角
  • 白丸
TYPE 1
a
A
i
I

 番号付リスト　<OL></OL>　のマーク　（上から）
  1. 数字
  2. 小文字アルファベット
  3. 大文字アルファベット
  4. 小文字ローマ数字
  5. 大文字ローマ数字
●マーク付リストの例
<UL>
<LI TYPE=disc>項目１</LI>
<LI>項目2</LI>
<LI TYPE=square>項目3</LI>
<LI>項目4</LI>
<LI TYPE=circle>項目5</LI>
<LI>項目6</LI>
</UL>

（このように、途中からでもマークの形を変更できます）
  • 項目１
  • 項目2
  • 項目3
  • 項目4
  • 項目5
  • 項目6
●番号付リストの例
<UL>
<LI TYPE=A>項目１</LI>
<LI>項目2</LI>
<LI TYPE=a>項目3</LI>
<LI>項目4</LI>
<LI TYPE=I>項目5</LI>
<LI>項目6</LI>
<LI TYPE=i>項目7</LI>
<LI>項目8</LI>
<LI TYPE=1>項目9</LI>
<LI>項目10</LI>
</UL>

（このように、途中からでもマークの変更が可能です）
  • 項目１
  • 項目2
  • 項目3
  • 項目4
  • 項目5
  • 項目6
  • 項目7
  • 項目8
  • 項目9
  • 項目10


以下の項目は準備検討中です。要望があれば公開する予定です

もどる