平成１４年にホームページの知識を得ようともらい物の「IBMのホームページビルダー（体験版CD-ROM付き)」で学習を始めました。これを使うと簡単に作成できるのですが、表示不具合があると修正がスムーズに行きません。HTMLの基本的な知識は事前に学習していたのですが、CSSをはじめ、JAVAスクリプト、DIVの使い方など断片的な知識をそのつど学習していました。しかし、飛び飛びの学習の為忘れてしまうことが多く、今回自分なりに整理をして効率的、効果的な作成方法をマトメてみようと思いました。今までのホームページビルダーはソースコード入力と編集、その他HP作成上便利なのでそのまま使用していきます。（調べてみるとホームページビルダーは使い勝手が悪いそう（勝手に修正とか画面表示が正確でないなど）で他の便利なHP作成のソフトがあるようですが自分はこれで充分です。）
THMLのバージョンの違いなどは今回触れません。今までの私のHPページはフレームとテーブル（表）をベースに作ってあります。 今回の見出しのページ（ホームページの基礎知識）はいくつかのDIVを解りやすく色別に配置した作りになっており座標のレフト、トップ、ワイド、ハイトの指定とアブソリュート、リラティブ指定、及びそのクリアの例になります。
また、スクロールボックスの表示の仕方として３種類の方法をのせています。
１ <textarea name="xxx" cols="yyy" rows="zzz"> 内容記述</textarea>
テキストエリアを使い内容が指定エリア以上になるとスクロール機能が働く
２ <iframe src="aaa" frameborder=" " marginwith=" "marginheight=""width="xxx" height="yyy" scrolling="yes"****</iframe>
インラインフレームを使って別に作ったページを表示させる。
３ .list{
color:#ffffff;
height:aaapx;
width:bbbpx;
overflow:scroll;他に
/*領域を広げて表示 overflow.visible */
/*隠す overflow.hiden/*
/*ブラウザにまかすoverflow.auto*/
margin-left:10px;
background-color:#0000ff;
padding-top:1em;
text-align:center;
}
以上のようにスタイルで指定する。この場合バックグラウンド、文字色その他の指定が可能になる。
通常パソコンはワープロ、集計ソフト、ゲームとかインターネットを利用したホームページの表示、検索、ネットショッピング及びメール関係、ネット経由のゲームと思います。パソコンを設置するとISP（接続業者）にネットの接続を依頼しますが、最近はDHCPサーバー接続なので簡単に接続が可能です。また装置の接続は自動認識で設定でき以前のような割り込みチャンネル、IOアドレスの設定などの複雑な作業は必要なくなりました。サーバーには色々ありますが、（メールサーバー、ファイルサーバー、WEBサーバー,DHCPサーバー、DNSサーバー、プリンターサーバーなど）HPを管理するサーバーをWEBサーバーといいます。働きは要求のあった端末にHTMLコード、写真、、動画、音声などのイメージコードを送るだけです。又、端末よりのリクエストにより適切な応答を返すのがメインの働きです。サーバーより送られてきたデータはブラウザ（例インターネットエクスプローラー）により解釈され表示されます。この間のデータのやり取りは物理的な通信方式（ハブ、ルーターなどの中継器、光回線、ADSL、電話回線）から始まってデーダリンク、ネットワーク手順、アプリケーションレベルまでの色々な階層により制御されています。アドレス指定にはURL（例http：//www,aaa,bbb,jp/ccc)を指定しますが実際はURLのアドレスはDNSサーバーによりIPアドレスを検索してもらいそれを元にサーバーと接続します。電話にたとえるとNTT電話番号案内に問い合わせ、それを元に電話するイメージです。実際の物理的なやり取りとしてネットワークカードに振られたマックアドレスに基づきデーターのやり取りを行います。この辺は複雑で興味のある方は学習してください。
１ ホームページ（HP）の作成の順序はまず何を（会社の案内、商品、製品紹介であったり、個人、サークルの諸々の紹介であったり）取り上げるかといった目的、ターゲットをはっきりさせ見出しのページ（インデックスページ）のレイアウトを決めそこからどのように他のページにリンクしていくかといった設計をします。
２ その後詳細に背景、文字の大きさ、図案掲載予定の写真のレイアウトなど詳細な設計をします。（色彩感覚、構成の方法などのセンスが必要）この時にフォトショップ、ウエブアニメーターなどのソフトの使い方が必要になります。私はホームページビルダーに付いていたウエブクリエーター、及びフォトショップエレメントを使っています。
３ それを元にHTML、CSS、ジャバスクリプト言語をつかってプラウザで解釈出来るソースコードを作成します。
４ 次にソースコードをWEBサーバーに登録（アップロード）して（FTPなどのアプリケーションを利用する）サーバーにアクセスしてきたクライアントにソースコードを提供します。
５ WEBサーバーは自分でサーバーを立てることも可能ですが一般的には有料、無料のサーバーが提供されています。無料サーバーは広告がポップアップされ、またISPで提供されるサーバーは使用に制限があり（CGIなどのソフトが使えないといった）有料のサーバーを使った方がよさそうです。私は某ケーブルTVのISPの無料WEBサーバーを使用しています（100MBですがCGI使用できず）。月額１０００円以内で200MＢ程度の容量の有料サーバーも最近提供されており、そのうちにそちらに移行しようと思います。
注意することとして、画像などの容量の大きいデーターは圧縮ソフトを使用し、適当なサイズに変換して使用します。通信回線の速度はできるだけ速いものを使います。
HTMLの作成方法及び基本的な事項は色々な雑誌及びHPで紹介され、あらためて述べることもないのですが自分は諸々のホームページ（HP）を検索しては知識を得ていました。雑誌の紹介すれば終わりかなと思うのですが残念ながら雑誌を読んだことがありません。ここでは自分なりに最低必要と思われる事項を復習をかねてまとめてみました。したがって、細かい所は他の手段で学習願います。CSS、JAVAスクリプトも同様です。HTML、CSSは記述に誤りがあってもエラーにならず記述がないものとして扱われます。したがって期待した動作をしない場合スペルの間違いを真っ先に疑う必要があります。
見出し
<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
</HEAD>
<BODY>
<H1>HTML 見出し</H1>
<P>HTML 本文</P>
</BODY>
</HTML>
ＨＴＭＬの基本構成は上記のようになりますが、簡単に説明したいと思います。
<>をタグといいます。注意することとして
必要な部分をタグで囲む
半角英数文字だけを使う
大文字と小文字の区別が無い
途中に余分なスペースを入れない
以下に簡単にタグの説明をします。
<HTML>～</HTML>
このタグで囲まれた部分がＨＴＭＬファイルです。
<HEAD>～</HEAD>
このタグで囲まれた部分はヘッダー情報で、このＨＴＭＬファイルのタイトルなど本文に表示しない情報を指定しています。
<TITLE>～</TITLE>
このタグは<HEAD>～</HEAD>の中で使用します。タイトル部分はブラウザーの一番上に表示されます。
<BODY>～</BODY>
このタグで囲まれた部分が本文となりブラウザー上に表示されます。いくつかのタグと本文がテキスト形式で書かれています。
<HTML>や<BODY>のタグを１つのファイル中に２回入れる使い方はしません。
本文となる body要素内に記述できる要素は、ブロック要素（ブロックレベル要素）とインライン要素（インラインレベル要素）に大別されます。ブロック要素とは｢段落｣｢見出し｣｢リスト｣｢表｣のように文章を構造化する意味をもつ要素で、インライン要素とは｢アンカー｣｢省略語｣｢強調｣など行内容に論理的な意味を持たせたり修飾を行う要素のことです。Internet
Explorer などのブラウザ上の表示もブロック要素は前後に改行をともない表示域の左右いっぱいがその範囲となりますが、インライン要素は新しい行を開始せずにその行内におさまって表示されます。ほとんどの要素が、このブロック要素かインライン要素のどちらかに分類されます。
見出し
<Hn>～</Hn><HR>水平線//</h>は必要なし
<IMG SRC="aaa.jpeg" ALT="写真のタイトルなど">
ＨＴＭＬファイルに写真や絵などの画像を入れるには<IMG SRC>タグを使用します。
<A HREF="URL">～</A>
ＵＲＬで指定されたファイルへジャンプするタグです。これがハイパーリンクを行うものです。
画像をクリックすると、拡大画像と簡単な説明が出るようにします。
実際の使い方は以下のようになります
画像の表示位置及び大きさなどの指定が出来ます。サンプル１をクリックしてください。（ジャバスクリプトを使用しているので使われているパソコンによりセキュリティ保護の為の警告が出る場合があります。適切な応答をお願いします。
デジカメ、スキャナーなどで画像をHPに載せていますがその時に注意することとして幾つかあります。基本的な画像の知識を把握する必要があります。一般的なHPに載せるにはその容量と画面の大きさを大きくしてしますとサーバーよりダウンロードする時間がかかり、なかなか表示できなくなります。いくら高画質の写真を撮っても画面上に表示するには画面の解像度により決まってきますから写真を圧縮して適切な容量にする必要があります。無料の画像圧縮ソフトは色々あります。ホームページビルダーは画像のサイズを指定することによりおおよそ100分の1ぐらいに圧縮されます。（例デジカメ2メガバイトが2kバイト）
以下に基本的な知識の概要を載せました。HP作成するにはこの程度のことは把握する必要があるとおもいますが、必要に応じてより詳しい知識の習得を願います。
ビットマップ画像
画素(ピクセル）を格子状に並べたもので色や輝度の情報が含まれる
解像度（DPI)
ディスプレイ、プリンターなどで縦方向、横方向それぞれ1インチ当たり何ドット分のデータがあるかによりデータのきめの細かさが決まる。この密度のことを解像度(DPI）という。画面上では1ピクセルと同じで1ピクセルの情報は色情報（赤、青、緑の256色ｘ２５６ｘ２５６例 白#FFFFFF）と輝度の情報で構成されています。ディスプレイの表示として横１０２４ドット規格の場合は横14インチの表示装置を使用すると約73DPIとなり、19インチの画面は53DPIとなります。従ってデジカメ写真を例に上げると（３６４８ｘ２７３６、2.24MB、イメージJPEG）の場合丸々表示するには73DPIの場合表示装置（14インチ）は3.5画面が必要になります。印刷装置は600DPIの場合は6インチほどで印刷できます。
FONTの種類
ビットマップフォント
ドットイメージで表示
例 8ドット、16ドット、24ドット、48ドット
スケーラブルフォント
線の位置や、形、長さなどで文字の形を作る為、拡大縮小しても字形に影響が無い
ストロークフォント 文字の形状を中心線だけの情報で保持するフォント形式
アウトラインフォント 文字の輪郭の形状を関数曲線の情報として持つフォント形式。実際に画面や紙に出力する場合は解像度に合わせてビットマップ状に塗りつぶすラスタライズが必要
デジタルデータ圧縮
データ圧縮技術（高度な処理方式になっており興味のある方は各自調べてみてください）を使ってファイルサイズを削減している。圧縮率が設定可能
PNG形式 情報が失われない為、圧縮前の状態に戻すことができる。（W3Cがgifの代わりに支持）
Deflateを利用した可逆圧縮の画像ファイルフォーマット。既存のGIFの機能を拡張、さらにネットワーク経由での使用を想定した機能強化が図られている。ウェブブラウザやグラフィックソフトでのサポートも進み、インターネットを中心に利用が広がっている。
最大16ビットのグレイスケール、24ビットと48ビットのRGBフルカラー、8ビット、または16ビットのアルファチャンネル、さらに最大8ビットのインデックスカラーモードをサポートする。画像に付属するテキストなどのメタデータやガンマ値などを個別に記録できる。
JPEG形式 非可逆圧縮方式。圧縮率が高いが情報が失われる。拡張子は．ｊｐｇ
JPEGでは、画像を固定サイズ（8×8画素）のブロックに分割し、そのブロック単位で、離散コサイン変換（DCT: Discrete Cosine Transform）を用いて、空間領域から周波数領域へ変換する（この変換自体では情報量は削減されない）。変換されたデータは、量子化によって情報量を落としてから、ハフマン符号によるエントロピー符号化がなされ圧縮が行われる。エントロピー符号化とは、データの生起確率の高低に応じて異なる長さの符号を割り当てることで圧縮を行うものである。
以上は解説書の一部を載せましたが良くわかりません。要は色々な計算を実施して情報の効果的な削減をしているようです。
GIF形式 現在ＷＥＢで使用する画像に対してもっともよく使われている圧縮形式の中の１つです。
ホームページ中で色を使える部分は、画像を除くと、背景、文字、表などということになります。この色ですが、パソコンの場合光の３原色と言われる赤、緑、青のＲＧＢ（Ｒｅｄ Ｇｒｅｅｎ Ｂｌｕｅ）で決まっています。それぞれの色の値は０～２５５の２５６段階で表わします。これを１６進数で指定すると、０～２５５（１０進数）は００～ＦＦ（１６進数）の２バイトで表わせます。
ちなみにＲＧＢ各色が２５６段階で表わせると言うことは（２５６の３乗）＝１６，７７７，２１６と約１６７７万段階もの色が表現できます。
ＨＴＭＬではこれらをＲＧＢの順で並べ、２バイト×３で色を指定するという方法を取ります。実際に指定する場合には先頭に＃を付け、””で囲みますので"#123456"のようになります。
２バイトの数値００は光の強さがまったくなく、ＦＦは一番強く光っている状態です。各色がまったく光っていなければ、モニターの電源が入っていないのと同じ色となるので黒になり、逆に全てが一番強く光っていると白となるわけです。下の表は基本的な色を紹介したものです。
色 例 １６進数 color
白 ● #FFFFFF White
赤 ● #FF0000 Red
緑 ● #00FF00 Green
青 ● #0000FF Blue
黒 ● #000000 Black
紫 ● #FF00FF Purple
水色 ● #00FFFF Aqua
黄色 ● #FFFF00 Yellow
茶色 ● #990000 Maroon
色を指定する方法には、"#123456"の表記法以外に英字で指定する方法もあります。表の”color”の列に書いたものが例ですが、ほかにNavy、Olive、Fuchsia、Silver、Teal、Lime、Grayがあります。Grayは上記サンプル中の背景色です。
実際にこの色を指定するためには<BODY BGCOLOR="......">や<FONT COLOR="......">などタグの属性で指定します。
実際の使い方としてCSSで説明しますブロックレベル要素、インナーレベル要素の理解が必要です。
background-image:url(画像ファイルのパス名);で指定します。
●HTMLより1階層下の/imgに画像
background-image:url(img/bg.jpg);
●HTMLと同階層の別ディレクトリ/imgの画像
background-image:url(../img/bg.jpg);
●URLによる画像指定
background-image:url(http://×××.ne.jp/bg.jpg);
cssでの設定
●ピクセルでの指定
background-position:Y座標px X座標px;
●ブラウザ領域に対する比率での指定
background-position:Y座標% X座標%;
CSSでの背景画像設定は全面，縦横だけでなく，繰り返し無しや開始位置を指定するといったこともできます
body{ background-image:url(bg.jpg); background-repeat:repeat-y;
/*縦方向のリピート*/ }
background-repeat:repeat-ｘ;/*横方向のリピート*/
background-position:left bottom;/*起点を指定*/
background-repeat:no-repeat;/*繰り返しなし*/
<TABLE>～</TABLE> で囲まれた範囲を表組にします。罫線を入れたい場合は<TABLE
BORDER>～</TABLE> とBORDERを入れます。
<TR>～</TR> <TR>タグで囲まれた範囲が１行となります。
<TD>～</TD> <TD>タグで囲まれた範囲がひとつのセルになります。
<TH>～</TH> <TH>タグで囲まれた範囲が表の見出しとなります。
ここで<TABLE>～</TABLE>で囲まれた部分が表組されます。この部分は入れ子が可能で<TABLE>～<TABLE>～</TABLE>～</TABLE>のようにも出来ます。
<TR>は行を作るタグ、<TD>はセルを作るタグなので列を作ります。<TH>は表の中の見出しを作るタグです。
<caption>見出しを記述する場合</caption>
<td colspan=n.>右方向にn個の項目を連絡</td>
<td rowspan=n>縦方向にｎ個の項目を連絡</td>
以下の表はCAPTION、TH、TR、TD及びセルの連結のサンプルです。
CAPTION以後は＜TBODY＞列１～E5＜/TBODY＞でグループ化されます。
以下、簡単に説明します
<TABLE border="1" width="474" bgcolor="#cccc00">
WidthでTABLEの幅を、BGCOLORで色を指定しています。
| 列１（TH） | 列2 | 列3 | 列4 | 列5 |
|---|---|---|---|---|
| A1（ｔｄ） | B1C1 | D1 | E1 | |
| A2 | B2 | C2 | D2 | E2 |
| A3 | B3 | C3 | D3D4 | E3 |
| A4 | B4 | C4 | E4 | |
| A5 | B5 | C5 | D5 | E5 |
<TD colspan="2">B1C1</TD>
<TD rowspan="2">D3D4</TD>
<TD width="128" align="center">A3</TD>A３セルは中央にalign="center”A4はalign＝"right"で右寄せしています。
colはtableの中で，captionの次，thead（あるいは最初のtr）の前に書きます。<table>
<caption>～</caption>
<col /> <!--位置はcaptionの下--> <col />
<thead> <!--あるいは最初の<tr>-->
<col class="ｘｘｘ" />という書き方をして，閉じタグではなく末尾が“/>”になります。captionの直下に書かれたcolは，一番左の縦列から順に1列ずつに対応します。三列目を指定したい場合
<col />
<col />
<col class="xxx"/>といった感じで指定し、内容はclassで修飾します。
または
<col span="2" />
<col class="xxx" />になります。
注意col/colgroupが装飾を受け付けないデータが入っていない表そのものに対して，部分的に縦列を定義するタグです。
| width | その縦列の幅 |
| backgroud-* | 背景系指定各種。背景色や背景画像 |
表の枠の表示
boder－style border－colorにより細線を使う方法
<style type="text/css">
table{
/*境界線の設定*/
border-style:solid;
border-width:1px;
border-color:#ff0000;
}
</style>border-collapseによる方法
border-collapseはtableに対してのみ作用するプロパティで，境界線の隙間をどうするかという指定です（表1）。
| 設定値 | 働き |
|---|---|
| collapse | 境界線をくっつける |
| separate | 境界線の間に隙間を空ける（初期値） |
border-collapseを設定しないとseparateが設定されたことになります。
border-collapse: collapse;はtrやtdに対して指定する必要はなく，tr/tdの親であるtableに対してのみ書けば大丈夫です。
th，thead，tfootタグでtableを構造化
一つの画面上にいくつものファイルを表示させる機能をフレーム機能と呼び、<FRAMESET>タグによって作られています。フレーム機能を使う時は
<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
</HEAD>
<FRAMESET>
<FRAME SRC="URL">
<FRAME SRC="URL">
<NOFRAME>
</BODY>フレームが使えない時</BODY>
</NOFRAME>
</FRAMESET>
</HTML>
今回のページ（newexl1.htm）のフレームは以下のようになっています。画面をｆrame1、frame2と左右に分割しています。そしてframe1にsrc="exlvblmidasi.htm"をframe2にsrc="exlvbl.htm"を読み込ませています。
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>パソコンの基礎</TITLE>
</HEAD>
<FRAMESET cols="200,*" frameborder="NO" border="0">
<FRAME name="frame1" src="exlvblmidasi.htm">
<FRAME name="frame2" src="exlvbl.htm">
<NOFRAMES>
<BODY>
<P>このページを表示するには、フレームをサポートしているブラウザが必要です。</P>
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
のようになります。ちょうど<BODY>の代わりに<FRAMESET>が入ったような感じとなります。まずは画面分割を指定する<FRAMESET>の属性から説明します。
COLS="[...]または[...%]"
<TABLE>の説明でも出てきた横方向を指定する属性で、分割する大きさをピクセルか％で指定します。<FRAMESET COL="100,*,50%">と指定すると横方向に３分割になり、左に１００ピクセルの大きさと、右にブラウザー画面上５０％の大きさ、真中に左右の画面の残りの大きさ分だけの画面となります。％を指定した時に合計が１００％を超えないように気をつけて下さい。
ROWS="[...]または[...%]"
COLSとは逆に縦方向を指定する属性で、分割する大きさをピクセルか％で指定します。<FRAMESET ROWS="*,100">と指定すると縦方向に２分割になり、下段が１００ピクセルの大きさ、上段が残りの大きさの画面となります。
SRC="URL"
<FRAMESET>で分割した画面上に割り当てるＨＴＭＬファイル名を指定します。
NAME="..."
<FRAMESET>で分割した画面に名前をつけます。分割した画面に別のファイルを表示させる時に使いますので、同じ名前を他の画面に使ってはいけません。この画面間の移動では<A HREF="..." TARGET="...">を使うのですが、このTARGET="..."のところがNAME="..."で指定したものになります。
TARGET="..."で"_TOP"を指定するとフレーム機能の解除となり、"BLANK"を指定すると新たなブラウザー画面が開きます。
SCROLLING="YesまたはNoまたはAuto"
分割した画面上にスクロールバーをつける(Yes)、つけない(No)、自動(Auto)の指定をします。<FRAMESET>で分割した画面に名前をつけます。
NORESIZE
分割した画面上でのサイズの変更を行わない様にします。
MARGINHEIGHT="..."
分割した画面上で上下にマージンを指定します。大きさはピクセル単位です。
MARGINWIDTH="..."
分割した画面上で左右にマージンを指定します。大きさはピクセル単位です。
以下に三分割したフレームの例を上げました。参考にしてください。
| src="frame_ue.htm" name="ue" | |
| "frame_hidari.htm" name="hidari | frame_migi.htm" name="migi |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<META http-equiv="Content-Script-Type" content="text/javascript">
<TITLE>ホームページ作成の基礎知識</TITLE>
<META name="keywords" content="ホームページ作成">検索キーワード
<META name="descriptition" content="ホームページ作成の基礎知識を自分なりにまとめてみました">検索ロボット用説明文
<META name="robots" content="index,follow">検索方法
<LINK rel="stylesheet" href="common01.css" type="text/css">
<meta>で色々宣言されていますが、その意味はHTMLのバージョン、文字コードの宣言により変わってきます。
Webページを作る言語には大きく分けてHTMLとXHTMLの二つがあり、その中でもXHTML1.0とかXHTML2.0とかいくつかのバージョンがあります。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">はこのままにしときます。ようはHTML4.01バージョンの文字コードはSHIFT＿JISコードを使用することを宣言しています。
<META http-equiv="Content-Style-Type" content="text/css">
<META http-equiv="Content-Script-Type" content="text/javascript">はcss、JAVAスクリプトを使用していることを宣言しています。
<META name="keywords" content="ホームページ作成">
<META name="descriptition" content="ホームページ作成の基礎知識を自分なりにまとめてみました">
<META name="robots" content="index,follow">
このぶぶんは検索ロボットにキーワード、内容を渡す為の項目、インデックスページ以外のページも検索の対象にするかといった内容と単純に考えておきます。
<ul>
<li>Internet Explorer
<li>Netscape Navigator
</ul>
disc：黒丸
circle：白丸
square：四角
<OL>タグではtype属性により、算用数字（1,2,3,...）、アルファベット小文字（a,b,c,...）、 アルファベット大文字（A,B,C,...）、ローマ数字小文字（ⅰ,ⅱ,ⅲ,...）、 ローマ数字大文字（Ⅰ,Ⅱ,Ⅲ,...）を指定することができます。 また、start属性により開始番号を指定できます
タイプ属性
1 - 1, 2, 3, 4, 5, ...
a - a, b, c, d, e, ...
A - A, B, C, D, E, ...
i - i, ii, iii, iv, v, ...
I - I, II, III, IV, V, ...
例
<ol type=a>
<li>Internet Explorer
<li>Netscape Navigater</ol>
、<DL>～</DL>の範囲が定義リストであることを表します。 定義リストとは、定義する用語とその用語の説明を一対にしたリストのことです。 <DT>～</DT>に定義する用語を記述し、 <DD>～</DD>にその用語の説明を記述します。
例
<dl> <dt>HTML</dt> <dd>HyperText Markup Language の略で・・・</dd> <dt>WWW</dt> <dd>World Wide Web の略で・・・</dd> </dl>
見出し
CSS（スタイルシート）とはHTMLに組み込むことでHTML言語で書かれた文字や画像の大きさ、色など視覚デザインを変えることができるものです。
スタイルシートを使用することのメリットには次のようなものがあります。
すべての H1要素に <font color=red>～</font> を指定してまわるよりも、スタイルシートで一度に指定した方が楽になります。外部ファイルで指定しておけば、より一層楽になります。
見栄えを外部ファイルに定義しておけば、それちょっと変更するだけで見栄えを一度に変更することができます。
IEでは、[インターネットオプション] → [ユーザ補助] → [ユーザースタイルシート] で、人のページに自分の好きなスタイルシートファイルを適用することができます。黒地に白文字が好きな人や、大きな字で読みたい人も、自分の好みのスタイルを適用することができます。
＃＋IDセレクタ例＃main
<DIV ID="MAIN">
他に子孫セレクタ 親となるブロック要素がID名「Main」の＜DIV＞要素でその子要素となる<p>要素にだけスタイルを摘要させたいときに使う
#main．ｐ｛----｝
CSSの適用方法は3通りあります。
1つめはHTML内に組み込んで実行させる方法。
2つ目は外部シート(.cssファイル)から読み取って実行する方法です。
3つ目は各々のブロックレベルに記述します。
<head>
<style
type="text/css">
<!--
各々のブロックレベルの適用スタイルを記述
-->
</style>
</head>
外部シートにcssを記述してそれを読み込ませることによりCSSを摘要させます。
本ページでは以下のようになっており<LINK rel="stylesheet"href="common01.css" type="text/css">です
<TITLE>ホームページ作成の基礎知識</TITLE>
<META name="keywords" content="ホームページ作成">
<META name="descriptition" content="ホームページ作成の基礎知識を自分なりにまとめてみました">
<META name="robots" content="index,follow">
<LINK rel="stylesheet" href="common01.css" type="text/css">
<STYLE type="text/css">
<!--
body{
width:500px;/*表示幅を指定*/
}
/*H1{
background-color : #009999;
}*/
H2{
background-color : #c0c0c0;
}
-->
</STYLE>
<FONT color="#ff0000">文字色の指定</FONT>
コメントの書き方
/* と */ の間はコメントとして無視されます。例/*表示幅を指定*/
以前にも述べましたがHTMLは以下のブロック要素で構成されています。そしてブロック要素の中の個別の修飾をインライン要素といいます。例FONT、A（アンカー）COLORなど
<html>
|
CSSでは、ブロックレベルの要素を、ボックスレベルと呼ばれる概念で操作対象とします。
content（内容領域）とは、テキストや画像などの内容が含められている領域のことを指します。padding（パディング）とは、詰め物という意味であるように内容とボーダーとの間に詰め物をしてできる枠内の余白のことを指します。border（ボーダー）とは、padding（パディング）の外側にある枠の領域部分のことを指します。margin（マージン）とは、他の要素（親要素）との見分けをつけるための最も外側にある余白部分のことを指します。注 文字の大きさの指定単位はem（Mを基本文字とした相対的な1文字）
ピクセル 画面上の表示単位としてドットがありそれと同じ。１０２４ｘ７６８など
例 width：100PX FONT-SIZE：１６ｐｘ
文字の大きさを表すのにはfont-sizeで指定します
強調は<em>-----</em>で囲まれた部分はIEでは斜体となる
太字は同様に<b>-----</b>で囲む（ｂはboldの略）
単位はpxとemが主として使われます。ブラウザ標準の文字サイズは16pxであり、その大きさを1としたときの相対値がemとなります。
概要は以下の通り
| 14px＝0.875em | 16px＝1em | 20px＝1.25em | 32px＝2em |
fontプロパティは、フォントに関する指定をまとめて行う際に使用します。 指定できるのは、 font-style、 font-variant、 font-weight、 font-size、 line-height、 font-familyの6つのプロパティの値です。 このうち font-sizeと font-familyは 省略することができません。
また、各プロパティの値を指定する際の順序は以下のように決まっています。
font-styleプロパティは、フォントのスタイルを指定する際に使用します。 指定できる値は、標準（normal）、イタリック体（italic）、斜体（oblique）です。
p.sample1 {font-style: italic; }イタリック体を指定
p.sample2 {font-style: oblique; }斜体を指定
font-variantプロパティは、フォントをスモールキャップにする際に使用します。 指定できる値は、標準（normal）、スモールキャップ（small-caps）です。
スモールキャップとは、小文字の表示形式が小文字サイズの大文字になっているものを指します。 指定したフォントにスモールキャップがない場合には、大文字を縮小したものを小文字として表示します。
p.sample {font-variant: small-caps; }
font-weightプロパティは、フォントの太さを指定する際に使用します。 9段階の太さを指定することができますが、一般的なフォントでは9種類の太さが用意されていることはあまりなく、 フォントの太さとして実際に指定する値は｢bold｣のみで事足りる
font-sizeプロパティは、フォントのサイズを指定する際に使用します
数値にpxやemやexなどの単位をつけて指定します。pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。また、emとはフォントの高さを1とする単位で、exとは小文字の｢x｣の高さを1とする単位です
span.sample1 {font-size: 12px; }
span.sample2 {font-size: 12em;
}
span.sample3 {font-size: 12ex; }
span.sample4 {font-size: 80%;
}
span.sample5 {font-size: 100%; }
span.sample6 {font-size: 120%;
}
span.sample7 {font-size: xx-small; }
span.sample8 {font-size: x-small;
}
span.sample9 {font-size: small; }
span.sample10 {font-size: medium;
}
span.sample11 {font-size: large; }
span.sample12 {font-size: x-large;
}
span.sample13 {font-size: xx-large; }
line-heightプロパティは、行の高さを指定する際に使用します。行の高さには負の値を指定することはできません
p.sample1 {line-height: normal;}
p.sample2 {line-height: 15px;}
p.sample3
{line-height: 1.5;}
p.sample4 {line-height: 200
font-familyプロパティは、フォントの種類を指定する際に使用します
指定したフォントがユーザーの環境にインストールされていない場合には、ブラウザで設定されたデフォルトのフォントで表示されます。
■値
p.sample1 {font-family: "ＭＳ ゴシック",sans-serif; }
p.sample2 {font-family: "ＭＳ
明朝",serif; }
p.sample3 {font-family: Impact,Charcoal; }
colorプロパティは、文字色を指定する際に使用します。
文字色を指定する際には、同時に背景色も指定する
p.sample {
color: #000000;
background-color: #99cc00
}
background-colorプロパティは、背景色を指定する際に使用します
上付き文字、下付き文字の設定
sup要素は文字を上付き文字（例：22）で、sub要素は文字を下付き文字（例：H2O）で表示します。
例 2<sup>2</sup>、H<sub>2</sub>O
数式や化学式、フランス語、注釈を入れる場合などに活用されています。
ルビ
<ruby><rbc><rb>英</rb><rb>語</rb></rbc> <rtc><rt>えい</rt><rt>ご</rt></rtc> <rtc><rt rbspan="2">English</rt></rtc></ruby>
ルビを振る対象となるベーステキストは rb要素で記述
rt要素（ruby text）は ruby要素の中でベーステキスト（ルビを振る対象）に短い注釈をつけるためのルビテキストを記述
複雑ルビマークアップを用いて複合ルビ（ベーステキストの上下にルビテキストをつける）を作るときに、複数の rb要素に1つの rt要素で対応する数を指定。これにより1つの rt要素が複数の rb要素にまたがることが可能となる。
用例
HTMLソース
<ruby style="ruby-position: above"><rb>枸橘<rt>からたち</ruby><br>ブラウザ上の表示
枸橘からたち
マージンは、要素と他の要素とのスペースを指定する余白です。上下左右を個別に指定可能。
指定方法
パラメータが1つの場合 上下左右 ｐ｛margin:1em｝
パラメータが2つの場合 上下 左右ｐ｛margin：1em ５％｝
パラメータが3つの場合 上 左右 下 ｐ｛2em ５％ 1em｝
パラメータが4つの場合 上 右 下 左 ｐ｛margin：1em ０ 2em １０％｝
マージンの相殺に注意 例上下に隣接する要素が2emづつのマージンが設定されている場合相互の要素間のスペースは４emではなく2emになる
ボーダーに対しては太さ、種類、色を個別に指定できる
指定パラメーターの個数はマージンと同様
太さ
例 h2｛border-width：4px 1em｝上下のボーダーの太さ4px、左右1em
種類
h2｛border-style：double solid dotted dashed｝
hidden ボーダーナシ。隣接する要素で重なるボーダーがあっても非表示
dotted 点線
dashed 破線
solid 実践
double 二重線
他にgroove、ridge、inset、outsetなどがある
色
h2｛border－color：navy｝
要素の大きさを膨らませる詰め物。上下左右を個別に指定可能。次のものが指定できる
例 h1｛padding：1em ０ 0.3em 1em｝パラメータの指定方法はマージンと同様
その他必要と思われる事項を挙げておきます。
追記
スタイルの初期化は
*{margin：0；padding：0；border：0；}//ユニバーサルセレクタを使う方法
ｐ、ｈ１、ｈ２、｛margin：0；～｝//タイプセレクタで初期化をする
displayプロパティでは各要素に別の種類を割り当てることができます。
display:block;インライン要素をブロック要素に変える
使い方の例としてはプルダウンメニューを作成するときにアンカー使用のインライン要素をブロック要素に変更する場合など
使い方 A{display:block;}
display:Inline；ブロック要素をインライン要素に変える
display：run-in；"run-in" を指定した要素は、その後に続くブロック要素の中に埋め込まれてインライン要素のように表示されます。
記述例
h2 { display : run-in ; color：#1234546; }
...... <h2>段落に埋もれるh2要素</h2><p>h2要素をのみ込んでしまう段落</p>
display: none; 表示しない
.hide { display: none; }
その他TABLE、LIST関係で色々ありその都度確認が必要です。
a:rink リンクの色を指定
a:visited 過去に訪れたときの色
a:hover カーソルを当てたときの色
デフォルトだとリンクの色は青色、リンク済みの色は紫色で、リンク文字には下線が引いてあります。
参考a{text-decoration:none；}下線を表示したくないとき
特定の<div>内のアンカーaのみに指定したいとき
a．ｘｘ｛text-decoration:none；｝として<a href＝ABC．． class＝xx>を記述する
visibility要素が生成するボックスの表示・非表示を指定します。ただし、要素を非表示に指定しても、その要素が生成するボックス分のスペースは残り、レイアウトにも影響します。要素の生成するボックスのスペースを前後に詰めて何もないものとしたい場合には、display : none ; を指定します。
visible要素が生成するボックスを可視にする
hidden要素が生成するボックスを不可視（透明）にする
collapse表の行・行グループ・列・列グループ要素の範囲を取り除いて、表を詰めて表示する
a.visible { visibility : hidden ; }
a.visible:hover { visibility : visible ; }
...... <a href="image.jpg" class="visible"><img
src="image.jpg" width="320" heihgt="300"
/> hiddenで隠された所にマウスを持ってくると画像が表示される（サンプル１）参照
＃＋IDセレクタ例＃main
<DIV ID="MAIN">
他に子孫セレクタ 親となるブロック要素がID名「Main」の＜DIV＞要素でその子要素となる<p>要素にだけスタイルを摘要させたいときに使う
#main．ｐ｛----｝
記述方法は今までの項目で説明してきました。スタイルシートないしHEAD部に書いた
<style type="text/css">
<!--
各々のブロックレベルの適用スタイルを記述
-->注意ジャバスクリプトの//は入れない
</style>で指定します。
この時class（クラス）属性により定義済み要素で表現できないサブクラスを設定する。
ID（同一ページでは1回しか使用できない）のときの使用方法
例 <DIV MAIN ID＝"section">
#section{body-color:red}で宣言
何回か使用する場合はクラスで宣言する
例p.xx{font-size:1.5em}
p.yy{font-size:0.75em}
htmlで
<p class="xx">----</p>フォントサイズ1.5emにしたい時
<p class="yy">----</p>フォントサイズ0.75emにしたい時
ID、クラスの意味を充分に理解する必要があります。
見出し
JavaScript を用いることにより、ブラウザで表示するウェブページの上で、フォームに入力した値をチェックしたり、時刻を表示したり、ウィンドウの操作、ゲームその他いろいろなことが出来るようになります。以下に基本的な事項とその応用を簡単に説明します。JavaScriptのプログラムは，HTML文書と一緒にブラウザに読み込まれて実行されます。特別なプログラム開発環境や動作環境を用意することなしに，手軽に作成して動かせます。JavaScriptはHTML文書に埋め込むことも，HTML文書とは別のファイルに書くこともできます。
<html>
<head>head部に関数などを記述
<title>サンプル</title>
<script type="text/javascript">
<!-- HTMLでは<!-- コメント-->でくくってコメントになる
ジャバスクリプトのプログラム；
；; コマンドを記述
// --> </script>
</head>
<body>
<script type="text/javascript">body部に記述
<!--
ジャバスクリプトのプログラム；
注意事項
コメントは//以後または/*－－－*/で囲まれた部分
大文字、小文字は別の文字として判断される
// --> </script>
</body>
</html>
HTML文書にJavaScriptのプログラムを埋め込む方法はもう一つあります。それはイベントが発生したときに，特定のプログラムを実行させるもので，書き方は以下のようになります
<タグ名 イベント名="JavaScriptのプログラム">JavaScriptをHTML文書に埋め込むのではなく，HTML文書とは別のファイルに書くこともできます
<script language="JavaScript" src="ｘｘｘｘ.js"></script>
CSSと同様に外部ファイルとしてスクリプトをまとめておく方法があります。
変数は事前に宣言せずに，いきなり使うこともできますが，宣言をしたほうが後でプログラムを見直したときにわかりやすくなります。変数宣言はvarキーワードを付けて行います。
var 変数名;
var 変数名 = データ;
JavaScriptではセミコロン（;），あるいは改行で文の区切りを表します。
英字の小文字と大文字は区別されます
変数に付ける名前は、英字の「a～z、A～Z」、数字「0～9」、「_（アンダースコア）」を使うことができます。ただし、名前の最初に数字を付けることはできません。
変数は通常グローバル変数（プログラム全体で有効な値）として扱われますが、arg1,
arg2, ... 部分に指定した変数や、関数内で var で定義した変数は ローカル変数（関数内部でのみ有効な値）として扱われます。グローバル変数とローカル変数は、名前が同じでも別の変数として扱われます。
例
xx = 5; // グローバル変数 xx に 5 を代入
yy = 5; // グローバル変数 yy に 5 を代入
func(); // 関数 func() を呼び出す
alert("xx = " + xx); // グローバル変数 xx を表示（5 が表示される）
alert("yy = " + yy); // グローバル変数 yy を表示（8 が表示される）
function func() {
var xx = 8; // ローカル変数 xx に 8 を代入
yy = 8; // グローバル変数 yy に 8 を代入
}
参考
VBAでの変数はDim 変数名 as 型 として宣言しますが、Fanctionプロシージャー、Subプロシージャー内での変数はローカル変数として扱われ他のプロシージャーからは変数を参照せきません。通常Dimステートメントで宣言した場合、1つのSubプロシージャを抜けると変数はクリアされます。Dimステートメントの代わりにStaticステートメントを記述することによりモジュールの実行中値を保持します。（Static 変数名 As 型）
JavaScriptにはいくつかのオブジェクトが組み込みオブジェクトとしてあらかじめ用意されており，特に宣言することなくこれらを利用できます。組み込みオブジェクトから新しいインスタンスを作成するには，new演算子を利用します。
配列の機能を提供するArrayオブジェクトには，配列の要素数を示すlengthプロパティが用意されており，要素数を調べたりセットしたりできます。pushは配列に要素を追加するメソッドです。以下のコードでは変数vに21が格納されます。
x = new Array();
x.length = 10;
x.push('abc');
v = a.length; vは１１になる
日付を扱うDateオブジェクトのインスタンスは，以下のコードで生成できます。
now = new Date();
オブジェクトは機能を備えた部品のようなものと考えてください。その部品は，何らかの値（データ）を設定しておけると同時に，与えられた指示に応じた処理を行うことができます。オブジェクトにおいて値を設定しておく仕組みをプロパティ，処理を行う仕組みをメソッドと呼びます。
JavaScriptはオブジェクトとして，日付を扱うDate，文字列を扱うStringといった一般的なもののほかに，ウィンドウ（window）や入力フォーム（form）といったブラウザのGUIを扱うためのものをあらかじめ備えています。
Math（）
数学関連のメソッドやプロパティを実装するオブジェクト
Math.random() 0以上、1未満の乱数を生成します。
Math.round(n) 四捨五入した整数値を返します。
Math.abs(n) n の絶対値を返します。
Math.ceil(n)n の小数点以下を繰り上げた整数値を返します。
Math.floor(n)繰り下げた整数値を返します。
例 乱数を使って1から9の数値を得る方法は
ｘ＝Math.abs(Math.round(Math.random()＊１０）))
| Array |
配列 |
image |
画像 |
| Date |
日付、時刻 |
links |
リンク |
| document |
文書 |
location |
URL |
| form |
フォーム |
Math |
数学関数 |
| frame |
フレーム |
navigator |
ブラウザ情報 |
| Function |
関数 |
Number |
数値 |
| history |
履歴 | String |
文字列 |
オブジェクトのプロパティは，通常の変数と同じように扱えます。ただし，変数名の代わりに
オブジェクト名.プロパティ名
と「.（ドット）」でつないで記述します。同様に，オブジェクトが備えるメソッドを実行するには
オブジェクト名.メソッド名(引数)
と記述します。引数はメソッドを実行する際に引き渡す値で，カンマで区切って複数書くこともできます。引き渡す値がないときには
オブジェクト名.メソッド名()
例
history.go(num)
history.back()
history.forward()
と書きます。
関数の入り口に使う変数のことを、特別に引数（ひきすう）と呼びます
関数の生成
簡単なインスタンスの生成とメソッドの定義、及びインスタンスの生成とメソッドの実行を以下に記述しました。関数もプロパティ、メソッドが組み込みオブジェクトと同様に使うことが出来ます。
<html>
<BODY>
<SCRIPT type="text/javascript">
<!--
function usagi(name){//コンストラクラの定義
this.name=name;
document.write(this.name);
}
usagi.prototype.haneru=function(){//メソッドの作成
alert(this.name+":ぴょんぴょん");
}
kecha=new usagi("けちゃろう");//インスタンスの生成
kecha.haneru();//メソッドの実行
kedama=new usagi("けだま");//インスタンスの生成
kedama.haneru();//メソッドの実行
//-->
</script>
</body>
</html>
func.arity
関数が要求する引数の個数を返します。
function goukei(a, b, c) { return(a + b + c); }
n = goukei.arity;
func.arguments
引数の配列。個数不定の引数を受け取る際に便利です。
function goukei() {
var ans = 0;
for (i = 0; i < goukei.arguments.length; i++) {
ans += goukei.arguments[i];
}
return(ans);
}
sum = goukei(1, 2, 3, 4, 5);
Object.prototype.newName
このオブジェクトタイプに新しい属性を動的に定義します。Number や String
や Function で作成したユーザー定義オブジェクトなど、すべてのオブジェクトタイプに対して使用できます。
Date.prototype.type = null;
dd = new Date();
dd.type = "開始時刻";
document.write(dd.type);
object.toString([radix])
オブジェクトを文字列に変換する際に用いられます。オブジェクトの種類や JavaScript
のバージョンによって文字列のフォーマットは異なります。このメソッドは、オブジェクトを文字列に変換する必要がある時に暗黙的に呼ばれます。以下のようにしてこのメソッドを上書きすることも可能です。
// 日付を YYYY/MM/DD HH:MM:SS 形式に変換する
function myToString() {
var year = this.getYear();
var mon = this.getMonth() + 1;
var date = this.getDate();
var hour = this.getHours();
var min = this.getMinutes();
var sec = this.getSeconds();
if (year < 2000) { year += 1900; }
if (mon < 10) { mon = "0" + mon; }
if (date < 10) { date = "0" + date; }
if (hour < 10) { hour = "0" + hour; }
if (min < 10) { min = "0" + min; }
if (sec < 10) { sec = "0" + sec; }
return(year + "/" + mon + "/" + date + " " + hour + ":" + min + ":" + sec); }
Date.prototype.toString = myToString;
dd = new Date();
document.write(dd); // YYYY/MM/DD HH:MM:SS 形式で表示される
object.valueOf()
オブジェクトの基本的な値を得ます。Number オブジェクトの場合は数値を、String オブジェクトの場合は文字列を、Date オブジェクトの場合は getTime() で得られる値を返します
object.toSource()
オブジェクトの中身の値を得ます。toString()だと [object Object] としか表示されなかったところを、{name:"Suzuki", age:28} や { "AA", "BB", "CC" } などのように、オブジェクトのプロパティまで得ることができます。
文字列を数値
parseInt()、parseFloat()、Number() を用いるか、0 を減算することによっても、変換できます。
str = "123";
num1 = parseInt(str);
num2 = parseFloat(str);
num3 = Number(str);
num4 = str - 0;
n進数に変換する
number.toString(radix)
toString() を用いて、数値を radix 進数（2～36。省略時は10）の文字列に変換することができます。例えば下記の例では、65535
を 16 進数を示す文字列 "ffff" に変換します。
xx = 65535;
alert(xx.toString(16));
不正な数値
Number.NaN
NaN は、数値ではないことを示す特別な値です。== などの比較演算子では使用することはできないので、確認には isNaN() を用います。
var mon = 13;
if ((mon < 1) || (12 < mon)) { mon = Number.NaN; }
if (isNaN(mon)) { alert("月の指定が誤っています。"); }
限界値
Number.MAX_VALUE Number.MIN_VALUE
MAX_VALUE は利用可能な最大値（約 1.79769e308）。MIN_VALUE は利用可能な最小値（約 2.22507e-308）を示します。
xx = 1.8 * 1.0e308;
if (xx >= Number.MAX_VALUE) {
alert("計算可能な範囲を超えました");
}
Number.POSITIVE_INFINITY Number.NEGATIVE_INFINITY
POSITIVE_INFINITY は正の無限大を示す特別な数値。NEGATIVE_INFINITY
は負の無限大を示す特別な数値を示します。乗算などの演算が、JavaScript で扱える値の範囲を超えた場合をチェックすることができます。
xx = 1.8 * 1.0e308;
if ((xx == Number.POSITIVE_INFINITY) ||
(xx==Number.NEGATIVE_INFINITY)) {
alert("計算可能な範囲を超えました");
}
JavaScriptでは、文字列をダブルクォーテーション（"）またはシングルクォーテーション（'）で囲んで表現します。
エスケープ文字
文字列の中では、バックスラッシュ（\）に続く 1 文字は特別な意味を持ちます。これらの文字をエスケープ文字と呼びます。
\n - ニューライン（改行文字）
\f - フォームフィード
\b - バックスペース
\r - キャリッジリターン（復帰文字）
\t - タブ文字
\' - シングルクォート（'）
\" - ダブルクォート（"）
\\ - バックスラッシュ
（\） \nnn - 8進数による文字コード指定（例えば "A" は "\101"）
\xnn - 16進数による文字コード指定（例えば "A" は "\x41"）
\unnnn - Unicode文字（例えば "あ" は "\u3042"）
文字列の長さ
string.length
文字列の長さを求めます。
str = "あいうえお";
alert("これは" + str.length + "文字です。");
文字列の部分取り出し
string.charAt(n)
stringのｎ番目の文字を返す（最初の文字を0番目とする）
string.slice(from [, to])
string の from～to - 1 文字目（最初の文字を 0
番目とする）の文字列を返します。負の値を指定すると後ろから数える点が substring() と異なります。to を省略すると残りのすべてを返します。例aaa．slice（2、15）2から15文字真での文字を抜き出します。
string.substr(from [, len])
string の from 番目から len 文字分（最初の文字を 0 番目とする）の文字列を返します。
ユーザーの操作などのイベントが発生すると，発生したイベントに応じて指定した処理を実行できることがあります。動的なWebページを作る際には，この仕組みを使うことが不可欠です。例えば，ユーザーがブラウザ上のある領域をクリックしたときに，それを検出して画像を入れ替えたり，メッセージを出したりできます
JavaScriptが備える重要な仕組みとして，ユーザーの操作などのイベントが発生すると，発生したイベントに応じて指定した処理を実行できることがあります。動的なWebページを作る際には，この仕組みを使うことが不可欠です。例えば，ユーザーがブラウザ上のある領域をクリックしたときに，それを検出して画像を入れ替えたり，メッセージを出したりできます。
イベントは，マウスやキーボードなどそれを発生させる対象によって種類が異なります。JavaScriptのプログラムが扱う主なイベントは表1の通りです。
表1●JavaScriptが扱える主なイベント
|
例
<img src="blue.gif"
onmouseover="this.src='red.gif'"
onmouseout="this.src='blue.gif'">
onMousemoveについて
マウスカーソルが移動した時に発生します。その位置は次の方法でわかります。
x方向は x=event．ｘ（スクロールされているときはスクロールの量を求めて加算します。ｘ＝event．x＋document．body．scrollleft
同様にY方向は
Y=event．ｙ＋document.body．scrolltop
参考
<html>
<body oncontextmenu="alert('右クリック禁止！'); return false">
このページは右クリック禁止です。<br>
</body>
</
oncontextmenu（オンコンテキストメニュー）は、右クリックで出てくるメニューを表示したことをきっかけにするイベント。
return false起きたイベントをなかったことにしたいというときに使います。この場合、本来は「右クリックされたらコンテキストメニューを表示する」ところを、警告ダイアログを表示して、本来の「右クリックの動作をなかったこと」にしています。
イベントと同様な機能としてタイマー割り込みがあり、ここに上げておきます。
window.setTimeout(script, mse）/clearTimeout(timeoutID)
msec ミリ秒後に指定した処理を行います。script には JavaScript の構文を、func には関数名を記述します。（タイマー割り込みで実行される命令や関数名）
サンプル２参照
例
<script language="JavaScript"><!--
function
tokei()
{
dt=new
Date();
h=dt.getHours();
m=dt.getMinutes();
s=dt.getSeconds();
document.title="時刻"+h+":"+m+":"+s;
}
setInterval('tokei()',1000);
//
--></script>
.setInterval(script, msec/clearInterval(intervalID)
基本的には setTimeout()、clearTimeout() と同様ですが、指定した処理が msec 毎に定期的に実行されます。
「document」とは表示している文章自体を表すドキュメントオブジェクトで「write」は文字列や数字を書き込むメソッドです。JavaScriptではオブジェクトとメソッドを組み合わせてそのオブジェクトに対して行う処理を命令します。
以下の項目は<body> タグで指定する背景色（bgcolor）、テキストの色（text）、リンクテキストの色（link）、クリック中のリンクの色（alink）、参照済みのリンクの色（vlink）に対応する色を示す文字列です。値を代入することで、ダイナミックに色を変更することも可能です。
document.open([mimeType [, replace]])
ドキュメントを開いて書込み可能にします。
document.close()
ドキュメントへの書き込みを閉じます。ドキュメントへの書き込みを閉じます。
document.write(msg [, msg...])
指定したドキュメントに文字列や値を書込みます。writeln() は write() とほぼ同様ですが、最後に改行コードが送り出される点が異なります。
書式：document.write([書き出したい文]);
例
<script
language="JavaScript"><!--
document.write(100);
// 数字を表示する場合
document.write("<br>");
// <br>は改行を表すHTMLタグです
document.write(1+2+3); // 計算式を入れるのもＯＫ！
document.write("<br>HTMLタグを書き込むことも可能
// --></script>
「このページに何処からジャンプしてきたか」「現在のURL、DOMAINは」などの情報を得るには以下のコマンドで出来ます。然し自分のホームページでしたら表示されることが外部からですと表示されなかったり、エラー情報が返されたりします。同様のことがhistory．length/history．current/history．previous/history．nextでも同様なことがありalert（）で表示して確認する必要があります。
document.referrer/document．domain/document．URL
使い方はdocument.write（"何処から" ＋ dokument.referrer）で確認したり
aa=document.referrer で情報を取り込みます。
ついでにhistory.lengthはヒストリの個数を、ヒストリ上の、現在の（current）、次の（next）、前の（previous）アドレス（URL）を示す文字列を返します。
今回のhpを作るにあたってカウンター情報がCGIによりISPより得ていた為、自分の他のページよりトップページに戻るたびにカウントアップしてしまいこれを防ぐ為にdocument．referrerで得た情報をカウントの有無の判断に使いました。
IMG src="http://www.tokai.or.jp/cgi-bin/counter/counter.cgi?usr=kedama&img=rand"
他情報関係としてクッキーがありますが使ったことがありませんので使用したときに解説しようと思います。
window.history
ヒストリ上の、現在の（current）、次の（next）、前の（previous）アドレス（URL）を示す文字列を返します
back() はひとつ前のページに、forward() はひとつ先のページに、go(n) は n 個先のページにジャンプします。n に負数を指定することもできます。
例
<a href="#" onclick="history.back(); return false;">[戻る]</a>
アラートダイアログとはアプリケーション側で用意されている注意を喚起するための小さなウインドウで文字や数字を表示することができます。「OK」ボタンを押すまでウインドウは消えません
例
<script language="JavaScript"><!--
window.alert(100); // 数字を表示
window.alert("文字列の場合"); // 文字列を表示
window.alert(1+2+3);
// 計算結果を表示
window.alert("改行も\nできます");// 改行させる場合
//
--></script>
window.open(url, name [, style])
obj=window.open("URL","ウインドウの名前","パラメータ")
例
w = window.open("test.html", "Test", "width=200,height=200");
name には、<frame> タグの name 属性で指定した名前や、他の open() で作成した名前を指定します。その名前を持つウィンドウがまだ存在しない場合は、その名前を持つ新規ウィンドウが開きます。下記の名前は特別な意味をちます。
| 名前 | 意味 |
|---|---|
| _top | フレーム分割の際のトップフレーム（ウィンドウ）。 |
| _blank | 名前無しの新しいウィンドウ。 |
| _self | 自分自身のフレーム（ウィンドウ）。 |
| _parent | フレーム分割の際のひとつ親のフレーム（ウィンドウ）。 |
style にはウィンドウのスタイルを指定します。n にはピクセル値を、yes | no には yes または no
を指定します。複数指定する場合は、width=100,height=50,menubar=no のようにカンマで連結します。
| パラメータ名 |
説明 |
| toolbar |
ツールバーの表示／非表示 [=yes|no] |
| location |
ロケーションバーの表示／非表示 [=yes|no] |
| directories |
ディレクトリバーの表示／非表示 [=yes|no] |
| status |
ステータスバーの表示／非表示 [=yes|no] |
| menubar |
メニューバーの表示／非表示 [=yes|no] |
| scrollbars |
スクロールバーの表示／非表示 [=yes|no] |
| resizable |
ウインドウサイズの変更可／不可 [=yes|no] |
| left |
デスクトップ左端からの座標。IE、ネスケ7ではOK [px] |
| top |
デスクトップ上端からの座標。IE、ネスケ7ではOK [px] |
| width |
ウインドウの内側の横幅 [px] |
| height |
ウインドウの内側の縦幅 [px] |
window.focus()/window.blur()
focus() はこのウィンドウにフォーカスをあてます。blur() はこのウィンドウからフォーカスをはずします。
window.scrollTo(x, y) /window.scrollBy(x, y)
scrollTo() は絶対座標で、scrollBy() は現在の位置からの相対座標で x、y の位置に画面をスクロールさせます。
window.resizeTo(x, y) /window.resizeBy(x, y)
resizeTo() は絶対座標で、resizeBy() は現在の大きさからの相対座標で、ウィンドウの大きさを x、y に変更します。
window.moveTo(x, y)/window.moveBy(x, y)
moveTo() は絶対座標で、moveBy() は現在の位置からの相対座標で、ウィンドウの位置を x、y の場所に移動します。
window.setTimeout(script, msec)/window.clearTimeout(timeoutID)
setTimeout() は msec ミリ秒後に指定した処理を行います。clearTimeout() は setTimeout() で設定したタイマーを解除します。
window.setInterval(script, msec)/window.clearInterval(intervalID)
定期的に処理を行う時に使います。基本的には setTimeout()、clearTimeout()
と同様ですが、指定した処理が msec 毎に定期的に実行されます。
以上の知識を使ったサンプルを本HPで使った内容を参考に載せます。
<script language="JavaScript"><!--
function winopen(a)//関数winopenを定義
{
winh=0;//変数の初期化
newwin=window.open(a, "abc",//オブジェクトnewwinを定義 "width=600,height=200,top=300,left=200");
newwin.focus();
winScroll();
}
function winScroll()//関数Winscroll
{
winh+=1
if(winh>2000){return;}
newwin.scrollTo(0,winh);
setTimeout("winScroll()",2);
}
--></script>
BODY部分でwinopenの変数aにURL”niwa.htm”をセット
<A href="#" onclick="winopen('niwa.htm')">(サンプル</A>)
見出し
フォームデーターの役割概要（「何を」「誰に」「どうやって」）は以下のようになります。
＜form action＝”CGIのurl”誰に method＝”post”どうやって name=”－－”フォームの名前＞
＜入力コントロール＞何を
＜input type＝”－－” name＝”－－” value＝”－－”＞
＜/form＞
VBAのフォームを使った方は理解が早いと思います。以下に基本的な知識のみ取り上げてみました。自分なりにサンプルを載せていきます。オブジェクトの知識が必要となります。
JavaScript とフォームをくみ合わせることによって、いろいろなことができます。下記の例では、2つの入力フォームに入力した値の合計を表示します。
<script type="text/javascript">
<!-- function func() {
var xx = parseFloat(document.F1.T1.value);
var yy = parseFloat(document.F1.T2.value);
document.F1.T3.value = xx + yy; }
// -->
</script>
<form name="F1" action="#">
<input type="text" name="T1"> ＋ <input type="text"
name="T2">
<input type="button" value="＝" onclick="func()">
<input type="text" name="T3">
</form>
func() では、ドキュメント（document）の中の F1 という名前のフォーム（form）の中の、T1 という名前の部品の値（value）を数値に変換（parseFloat()）し、変数 xx に代入しています。同様に yy に T2 欄の値を入れて、その合計を T3 の欄に表示しています。
<input type="button" value="ボタンの文字" onClick="処理命令">
例
<SCRIPT LANGUAGE="JavaScript">
function back(num)
{
num = num * (-1); // 戻る場合はマイナス値
history.go(num);
}
</SCRIPT>
<FORM METHOD="post">
<INPUT TYPE="button" VALUE="back 1 page" onClick="back(1)">
<INPUT TYPE="button" VALUE="back 2 page" onClick="back(2)">
<INPUT TYPE="button" VALUE="back 3 page" onClick="back(3)">
</FORM METHOD="post">
ボタンのonClickで、back()関数を呼び出しスクリプトが実行される。ページを戻す操作はhistory.go()で行うことができる。
<input type="submit" value="ボタンの文字">
<form onSubmit="処理命令">
document.フォームオブジェクト.submit()
フォームをメールで送信します
<form>の「method」属性を"post"に「action」属性は、
"mailto:メールアドレス?cc=カーボンコピー?subject=件名?body=本文"
または"実行するCGIのURL"
<form>の属性は、「document.フォームオブジェクト.属性」を使って読み書きできます
HTML
<input type="reset" value="ボタンの文字">
<form onReset="処理命令">
document.フォームオブジェクト.reset()
フォームの内容をデフォルトに戻します
チェックボタンとラジオボタン
HTML
<input type="checkbox" name="チェックボックスの名前" checked="true/false">
<input type="radio" name="ラジオボタンのグループ名"
value="参照番号" checked="true/false">
ラジオボタンの「value」属性を省略すると出現順に0からの参照番号が付きます
「checked」属性を省略すると選択されてない状態になります
JavaScript
document.フォームオブジェクト.エレメント（部品）オブジェクト.checked
チェックされているかどうか真偽値(true/false)を返します
テキスト部品をJavaScriptで制御する方法を説明します。
（１）テキストフィールド
HTML
<input
type="text" name="テキストフィールド名" value="フィールドの文字">
（２）テキストエリア
HTML
<textarea rows="行" cols="列" name="テキストエリア名">
テキストエリアの文字
</textarea>
（３）パスワード
◇HTML
<input type="password" name="パスワードフォーム名">
（4）セレクトメニュー
HTML
<select name="セレクトメニュー名">
<option>項目名</option>
</select>
JavaScriptで制御する方法
document.フォームオブジェクト.エレメント（部品）オブジェクト.selectedIndex
選択されている項目の参照番号（０からの通し番号）を示す。
値を代入すると選択項目を変更できる
document.フォームオブジェクト.エレメントオブジェクト.options
オプション（項目）オブジェクトの配列を示す
document.フォームオブジェクト.エレメントオブジェクト.options[参照番号]
（参照番号はセレクトメニュー先頭からの項目数で０からの通し番号）
個々のオプションオブジェクトを示す
document.フォームオブジェクト.エレメントオブジェクト.オプションオブジェクト.text
項目の文字列を返す
例
<FORM METHOD="POST" NAME="f">
<SELECT NAME="sel" ONCHANGE="ChangeSelection(this.form, this)">
<OPTION VALUE="0th? item" SELECTED>0th? item
<OPTION VALUE="1st item">1st item
<OPTION VALUE="2nd item">2nd item
<OPTION VALUE="3rd item">3rd item
<OPTION VALUE="4th item">4th item
<OPTION VALUE="5th item">5th item
</SELECT>
メニューの<INPUT NAME="num" SIZE="20">番目の項目が選択されました。
</FORM>
<HR>
<SCRIPT LANGUAGE="JavaScript">
function ChangeSelection(form, selection) {
v = selection.selectedIndex; // 何番目のものが選ばれたかなので
// VALUEフィールドとは違う
form.num.value = v;
}
</SCRIPT>
メニューが選ばれるとChangeSelection()が実行される。何番目のメニューが選ばれたかはselectedIndexで分かる。最初のメニュー項目が0、次が1、…という値が帰ってくる。
フォームオブジェクトとフォーム部品共通のメソッド・プロパティ
| フォームオブジェクト
document.forms <form>タグに対応するフォームオブジェクトの配列を示す document.forms.length フォームオブジェクトの配列の個数を示す document.フォームオブジェクト document.forms[参照番号]（０からの通し番号） document.forms["フォームオブジェクト"] 個々のフォームオブジェクトを示す document.フォームオブジェクト.属性名(action,encoding,method,name,target) <form>タグで指定できる属性の値を読み書きする ★フォーム部品共通のメソッド・プロパティ document.フォームオブジェクト.elements フォームを構成するエレメント（部品）オブジェクトの配列を示す document.フォームオブジェクト.elements.length エレメント（部品）オブジェクトの個数を示す document.フォームオブジェクト.エレメントオブジェクト document.フォーム名.elements[参照番号] 個々のエレメント（部品）オブジェクトのを指定します document.フォームオブジェクト.エレメントオブジェクト.name 「name」属性で指定したフォーム部品名を示す document.フォームオブジェクト.エレメントオブジェクト.type 「text」や「file」など部品の種類を返す document.フォームオブジェクト.エレメントオブジェクト.form このフォーム部品を含むフォームオブジェクトを示す document.フォームオブジェクト.エレメントオブジェクト.value フォーム部品の「value」属性を示す document.フォームオブジェクト.エレメントオブジェクト.focus() このフォーム部品にフォーカスを移す（選択状態にする） document.フォームオブジェクト.エレメントオブジェクト.blur() このフォーム部品にフォーカスをはずす |
このトップページにDivタグ、Positionを使用したレイアウトの説明を取り上げているので、ここでは各々の説明を簡単にしておきます。
FLOAT、POSITION、ABSORUTEを使用してページ作成するとき画面表示がバラバラになってしまうときがあります。正確な各々の意味を把握する必要があります。
見出し
ポジショニングの方法を、static（既定値：本来の位置）、relative（本来の位置からの相対位置指定）、absolute（絶対位置指定）、fixed（絶対位置に固定）、inherit（継承）のいずれかで指定します。fixed は画面のスクロールに対して固定されます
<span style="position:absolute; top:100px; left:100px;"> <img src="xxx.gif" width=50 height=50 alt="xxx"> </span>
本来表示される位置を基点にして其処よりtop、leftで指定した所に表示される。本来のエリアは残って以後のブロックが繰り上がって表示されない。DIVの中にいくつかABUSOLUTEでDIVを指定して使う場合の基本のDIVはRelativeを指定
divAに対して、relativeを指定すると、基点がPC画面左上から、通常配置の時のdivAの左上に移動します。 その後に、divaをdivAの左上を基点に絶対配置させています。
使い方はtop、left指定と対になり使用する。BODYの絶対位置とかRELATIVEしていしたDIVを基準にした絶対位置を指定する。
画像,div(ブロック）などの表示位置を left（左端）、right（右端）、none（既定値：指定しない）、inherit（継承）のいずれかで指定します。<img> タグの align属性に相当します。right または left を指定すると、テキストがその周りを回り込むように表示されるようになります。回り込みを解除するには clear: を用います。
<img src="xxx.gif" width=50 height=50 alt="xxx" style="float:right;">
clear: clear
float: によるテキストの回り込みを none（既定値：何もしない）、left（左側の回りこみ解除）、right（右側の回りこみを解除）、both（両側の回りこみを解除）のいずれかで指定します。<br> タグの clear 属性に相当します。
clear:both;でfloatを解除します。「HPの基本画面」で解説してありますので参照のこと。
<div> 自身は特に何の意味も持たないタグです。<div>～</div> で囲まれた部分を右寄せしたり、スタイルシートを適用したりするのに用いられます。
div要素は、ひとつのまとまりを定義します。段落を示す
p要素に対して、div要素は、要素をグループ化してまとまりを示す役割をします。div要素の中にはブロック要素を含めたり、div要素を入れ子にすることもできます。視覚ブラウザでは、p要素のような上下に1行分の余白はありませんが、表示域の左右いっぱいまでの範囲を占め、前後に改行を置いた表示になります。div要素単体では、align属性を指定して内容の水平方向の揃え方を指定するといった見栄えの調節ぐらいの役割ですが、id属性や class属性を割り振って構造化し、木構造（ツリー構造）を明示することによって、グループ化した各構造にスタイルシート（CSS）や言語情報に関する lang属性（後継の XHTML では xml:lang属性）、書字方向に関する dir属性を効果的に併用できます。
同様なタグに <span> がありますが、<div> はブロック要素（前後に改行がはいる）として、<span>
はインライン要素（前後に改行が入らない）として定義されています。 span要素も
div要素と同じひとつのまとまりを定義します。div要素がブロックレベルでの範囲を示すの対して、span要素はインライン（行内）レベルでの範囲のまとまりを示します。div要素同様、span要素も単体で使用することはなく、CSS
と組みあわせることで有効的にスタイルを適用できます。
idとclassの役割は全く同じですが、使い方が異なります。idは1ページ内で1度しか使用できませんが、classは何度でも使用可能です。
| a1 | ||
| a2 | ||
| b1 | b2 | b3 |
| c1 | ||
<div id="a1">
タイトル
</div>
<div
id="a2">
メニューバー
</div>
<div id="b">
<div
id="b1" class="section">
左枠
</div>
<div id="b2"
class="section">
中央枠
</div>
<div id="b3"
class="section">
右枠
</div>
<div id=c1 class="section">
オワリ
</div>
見出し
この要素にマウスを乗せたときのマウスカーソルの形状を auto（既定値：自動）、crosshair（十字印）、default（通常のもの）、pointer（ポインタ）、move（移動用）、e-resize（右リサイズ）、ne-resize（右上リサイズ）、nw-resize（左上リサイズ）、n-resize（上リサイズ）、se-resize（右下リサイズ）、sw-resize（左下リサイズ）、s-resize（下リサイズ）、w-resize（左リサイズ）、text（テキスト選択）、wait（待ち）、help（ヘルプ）、inherit （継承）、または URL指定のいずれかで指定します。
マウスカーソルの形を変えるにはスタイルシートの「cursor」プロパティを指定します。
ページ全体でカーソルの形を変える場合
<body ・・・ style="cursor:設定値">
リンク部分だけカーソルの形を変える場合
<a href="・・・" style="cursor:設定値"> ・・・
</a>
一定の範囲だけカーソルの形を変える場合
<div style="cursor:設定値">
</div>
設定値
| 設定値 |
カーソルの形状 |
|
auto
|
重なった部分に応じて自動的に変更する（デフォルト値） |
|
default
|
デフォルトのカーソル形状 |
|
crosshair
|
十字のカーソル形状 |
|
pointer
|
指先のカーソル形状 |
|
text
|
テキスト用のカーソル形状 |
|
move
|
十字矢印のカーソル形状 |
|
wait
|
砂時計のカーソル形状 |
|
help
|
デフォルト＋「？」のカーソル形状 |
|
n-resize
|
上下の矢印、または上向きの矢印 |
|
s-resize
|
上下の矢印、または下向きの矢印 |
|
w-resize
|
左右の矢印、または右向きの矢印 |
|
e-resize
|
左右の矢印、または左向きの矢印 |
|
nw-resize
|
斜めの矢印、または左上向きの矢印 |
|
ne-resize
|
斜めの矢印、または右上向きの矢印 |
|
sw-resize
|
斜めの矢印、または左下向きの矢印 |
|
se-resize
|
斜めの矢印、または右下向きの矢印 |
| url | url(img.cur) |
URL指定のサンプルは以下のようになります。
cursor:url("kecharou2.cur");
scrollbar-base-color は赤系の色とか緑系の色など、スクロールバーのすべての要素の色をまとめて設定します。その他は、影の部分や矢印の部分などそれぞれの要素の色を個別に指定します。
下記のスタイルシートを<head>～</head>タグ間に挿入します
テキストエリアに用いる時<textarea rows="列数" cols="行数" style="スタイル"を挿入します。
べースカラーで指定する場合
<style type="text/css>
<!--
body{scrollbar-base-color:#dddddd;}
-->
</style>
細かく指定する場合
| <STYLE TYPE="text/css">
<!-- BODY { scrollbar-face-color:#33CCFF; scrollbar-track-color:#C0FFFF; scrollbar-arrow-color:#4040FF; scrollbar-highlight-color:#87E4FF; scrollbar-shadow-color:#00A9DA; scrollbar-3dlight-color:#FFFFFF; scrollbar-darkshadow-color:#007698; } --> </STYLE> |
←①ボタン部分を指定します ←②レール部分を指定します ←③矢印を指定します ←④内側のハイライトを指定します ←⑤内側の影を指定します ←⑥外側のハイライトを指定します ←⑦外側の影を指定します |
アドレスバーやタブにアイコンを表示します。
アイコンのファイルをサーバーにアップして、<head>～</head>タグ間に次の一行を挿入するだけでＯＫ
<link rel="SHORTCUT ICON" href="アイコンのファイル名.ico">