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 ゴシック">MSゴシックで表示</FONT>
<FONT face="MS 明朝">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>

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6
<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 ピクセル数 高さ
●スクロール文字の表示例1
<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>項目1</LI>
<LI>項目2</LI>
<LI TYPE=square>項目3</LI>
<LI>項目4</LI>
<LI TYPE=circle>項目5</LI>
<LI>項目6</LI>
</UL>

(このように、途中からでもマークの形を変更できます)
  • 項目1
  • 項目2
  • 項目3
  • 項目4
  • 項目5
  • 項目6
●番号付リストの例
<UL>
<LI TYPE=A>項目1</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>

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


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

もどる