>> areatop / sitetop , contact , about <<
 

::コンテンツ::



HTML文法ノート

HTMLの文法についての個人的なノートです。
「#」以下の部分は、私の個人的なコメントです。


HTMLの概枠

<html>
<head></head>
<body></body>
</html>

HTML文書であることを宣言するために、HTMLタグで全ての文書をくくります。
そして、文書ひとつひとつは、そのページの設定事項を記述するHEAD部分と、
本文を記述するBODY部分からなります。

HTMLタグは大文字でも小文字でもかまわないのですが、
特に理由が無いならば小文字で書くことをおすすめします。
（もちろん、みやすくするために部分的に変えることを推奨する人も多いですが）

実は、HTMLタグでくくらずとも、拡張子を「.html」か「.htm」としただけで
ブラウザは自動的にHTML文書だと判断するのですが、
一応このくらいは書き足してもさしつかえなさそうです。

本文の書き方

<body>
こんにちは<br>
ホームページを作っています。
</body>

本文を書くには、BODY中にそのまま記述してやればOKです。
ただし、改行にはBRタグを利用することになります。

本文の書き方２

<body>
<p>
段落１<br>
ここはひとつめの段落です。
</p>
<p>
段落２<br>
ふたつめの段落に入りました。
</p>
</body>

Pタグでくくられた部分はひとつの段落と認識されています。
本文を書く際、ある程度の文章ごとに段落をわけて書くようになっています。
段落を変える際には、自動的に二行分の改行が入ることに注意してください。

別に普通に文章を書く際には段落があろうと無かろうと関係ないのですが、
後々、段落ごとにデザインを変えたりする場合に、段落ごとにわけてあるかどうかで
作業のしやすさが各段に変わってきます。

なお、改行を行いたい際にPタグでも、BRタグでもできることになりますが、
用途によって使い分けた方がいいです。

水平線

<body>
上の部分<hr>
下の部分
</body>

HRタグでおなじみの水平線をいれることができます。
水平線のデザインや幅などの設定も実は変更することが可能なのですが、
それは別の機会にゆずることにしたいところです。

水平線は段落同士などをわけるのに非常に簡単な方法であるが、
どんなに工夫した水平線をいれても、使いすぎると見栄えが悪くなるので注意が必要です。

#デザインの観点から言えば、水平線の画像を使うことは論外だと思います。
#理由は、見た目がよくないからです。
#もちろん、HRは役に立つ場合も多いのですが、画像で役に立っているのはあまり目にしません。

文字修飾

<b>太字</b>
<strong>強調</strong>
<i>イタリック</i>

一番基本的な文字修飾のタグを上にあげました。
文字修飾のタグはたくさんあり、効果がかぶっているものも実はかなり多いです。
全てのブラウザで共通して使えないものも意外とあるので、
普段使う際には基本的なものをメインに使うようにしたいところです。

ところで、文字修飾のタグには大まかに二種類にわけられます。
実際にどのような文体にしろと明示している名前のタグと、
単にこのような表現にしなさいという意味のタグです。

上記の例では、
BとIはそれぞれ、英語でBold（太字）とItalic（斜体）という意味のタグで、
ブラウザに対して、太字/斜体で文字を表現しなさいと具体的に命令しています。
それに対し、STRONGは英語で「強調」という意味であり、
ブラウザに対し、強調しなさい（どのような文体になるのかはまかせるから）と命令しています。

なぜこのように二種類のタグが存在するのかというと、
直接文体を指定するタグを使った場合、そのタグがブラウザで対応していなかったら困るからです。

しかし常識的に考えれば、ブラウザの開発者側は、
STRONGタグに対応させる前にBタグに対応させるに決まっています（それほどBタグは基本的なタグです）し、
また、ブラウザが対応していないようなタグは普通私たちも使う機会がないため
結局、これらの差が実感される機会はほとんどないといえます。

デザインの観点から考えれば、
どう表現されるかがわからないSTRONGタグよりもBタグを絶対に使うべきであることを一応追記しておきます。

画像を入れる

<img src="image.gif">

画像を入れるには、IMGタグを使います。
どの画像を入れるかを指定する必要があるため、
IMGタグは絶対にSRC属性を一緒に含みます。

「属性」とは、タグの中でそのタグについての設定を記述する部分です。
上の例では、IMGタグ(<img>に「src」という画像の場所を示す属性が追加されています）
タグと属性は半角スペースで区切り、 属性の値は「=」以下に""でくくって書き加えます。
なお、実は""はなくてもOK（つまり、<img src=image.gif>でもOK・・少し見にくいかもしれませんが）


画像のアドレスは、相対指定でも絶対指定でもよいことを一応付け加えておきます。
相対指定と絶対指定については別ページを参照してください。

画像を入れる２

<img src="image.gif" width="50" height="50">

一点だけ、基本的なことだが付け加えておきます。
画像を表示させる際には必ずサイズも指定してやるべきです。
サイズを指定すると、表示が格段に速くなるためです。

また、サイズを実際とは違う値に設定することで、
画像を拡大表示させたり、縮小表示させたりすることもできます。
もっとも・・そうするくらいであれば、ペイントツールで画像のサイズを変えたほうがいいですけれど。

文字修飾・・色

<font color="red">赤い色の文章</font>
<font color="#00ff00">緑色の文章</font>

さて、文字の色を部分的に変更する方法だが、これは意外と面倒です。
個人的には<red>タグでも用意してくれていればいいなと常々思うのですが、
FONTタグのCOLOR属性を使って色を指定する方法は今後も変わらないでしょう。
(たしかに、各色ごとにタグを作っていては何百というタグが必要になるので仕方ありませんよね）

COLOR属性の値は英語で文字の色を指定するか、
16進数で指定してやることになります。
16進数はわかりにくいので、簡単な色に関しては英語で指定してやることをおすすめします。

スタイルシートなどを利用するともっと細かい指定ができるのですが、それは後々ふれることにします。

文字修飾・・サイズ

<font size="+1">一段階大きい文字</font>
<font size="-1">一段階小さい文字</font>

文字のサイズを変更するのにはFONTタグのSIZE属性を利用します。
SIZE属性は、1〜７までの絶対指定か、
今の本文の文字サイズを基準に何段階＋−にするのかという相対指定のどちらかで指定します。
ちなみに、何も指定しないときのサイズは絶対基準の３です。

リンクを貼る

<a href="page2.html">二ページめへ移動</a>

リンクを貼るには、Aタグを利用します。
そして、どのページへのリンクであるかを明示するためにHREF属性を必ず追加します。
（IMGタグのSRC属性と利用方法は似ています）

アドレスの指定は絶対でも相対でもOKです。
また、HREF以外にも役に立つ属性があるのだが、それもおいおい説明することにしたいところです。

タイトルの指定

<head>
<title>私のホームページへようこそ</title>
</head>

さて、本文の基本事項は終わったので、HEADの基礎事項へ移ることにします。
まず、無くてはならないタイトルの指定方法だが、TITLEタグが用意されています。

文字コードの指定

<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
</head>

文字コードは文字化け回避のために絶対に指定するようにしたいところです。
・・少々長くてわずらわしいが、ページ自体が見れなくなる場合は意外に多いです。
下手をすると、どうやっても表示されないことすらあります。（特にMACユーザ）

とりあえずよくわからないという方は、上のソースをそのまま利用してください。
上の例ではShift_JISに文字コードを指定しています。
他に、HTML作成ソフトによってはx-jisなどに指定するものもあるようです。
とりあえず、現在の主流はShift_JISなので、迷ったらこれでいいと思います。

文字コードって一体何？と思われている方がいるかもしれませんが、
それは別の機会に述べることにいたします。

BODYタグの拡張・・背景と文字の設定

<body bgcolor="gray" text="white">
<body background="haikei.gif">

BODYタグの属性を使うことで、背景に関する設定や、文字色に関する設定を付け加えることができます。
BGCOLOR属性で背景色、BACKGROUND属性で背景画像を設定できます。
また、本文の文字色も上のようにTEXT属性で変更が可能です。

BODYタグの属性値は他にもあり、いずれもHTMLの基本とされています。
もっとも、現在はスタイルシートを使ってこれらを記述することが主流になりつつあり、
利用する機会は少なくなりつつあるといえます。

配置

<center>中央にそろえます</center>
<div align="right">右に寄せます</div>

さて、最後にテキストの位置ぞろえの方法を見て、基本を終わることにします。
配置を中央に移すにはCENTERタグが用意されています。
使い方はしごくシンプルで、くくった中身を真ん中に並べてくれます。

一方、右に寄せる際には少々記述が特殊になります。
（左によせるのは何も指定しないので、左に寄せるのは問題にはなりません）
具体的に、DIVタグのALIGN属性を利用し、値にrightを指定してやればOKです。

ところで、DIVタグが重要なのではなくて、この場合ALIGN属性が重要です。
DIVタグはある特定の部分をまとめるために利用するタグで、それ自体は特別な働きはしません。
（つまり、どこからどこまでを右に寄せるかのか範囲を特定するためにDIVというタグは使われます）

初めから、右に寄せたい部分がPタグで囲まれていたら、
<p align="right">右寄せしたい段落の中身</p>
というようにPタグにALIGN属性を指定してやればOKです。
全てのタグにALIGN属性は追加できるわけではありませんが、P,DIVの二つに使えると覚えておけば、
とりあえずは使う上では困らないでしょう。

なお、ALIGN属性の値に「left」を使えば左寄せ、「center」を使えば中央ぞろえもできます。
一応ALIGN属性を使うのが万能な方法で、CENTERタグは裏わざ的なタグということです。
（今のところCENTERタグは問題なくつかえるので、こちらを使うことに問題はありません）

　

テーブルの利用

<table>
<tr><td>左上</td><td>右上</td></tr>
<tr><td>左下</td><td>右下</td></tr>
</table>

表（テーブル）を作るには、TABLEタグを利用します。
まず、表を作りたい領域全体をTABLEタグでくくります（テーブルの宣言）

TRタグでくくった部分が、行（横の枠）になります。
この横一列をいくつかの部分に区切るのにTDタグを使います。
二段目以降は一段目と同じ操作を繰り返すことになります。

上の例は２*２の表です。
初めはなにやらわかりにくいかもしれませんが、
いくつかためしてみればわかるようになると思います。

#細かい表を作成するにはHTMLエディタを使った方が断然楽、かつ早いのでエディタにまかせるべきでしょう。

テーブルの利用・・特殊な形状

<table>
<tr><td></td><td rowspan="2"></td></tr>
<tr><td></td></tr>
<tr><td colspan="2"></td></tr>
</table>

さて問題です。上のサンプルはどのような形の表でしょうか？
すでに即答できる世界じゃないと個人的には思います（苦笑）

テーブルの中の枠ひとつひとつをセルと呼びます。
隣り合うセル同士を結合させることで、テーブルの形状を変えることが可能です。

左右のセルを結合させるには、左のセルのTDタグに COLSPAN属性を追加し、
いくつ分結合させるかを値で指定します。
この操作で右のセルはなくなりましたので、その分のTDタグを消します。

上下のセルを結合させるには、上のセルのTDタグにROWSPAN属性を追加し、
いくつ分結合させるかを値で指定します。
そして、同様に結合された分のTDタグを消します。
（縦に結合した場合、残りのセルの数が足りないような違和感を多少感じるかもしれませんね）

上の例は２*３の表で、右上二つと、最下段二つが結合したものでした。

ところで、表は行列とおなじ数え方をします。
行は横の数、列は縦の数です。

テーブルの利用・・長さの指定

<table>
<tr><td width="200" height="300">横幅と高さを指定したセル</td></tr>
</table>

テーブルについて最後にふれておかねばならないのは、大きさの変更方法です。
TDタグにWIDTH属性とHEIGHT属性というふたつの大きさを指定する属性を追加してやります。
WIDTH属性は横幅、HEIGHT属性は高さです。

上の例では、テーブルのセルひとつの大きさを指定していますが、
テーブル全体の大きさを指定するためにTABLEタグにこれらの属性を追加する場合もあります。
もちろん、予期せぬくずれをふせぐために、両方指定してやるのが無難ですが。

デザイン上の話をしておくと、テーブルを使うとデザインがいとも簡単にくずれるため、
利用する必要性がないのであれば使わない方が無難です。

ただ例外として、スペーサーGIFを併用利用したレイアウトテーブルでのデザインなどがあります。
（主にDreamweaver４での機能です）
細かいデザインの話題については別の機会に取り上げたいと思います。

特殊記号の表示

&copy;　　「c」
&lt;　　「<」
&gt;　　「>」

特殊な記号の表示のさせ方と、
特殊な表示のさせ方をしなければならない記号の扱いについてです。

著作権表示の記号ですが、実は&copy;と打ち込むんですね。
そのように打ち込むと、ブラウザ上では「c」となるんです。

このようなうち方をしなければならない記号は全部で200個くらいあります。
もっとも、そのほとんどは日本語フォントで打てばOKなので、その多くはめったに使いません。

あと、「>」と「<」も特殊なうち方をしないといけません。
なぜかといえば、そのまま打つとタグの断片と認識されてしまうことになるからです。
エディタを使う分には特に気にならないのですが、手打ちでは大変ですよね。

METAタグの拡張

<meta name="description" content="ホームページ作成に関するサイトです。">
<meta name="keywords" content="ホームページ, HTML">

METAタグは文書の情報を指定すための専用タグです。
基本編で文字コード指定についてすでに説明しましたが、ここでは二つ重要なものを追加します。

NAME属性にDESCRIPTIONを指定し、値にページの説明文を記述します。
この説明文は、検索エンジンの検索に使われたり、検索結果で表示されたりします。

また、KEYWORDを指定し、値にそのページのキーワードを指定してやることができます。
キーワードの値ごとは半角のコンマで区切り、コンマの後は半角のスペースをいれるのが正式な方法であると思います。
（半角のスペースは無くてもOKだと思われますが）

検索エンジンではこのキーワードを元にデータ化しますので、
これがあるのと無いのでは検索エンジンでのヒットの割合が大きく異なってきます。

検索エンジン以外の用途では使われないタグですし、
これが無くとも検索エンジン自体にはひっかかりますから、
全てのページにいれなければならないというわけではありません。
トップページなどにいれておけばいいと思います。

リンクの拡張

<a href="index.html" target="_blank">

リンクをクリックすると、通常ならばその画面自体が置き換わりますが、
この際に新しいウィンドーを開かせることができます。
具体的に、TARGET属性を追加し、値に「_blank」を指定してやればOKです。

なお、TARGET属性の値には他に３つあります。
「_self」という値は、通常の状態と同じもので、普段TARGETを省略した場合には
自動的に「_self」が適用されています。

残りの二つはフレームの項目で扱うことにします。

フレーム

<frameset cols="80,*">
　　<frame src="menu.html">
　　<frame src="right.html">
</frameset>
<noframes>
　　このページを表示するにはフレーム機能が必要です。
</noframes>

ブラウザは通常、ひとつのページのみを画面上に表示しますが、
フレーム機能を利用することによりあたかもひとつのページを表示させているようにみせかけながら
複数のページを表示させるということが可能です。

ではなぜ複数のページを表示させたいのでしょうか？
その理由は記述の省略です。
複数のページで同じ表示部分がある際には、
それを各ページに書くよりもひとつのページに書いておいて共有した方が サイトを作る上でずっと楽だからですね。

フレーム機能は、メニューバーや、サイトのロゴなどを各ページで表示させる際に非常に威力を発揮します。
その一方で、ページ構成が複雑になったり、デザインが画一的になってしまう可能性があるという弱点も持っています。

さて、では具体的にどのように記述すればいいのでしょうか？
まず、フレーム機能を利用する際には、ひとつの親ページと、複数の子ページを用意する必要があります。
子ページの方は普通のページでOKで、これが親ページの内部に表示されることになります。

上のサンプルは親ページのHTMLの記述方法です。
まず、FRAMESETタグを用いて、フレームの利用を宣言します。
次に、COLS属性を用いて、中の子ページの表示の大きさを指定しています。
さらに、FRAMEタグのSRC属性により、内部の子ページのアドレスを指定して、子ページを呼び出しています。

NOFRAMESタグは、フレームの使えないブラウザのためのタグです。
仮にフレームにブラウザが対応していなかった場合、NOFRAMEタグで囲まれた部分がメッセージとして表示されます。
（フレームの使えるブラウザではNOFRAMESタグは無視されます）

FRAMEタグと、FRAMESETタグの位置ですが、
HEADでも、BODY中でもない場所に記述します。
<html><head></head>
<frameset></frameset>
<noframe></noframe>
</html>
とりあえずこんな感じでしょうか。
BODYタグは必要ありません。結局表示されないからです。（NOFRAMEタグの中にBODYタグを入れる場合もあるようです）

COLSとROWS
上のサンプルではCOLS属性を使っていますが、これは左右分割です。
もし上下分割にしたい場合には、ROWS属性を変わりに利用します。
（このあたりはテーブルと同じですね）

大きさの指定方法（単位）
数字のみを記述し、単位をつけなかった場合にはそれは自動的に「ピクセル」とみなされます。
ほかに％で大きさを指定することが可能です。例「20%」（半角で記述しましょう）
あと上のサンプルで登場した「*」ですが、これは「残り全て」を意味する特殊な記号です。

上の例では左右分割、左の幅は「８０ピクセル」、右は「残り全て」という記述です。
（中の子ページの数だけ幅の数字を指定するのはあえて言わずともわかりますよね）

その他の例
<frameset rows="*,10%">
上下分割、下の画面の幅を10%に、上は残り全て（この場合は90%と同じ意味です）

フレーム２・・複雑なフレーム

<frameset cols="80,*">
　　<frame src="menu.html">
　　<frameset rows="80,*">
　　　　<frame src="top.html">
　　　　<frame src="main.html">
　　</frameset>
</frameset>

縦と横に同時に分割するフレームの作り方をみていく。
基本は、ひとつづつフレームを区切っていくことである。
まず二分割して、そのうちのひとつのFRAMEタグをFRAMESETタグに変えて、
その部分をさらに分割していることに注目してほしい。

上の例は、縦に分割した後、上下に分割を行っている。
この形状が三分割の中では最も一般的な形状なのではないかと個人的には思う。
（もしくは、先に上下分割して、左右に分割した形状）

フレーム３・・枠の非表示

<frameset rows="80,*" frameborder="NO" border="0" framespacing="0">
　　<frame src="top.html" >
　　<framesrc="main.html">
</frameset>

フレームをそのまま設定すると、フレームの枠が表示されてしまう。
この枠を消すためにFRAMEBORDERとBORDERという属性を利用し、上のサンプルのように指定してやる。

FRAMEBORDERはIE専用、BORDERはNN専用の属性であるため、
わざわざ二種類も指定しなければならないのである。

あと、IE用にFRAMESPACINGという属性もセットで付け加えておくとよい。
これはフレームどうしの間にできる無意味に大きな隙間を消してくれる。

フレーム４・・リンクの指定

<a href="index.html" target="_top">
<a href="index.html" target="main">

フレームを利用した場合、リンクの構成が複雑になります。
まず、フレームを利用した場合にのみ使うことのできるTARGET属性の値が二種類あります。
「_top」と「_parent」の二種類ですが、以下にその効果をみてみます。

「_top」は、フレームを全て解除してページ全体に新しいページを表示させます。
「_parent」は、そのフレームの親フレーム全体に新しいページを表示させます。

つまり、理論上3つ以上のフレームがある場合、全て解除するのが_topで、
一段階だけ解除するのが_parentということです。

ただ、_parentは理論どおりにはIEでもNNでも動いてくれないように思います。
というより、結局_topと同じ効果しかでないように私個人は感じています。
#というわけで、_parentの存在意義は無いと思います。

TARGET属性に、あらかじめ用意されている値を使うほかに、
自分であらかじめフレームごとに名前を決めておけば、
その名前を使って、そのフレームに新しいページを開かせることが可能です。

<frame href="main.html" name="main">
フレームに名前をつけるには、FRAMEタグを指定したときに
NAME属性を追加しておきます。値は好きに決めてOKです。

仮にこのように、あるフレームにmainと名前をつけたとすれば、
上のサンプルのようにTARGET属性の値にmainを指定することで、
そのフレーム中に新しいリンクが開きます。

どちらの方法も、フレームを使うページでは必須のことですので、
ぜひ覚えておいてください。

ページの自動ジャンプ

<meta http-equiv="refresh" content="5,index.html">

よく、「ページは引っ越しました。５秒後に自動的に移動します」という文章を見かけると思いますが、
それをHTMLで行うには、REFRESHと一般に呼ばれる方法を用います。

文書情報を記述するMETAタグですが、少々使われ方が変わっています。
結論から言えば、上記のように記述してやればOKです。
CONTENT属性の中身ですが、最初の数字はジャンプするまでの秒数です。
半角のカンマをはさんで、飛びたいページのアドレスを記述します。

ところで、REFRESHはジャンプに使われることが非常に多いのですが、
本来の役割はリロード（再読み込み）です。
上のサンプルで、content="5"としてアドレス情報を除くと、
５秒ごとに再読み込みを行うようにになります。
（もっとも、リロードなどは通常チャットCGI以外では使わないと思いますが）

文字修飾・・文字修飾のタグその２

<em>強調された文字</em>
<strike>消去された文字</strike>
<u>下線の引かれた文字</u>
<tt>等幅フォント</tt>
<big>一段階大きくなる</big>
<small>一段階小さくなる</small>

さて、初級編に引き続き、文字修飾のタグの拡張版です。
それなりに有名なものばかりですし、使い方によっては役にたってくれると思います。

EMは、強調を命令する論理的タグです。実際の表示は斜体になります。
早い話、Iタグを使った方がいいと個人的には思います。
（語源はemphasis（強調）から来ています）

STRIKEは時々みかける、消去済みの線ですね。
文章の訂正を明記する際に利用されることがあります。
なお、タグが長いので、Sタグという省略タグが用意されています。（効果は同じ）
（語源はstrike outからですね）

Uタグは下線を引きます。
ブラウザ上の表示では、リンクにはかならず下線が入りますが、その下線です。
黒以外の文字のテキストに下線をいれると、リンクと混同されるので止めたほうがいいでしょう。
（語源はunderlineですね）

TTタグはあまりお目にかかるタグではありません。
指定した部分だけ等幅フォントにいれかえてくれるタグです。
プログラムのソースコードなど特殊な文字をみやすくするために使います。
（語源は何なんでしょうね？（＾＾；即思いつきませんが・・）

BIGとSMALLですが、実はこれらのタグで文字のサイズを簡単に変えることが可能です。
もっともひとつだけ欠点があります。
二段階以上サイズを変える際には、複数これらのタグを書かなければなりません。
結果的に、二段階以上ではFONTタグを使った方が記述は楽になります。
（それを差し引いても役に立つタグであるのは確かです）

メタタグの拡張その２

<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="generator" content="IBM WebSphere Homepage Builder V6.0.1 for Windows">

正直な話、ほとんど使う機会はないと思いますが、
ソースコードを開いてみればよく見かける記述ですのでこの場を借りてふれることにします。

文書の書式情報を示すMETAタグですが、
上の方はスタイルシートを利用していることを宣言するためのタグです。
もっとも、このタグが無くてもブラウザの表示が乱れることはほとんど無く、
たとえばHTMLエディタでも、このタグはわざわざ使わないことの方が多いようです。

下のタグは、HTMLエディタを使ってページが作成されたときに、
そのHTMLエディタの名前を表示するためのタグです。
もちろん、ページを表示する際にはまったく関係ありません。

上のタグを頑固に必ずいれるHTMLエディタもあれば（FrontPageExpressなど）、
初めからいれない設定になっているHTMLエディタ（Dreamweaverなど）もあり、
HTMLエディタごとに設定は様々になっているのが現状です。
ちなみに、上の例はホームページビルダーを示しています。

スタイルシートの利用

<style>
<!--
p {margin-left:4%}
-->
</style>

スタイルシートの記述方法の基本となるタグの例です。
スタイルシートを利用するにはSTYLEタグを使い、HEAD中に記述してやります。

スタイルシートとは、HTMLタグの表示の方法を細かく指定するための新しい技術です。
いまやホームページはスタイルシート無しではなりたたないくらい密接な関係になってきており、
HTMLを学ぶ上ではスタイルシートについての知識も必要不可欠です。

スタイルシート自体もHTML以上に複雑な内容になっていますので、
この場で説明しきることは到底不可能です（＾＾；
別に専用の項目を設けることにしてこのHTML講座の方では紹介のみということにさせてください。

ちなみに、上のサンプルを使うと、Pタグの適用範囲全てに対し、
左側に画面の4%分の余白が入るようになります。
（これだけでも、どれほど強力なものなのかがわかるかと思います。）

JavaScriptの利用

<script language="JavaScript">
<!--
document.write("Last updated: "+document.lastModified);
-->
</script>

JavaScriptというプログラミング言語を呼び出すためには、
HTML以外の言語を呼び出すためのSCRIPTタグを使って、
LANGUAGE属性にJavaScriptを指定してやります。

JavaScriptもHTMLとは密接な関係があります。
ホームページ作成を学ぼうとすると、どうしてもJavaScriptの領域に多少なりとも足を踏み入れることになります。
もっとも、この言語はそれ自体で何かすることはあまりなく、他の言語との連携で威力を発揮するものです。

プログラミング言語と呼んでいることからもわかるように、
JavaScriptをマスターするのはHTMLやCSSに比べて段違いに大変です。
文法構造自体が大きく異なりますので、とりあえずは必要最小限を押さえられればいいのかなという感じですね。

上のサンプルでは、ページの最終更新日を表示させています。
たったこれだけで更新日を表示させられるのですから、
うまく使えば非常に役に立つものなのだとわかっていただけると思います。

JavaScriptについても、別コーナーで扱うことにいたします。
この場だけではあまりにも誌面（じゃなくて、画面？）が足りませんので。


雑談的補足
JavaScriptとJAVAは全くの別のものです。（なぜか書店では同一コーナーにおいてありますが）
JavaScriptは「J」と「S」を大文字で記述するのが正式な方法です。（別にそうでなくても動きますが）

なお、JavaScriptの利用が圧倒的に多いのでJavaScriptについてを具体的に扱いましたが、
JavaScript以外の言語も同様にして呼び出します

H1〜H6

<h1>大きな見出し</h1>

見出しをつけるタグです。（サイズを大きく、かつ太字にします）
サイズの大きい順に、H1からH6まで６種類存在します。

利用価値が全くといっていいほどありません。
その理由として、文字の大きさの細かい制御ができないこと、
また、このタグの下に入ってしまう空白部分が非常に邪魔であることの二点があげられます。

一応、もっとも有名なタグのひとつではあるのですけれども。

リスト関連タグ

<ul>
　　<li>「・」リスト</ul>
</ul>
<ol>
　　<li>数字リスト</li>
</ol>
<dl>
<dt>定義したい用語</dt>
<dd>用語についての説明文章</dd>
</dl>

リストを作るタグです。
ULは「・」を、OLは数字を順番につけていきます。
また、用語の定義に使うための専用タグセットDLというものも存在します。

その他、スタイルシートなどとの併用により、
リストの先頭に画像を使ったり、先頭の記号を変えたり、数字を途中から数えたりすることもできます。

が・・
正直なところ、リストの利用価値は私個人はゼロに近いと思います。

理由を多少述べておきます。
１．多少のリストくらいならば、自分でその記号を直接打ちこんだ方が入力はずっと楽です。
２．LIタグなどをいれてしまうと、後々文章の構造を修正する際、修正が困難です。
３．勝手に行間などの指定を変えてしまうため、デザインを指定しにくくなります。
４．リストを多用すること自体がデザインの画一化をまねき、ページの見た目を悪くします。

以上の理由から、私個人は絶対にリスト関連のタグは使いません。
結果的に扱いが小さくなってしまうのですが、ご容赦ください。

BLINK

<blink>点滅させたい文字</blink>

文字を点滅させるには、BLINKタグを用います。
現在ではNNのみ対応しています。（IEは対応していません）

IEがずっと対応させていないことからもわかるように、 点滅文字は非常に不人気です。
とにかく嫌がられますので、あえて解説自体いたしませんでした。

#NNがいまだに対応させているのは、IEとの確執が理由であると考えるべきでしょうね・・
#ちなみに、二番目に不人気なのは、ステータスバーにJavaScriptで文字を流すことです。
ページの最初へ / 文書展示エリア / 竜の情報館トップ , ご連絡　　　　　　-- Copyright © ADRA 2003. All Rights Reserved. ++