ホーム > タグの練習場 > タグ初歩編


カテゴリ一覧
よくある質問
ネチケット
タグ初歩編
タグとは
初期設定
背景を変える
改行する
段落を作る
中央揃えにする
位置を指定する
水平線を引く
見出しを作る
文字の書式を変える
下線をつける
取り消し線をつける
文字を強調する
文字を点滅させる
文字を流す
リンクを作る
タグ中級編
タグ上級編

タグとは

 HTML(Hyper Text Markup Language)はホームページを作成する上で使用される言語の一種です。これは必ず<>(パーレーン)で囲まれた形で使用され、すべて半角英数文字で記述しなければ意味がありません。

 基本的に始まりを示すタグと終わりを示すタグと二つをペアで使用します。例えば文字のセンタリングは、<center>で始め、</center>で閉じるという形で使用します。また、単独で使用するものもあります。線をひく<hr>や改行の<br>などです。

 タグには色やサイズを指定したりする属性を付加することができます。例えば、文字の色を変えたい場合には<font color="Red">赤色だよ</font>というように記述しますが、これは<font>タグにcolorという属性名、Redという属性値を指定していることになります。

2000/06/04(Sun)
初期設定

ホームページは全て以下のような形式で記述されます。

<html>
<head><title>タイトル</title></head>
<body>
.
.
.
</body>
</html>

<html>と</html>は、HTMLファイルであることを宣言するためのもので、文章の先頭と末尾に記入します。

<head>と</head>の間には、ページのタイトルや作成に関する情報などを記述します。ここに記述した内容はブラウザには表示されません。

<title>タイトル</title>で、そのページのタイトルを設定できます(ブックマークした場合などに有効)。

<body>と</body>で囲まれた部分がブラウザに表示されます。また、<body>には背景色や文字色などを指定する属性を付加することができます。

2000/06/04(Sun)
背景を変える

<body>〜</body>は、ページの本文を記述するためのタグです。

【属性】
◆text…標準の文字色を指定します。
◆link…未訪問のリンクテキストの色を指定します。
◆vlink…既訪問のリンクテキストの色を指定します。
◆alink…訪問中のリンクテキストの色を指定します。
◆bgcolor…背景色を指定します。
◆background…背景画像を指定します。

【例】
<body bgcolor="#FFFFEC" text="#003366" link="#3333FF" vlink="#6666FF" alink="#FF0000">

【注意事項】
カラーに対応していない携帯端末もあるので、それらに対しては無効です。また、携帯端末では背景画像を表示できません。

2000/06/04(Sun)
改行する

<br>は文の途中で改行させたい場合に使用します。

【例】
こんにちは。<br>トシです。
 ↓
こんにちは。
トシです。

2000/06/04(Sun)
段落を作る

<p>〜</p>は段落を示します。前後に一行空けた状態で表示されますが、<p>をいくつか連続して記述しても、その分だけ改行されることはありません。

【属性】
◆align…表示位置を指定します。
 / center
 / right
 / left

【例】
<p align="center">おはよう</p>
 ↓

おはよう



2000/06/04(Sun)
中央揃えにする

<center>〜</center>で文字のセンタリングを指定します。

【例】
<center>真ん中だよ</center>
 ↓
真ん中だよ


【参考】
<div align="center">〜</div>でも同様に文字のセンタリングをすることができます。

2000/06/04(Sun)
位置を指定する

<div>〜</div>は何の意味も持たないタグです。文字の位置変更などに使われます。

【属性】
◆align…表示位置を指定します。
 / center
 / right
 / left

【例】
<div align="center">中央に表示</div>
<div align="right">右側に表示</div>
 ↓
中央に表示
右側に表示


2000/06/04(Sun)
水平線を引く

<hr>は、水平線を引くために使います。

【属性】
◆width…長さを数値またはパーセンテージで指定します。
◆size…太さを指定します。
◆align…表示位置を指定します。
 / center
 / right
 / left
◆color…色を指定します。
◆noshade…水平線の影をなくします。

【例】
<hr>
 ↓
<hr size="5" color="Red">
 ↓
<hr width="50%" align="left">
 ↓


2000/06/04(Sun)
見出しを作る

<h1>〜</h1>は、見出しを指定します。<h1>から<h6>まであり、<h1>が最も大きな見出しになります。

【属性】
◆align…表示位置を指定します。
 / center
 / right
 / left

【例】
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
 ↓

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6

【参考】
携帯端末では基本的に文字のサイズは変わりませんが、一部のブラウザで<h6>を使用した場合に小さな文字で表示されることがあります。

2000/06/04(Sun)
文字の書式を変える

<font>〜</font>は文字の書式を指定します。

【属性】
◆color…文字の色を指定します。
◆size…文字の大きさを指定します。
 / 1〜7
◆face…フォントを指定します。

【例】
<font size="7" color="#0000FF">青色で大きな文字</font>
 ↓
青色で大きな文字

【注意事項】
カラーに対応していない携帯端末では色の変更は無効です。また、携帯端末では文字の大きさ、フォントの変更は無効になります。

2000/06/04(Sun)

- Mobile Frontier v2.1 -