初級篇★ページ作りの基礎知識1. HTMLを書いてみよう

VOL1.HTMLを見てみよう ★ 基本のタグ1..背景、テキスト、フォント、段落、水平線

背景とテキストなどに関する指定で、最もよく使われるタグを集めてみました。作成ソフトで書かれたHTMLを見てみると、これらは殆どのページに必ずあるタグです。HTMLを編集する時のために、各タグの働きを理解しておきましょう。

>>色指定に関しては、初級篇Vol3.知っておきたい色指定の基礎知識 を参照して下さい。

　

★背景★ ... <body>タグ内に書き込む。

<body bgcolor="色番or色名">... 背景の色を指定

<body background="画像ファイル名">... 背景の画像を指定

>> 画像ファイル名を指定する時の、「パス」の指定方法についてはこちらをご参照下さい。

　

★テキスト★ ... <body>タグ内に書き込む。

<body text="色番or色名">... ページの文字色を指定

<body link="色番or色名">... リンクが設定されている文字の色を指定

<body alink="色番or色名">... クリックされたばかりのリンクの文字色を指定

<body vlink="色番or色名">... 既に表示されたリンクの文字色を指定

　

※背景やページ全体の標準となるテキストの色は<body>タグ内にまとめて書き込みます。なお、ページ内容の最後に</body>タグをお忘れなく。<body></body>タグは、１ページに必ず1セットのみです。

ex.<body text="#003366" link="#0000FF" alink="#90EE90" vlink="#A9A9A9" bgcolor="#9B9BFF">

　注 : 但し、背景の色やテキスト色、リンクカラーは、<body>タグ内ではなく、スタイルシートで指定するのが望ましいとされています。

スタイルシートについては、初級篇2で詳しく解説しますので、いましばらくお待ちください。

　

★フォント★

<font color="色番or色名">　</font>... フォントの色を指定

※<body>タグ内で指定した標準の色と変える場合のみ、その部分の前後をこのタグで挟みます。

　

<font size="1〜7">　</font>... フォントのサイズを指定

1 ... 8pt

2 ... 10pt

3 ... 12pt 

4 ... 14pt

5 ... 18pt

6 ... 24pt

7 ... 36pt

※数が大きくなるに従って、フォントも大きくなります。なお対応ptはIEで表示した時の標準的な大きさで、ブラウザによっては表示が異なる場合があります。

　

<font face="フォントの名前">　</font>... フォント名を指定

※複数のフォントを指定する時は、優先されるものから順に , で区切って並べます。指定したフォントで表示されるためには、見る側のパソコンにそのフォントが入っていなければなりませんが、第1候補が入っていない場合は第2、それもなければ第3、第４...の順で選択されます。全くない場合は、そのパソコンの標準設定となっているフォントで表示されます。

ex.<font face="MS P明朝, MS Pゴシック, 富士ポップP">

※フォントに関する指定は<font>タグ内にまとめるか、<font>タグを複数並べても使えます。但し、ふたつ以上の<font>タグを並べた場合は、</font>も同数必要です。

ex1. <font color="#003366" size="3">あいうえお</font>

ex2. <font color="#003366"><font size="3">あいうえお</font></font>

ex3. <font color="#003366"><fontsize="3">あいうえお</font><fontsize="4">かきくけこ</font></font>

...ex3. は、サイズのみを変更する場合のスクリプトの例です。このように分割して書けば、最初の色指定は最後の</font>まで有効になります。

注 : 但し、フォントのサイズや種類、色は、スタイルシートで指定するのが望ましいとされています。

スタイルシートについては、初級篇2で詳しく解説しますので、いましばらくお待ちください。

　

<b>　</b> ... 太字で表示します。

<i>　</i> ... 斜字体（イタリック体）で表示します。

<u>　</u> ... アンダーラインを引きます。

<strike>　</strike> （もしくは<s>　</s>）...抹消線を表示します。

ex.<strike>あいうえお</strike> → あいうえお

<tt>　</tt>...等幅フォントで表示します。

ex.<tt>あいうえお</tt>→ あいうえお ... IEのみ

<sup>　</sup>...上付きで表示します。

ex.<sup>あいうえお</sup>→ あいうえお

<sub>　</sub>...下付きで表示します。

ex.<sub>あいうえお</sub>→ あいうえお

　

★段落★

<p> </p>... 一段落ごとに区切ります。

<p align="left (center, right)>　</p>...その段落の位置を左寄せ、中央、右寄せで指定します。

※書き込まなければ左寄せになります。

　

<div align="left( center, right)">　</div>...指定した範囲を、ひとまとまりにして左寄せ、中央、右寄せで指定します。

ex. <div align="left">

<p>あいうえお</p>

<p>かきくけこ</p>

<p>さしすせそ</p>

</div>

<center>　</center> ...このタグで囲まれた間を、中央に表示します。

注 : 但し、段落の位置指定は、スタイルシートで指定するのが望ましいとされています。

スタイルシートについては、初級篇2で詳しく解説しますので、いましばらくお待ちください。

　

<br>... 改行します。

<nobr>　</nobr>　... 自動改行しないように制限します。

<pre>　</pre>... 通常、HTML編集画面で空白やタグで指定されたのでない改行は無視されますが、このタグで囲まれたテキストは、それを入力された通りに表示します（IEでは等幅フォントで表示）。Javaスクリプトなども、スクリプトを示すタグの代わりにこのタグでくくると、書かれたままに表示することが出来ます。下のスクリプトはその例で、HTML上では前後を<pre></pre>で挟んであります。


var count = 0;
var max = 1700;
function autoScroll() { 
   if (navigator.appVersion > "3") {
        if (count < max) {
            scroll(0,count++);
            timer = setTimeout("autoScroll()",50);
            status = max-count;
        }
    }
}
上と同じスクリプトも、前後を<pre></pre>で挟まなければ、以下のように一行として扱われ、自動改行して表示されます。

var count = 0; var max = 1700; function autoScroll() { if (navigator.appVersion > "3") { if (count < max) { scroll(0,count++); timer = setTimeout("autoScroll()",50); status = max-count; } } }

また、スクリプトに書き込んだ覚え書などのテキストを表示させたくない時は、コメント <!-- -->タグを用います。メモや更新記録など、ブラウザに表示せず、自分だけが覚えておきたいような内容を書き込みたい時に便利です。

<!-- この間に書かれた内容は表示されません。 -->

　

★水平線（罫線）★

<hr>...水平線を表示します。ex.↓↓↓

　

<hr size="数値（ピクセル）">...水平線の幅を指定します。ex. <hr size="10">↓↓↓

　

<hr width="数値（ピクセルor パーセント）">...水平線の横幅を指定します。

ex1. <hr width="200">

　

ex２. <hr width="80%">

　

<hr align="left (right, center)">...水平線の位置を指定します。指定のない場合は中央に表示されます。

<hr width="200" align="left">

<hr width="200" align="center">

<hr width="200" align="right">

<hr noshade>... 水平線の影を消して平面化します。

<hr color="色番or色名"> ... 水平線の色を指定します（ただしIEのみ対応で、その場合、影は付きません）。

ｅｘ1.<hr width="300" color="#90EE90">

　

　

>> 初級篇1.VOL1.基本のタグ2.画像とリンク

　

2006.7.11-7.12.