· web viewhtmlタグの属性としてid と class が使えます。id...
TRANSCRIPT
ホームページ作成教室
テキスト
（Windows7 用）
目次
◆ Web ページ作成アプリ····························································1◆ Web サーバ内のフォルダ名称，ファイル名称····························2◆ html ファイル（Web ページの一つ）◆ html ファイルの真似（コピペ）の方法◆ html ファイルの基本構造························································4
■ html タグ··············································································5① title タイトル② h1, h2, h3, ・・・ 見出し③ br 改行④ p 段落改行，パラグラフ⑤ hr 罫線⑥ address アドレス································································6⑦ リスト⑧ center センタリング····························································7⑨ font, b, i, u, s 文字修飾⑩ body ページに色を付ける⑪ a リンク·············································································8⑫ table テーブル··································································10⑬ イメージ·············································································12⑭ コメントと特殊記号·····························································15⑮ pre
◆ フレーム··············································································16◆ head のタグ·········································································18◆ html バージョン（doctype 宣言）·········································19◆ 文字コードの変更方法···························································20◆ リダイレクト
■ スタイルシート css······························································21◆ スタイルシート css を書く場所◆ id，class による修飾◆ div と css を使ったボックスレイアウト··································22◆ スタイルシート css によるフォント指定·································23◆ スタイルシート css による相対フォントサイズ指定·················24◆ リンク元の装飾·····································································25
1
■ JavaScript···········································································26◆ オンマウス（ホバー）で画像が入れ替わるリンク◆ JavaScript を書く場所◆ html ファイルの更新日◆ ページ戻り···········································································27
■ １６進法··············································································28
2
◆ Web ページ作成アプリ
代表的なものは，
ＩＢＭ ホームページビルダー
ＭＳ フロントページ
本講習では使用しません。
・理由
① このアプリの使用法を覚えるよりプログラム（html タグ）を覚え
るほうがはるかに簡単です。
② Web ページを作成するコツは，お気に入りの Web ページを真似す
る（コピペする）ことです。そのため，プログラム（html タグ）
の文法を覚える必要はありません。判らないことはググればよい
です。
③ Web ページはメンテナンスの頻度が高く，メンテはプログラム
（html タグ）を直接修正するほうがはるかに簡単で短時間ででき
ます。
・利用したほうが良い場合
① 自動で文法の誤りを修正してくれます（正しいものまで変に修正し
てくれます）。
② 飾り文字をつくるツールが豊富です。が，覚えるのがたいへん。代
替ツールが WORD にあります。
③ アニメ GIF をつくることができます。
3
◆ Web サーバ内のフォルダ名称，ファイル名称
ディレクトリは半角英数（half-width alphanumeric characters, English one byte characters）とします。
半角をタイプするときは，最初から半角入力モードにしておきタイプし
ます（理由；全角でタイプしてからスペースキーで半角を選ぶと異なる文字
になる可能性があるから）。
半角スペースは使わない。代わりに半角アンダーバー underscore を使い
ます（理由；半角スペースを受け付けない Web サーバがあります）。
◆ html ファイル（Web ページの一つ）
html ファイルはただのテキストファイルであり，メモ帳（Note Pad）
で編集できます。本講習では，テキストエディタとしてつぎの２つを使い
ます。
① TeraPad② HeTeMuLu Creater
テキスト；コンピュータの世界では，文字コードで表現されたものを言
います。画像との区別はドラッグで一文字ごとに選択できることで判りま
す。
html ファイルのプログラミング言語はつぎの３つあります。
① HTML（大半はこれを使います）
② スタイルシート css（覚える必要はなくコピペのみ）
③ JavaScript（覚える必要はなくコピペのみ）
◆ html ファイルの真似（コピペ）の方法
① Web ページをブラウザで閲覧しているとき，
メニュー→表示→ソース
でソースコードが表示されるので，それをドラッグしてからコピペしてく
ださい。これがデッドコピーできる唯一の方法です。
4
ソースを表示するアプリはディフォルトが「メモ帳 NotePad」です。こ
のアプリを「HeTeMuLu Creater」などに変更する方法はググってみてく
ださい。パソコン内の html ファイルのソースの表示も同じ方法です。
② Web ページをブラウザで閲覧しているとき，
メニュー→ファイル→名前を付けて保存
→Web ページ，完全（*.htm;*.html）でダウンロードできます。一緒にできるフォルダにはダウンロードした
html ファイルにリンクされているイメージなどが入っています。この方法
はリンク先が変わってしまい厳密なデッドコピーではありません。
③ 特別なアプリを使えば，サイトまるごとダウンロードできます。
④ ブラウザで見れる画像は何でもダウンロードができます。
右クリック→名前を付けて画像を保存
注記；パソコンで普通に使っているファイルはダウンロードできるが，特
殊なファイルでダウンロードできないようになっているものもあります。
5
◆ html ファイルの基本構造
デスクトップで右クリックメニュー→新規作成→テキストドキュメント
で txt ファイルができます。閉じてから txt拡張子を「htm」または
「html」拡張子に書き換えます。Ｗクリックで開くとブラウザが起動しま
す。
出来上がっている html ファイルのソースコードを見てみると，その基本
構造は，次のようになっています。
テキストエディタのタブ，改行は，ブラウザで認識されません（タブ；
カラム区切り）。テキストエディタの半角スペースは一定幅に表示されま
せん。改行はタグ，半角スペースは特殊記号として書きます。
ブラウザで見ている html ファイルのソースを修正したあとは，ソースを
保存してブラウザのウィンドウを表示してから，F5 でリロードすると表示
が更新されます。
上の枠内を html ファイルにコピペしてください。そして次項の枠内を
<body>内にコピペするとそれがブラウザに表示され，タグの動作がよく
理解できるようになります。
6
<html><head><title>ホームページ作成教室</title><!-- title はブラウザの最上欄に表示されます --><!-—ここの詳細は「◆ head のタグ」を参照 --></head><body>ここに書かれたテキストがブラウザに表示されます
<a山カッコ内はプログラム（タグ）として認識されブラウザに表示されません><!-- ここにコメントが書けます --></body></html>
■ html タグ
前項を参考にして html ファイルを作成してください。<body>内に本項
の枠内をコピペすると html タグの動作を実際に見ることができます。
① title タイトル
これだけは<head>内に書きます。ブラウザの最上欄に表示されます。
お気に入りにも表示されます。Web ページには表示されません。例は前項
にあります。
② h1, h2, h3, ・・・ 見出し
ブラウザで見れる Web ページのタイトルは body の最初あたりに書きま
す。
③ br 改行
④ p 段落改行，パラグラフ
⑤ hr 罫線
7
<h1>大きい文字</h1><h2>少し大きい文字</h2><h3>標準的な大きさ</h3><h4>少し小さい文字</h4><h5>小さい文字</h5>
改行は<br>すきなだけ<br>入れても<br>よいです<br><br>ただし見やすくなるように入れましょう<br><br>
エディタの改行と TAB はブラウザでは 反映されませんので注意してください
<br><br>
この下にあるのが"hr"です<hr>
<p>これはパラグラフです</p><p align=left>左寄せパラグラフです</p><p align=center>中寄せパラグラフです</p><p align=right>右寄せパラグラフです</p>
⑥ address アドレス
Web ページでは自分のメールアドレスをテキストで書いてはダメ。とん
でもない数のブラックメールを受信することになります。@マークを別の
文字にして（例えば，★）@マークに戻すことを注記して公開してください。
⑦ リスト
⑧ center センタリング（このタグは非推奨です）
8
<address>このホームページに関するお問合せは<br><a href="http://www.geocities.jp/yamakatsusan00/index_com.html">http://www.geocities.jp/yamakatsusan00/index_com.html</a><br>E メール：<a href="mailto: yamakatsu@????.co.jp?subject=【ホームページ作成教室】">yamakatsu@????.co.jp </a><br>住所：〒000-0000 ○○県○○市○○町 0-0-0<br>ＴＥＬ：000-000-0000<br>ＦＡＸ：000-000-0000</address>
<ul><li>こんな感じで</li><li>文の先頭に「・」がつく</li></ul>
<ol><li>こんな感じで</li><li>文の先頭に番号がつく</li></ol>
<dl><dt>作者</dt><dd>ジョン</dd><dd>ポール</dd><dd>ジョージ</dd><dd>リンゴ</dt></dl>
<dl><dt lang="ja"><dfn>色</dfn></dt><dt lang="en-US"><dfn>color</dfn></dt><dt lang="en-GB"><dfn>colour</dfn></dt><dd>可視光線の波長の長短によって人が視覚で感じ分けられる色覚・色刺激のこと。</dd></dl>
<center>この文字はセンタリングされました</center><br>
⑨ font, b, i, u, s 文字修飾（このタグは非推奨です）
色の定義については次を参考にしてください。
http://www.geocities.jp/yamakatsusan00/colorsample.html
・色のつくり方
スタート（旗）→すべてのプログラム→アクセサリ→ペイント
→ホームタブ→色の編集（タブ；ページ区切り）
RGB のカラーコードを選択し，このダイアログの RGB に 0～255 の 10進数を記入します。また，次の項では，html ファイルの背景を着色できま
すので，カラーコードと実際の色の関係が判るようになります。
⑩ body ページに色を付ける（この属性は非推奨です）
9
<font size="5" color="#ff0000">この文字は"font"によりサイズと色を定義しました</font><br><b>表示文字が太文字（ボールド）になります</b><br><i>表示文字が斜体（イタリック）になります</i><br><u>表示文字にアンダーラインが引かれます</u><br><s>表示文字に取消し線が引かれます</s><br>
<body background="" bgcolor="#ffcc99" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
text 文字色の指定link リンク色の指定vlink 一度リンクしたことのある色の指定alink リンクをクリックしたときの色の指定bgcolor 背景色の指定background 背景イメージの指定
⑪ a リンク
リンク先の指定には，サイト外へリンクする外部リンクとサイト内へリ
ンクする内部リンクがあります。
リンク元は，ブラウザの見た目で，文字でも画像でもできます。画像の場
合はイメージリンクを使います（img タグは後述）。
基本的な書き方は，リンク元が文字と画像の場合があり，
<a href="リンク先">リンク元</a><a href="リンク先"><img src=" 画像の保存場所 "> </a>
と書きます（下線のところでカーソルが指マークになる）。
・外部リンク
リンク元の書き方が 3種類あります。
1番目の書き方は，a タグに挟まれているリンク元が文字であり，ここに
何を書いてもかまいません。
2番目の書き方は，ブラウザの見た目で，リンク元が URL のように見え
ますが，あくまでもリンク先はタグの属性に書かれていて，1番目の書き方
のように，ブラウザから見えるリンク元の文字は間違えていても／別のこ
とを書いても支障ないことになります。
3番目の書き方はリンク元が画像です（img タグは後述）。
内部リンクも外部リンクのようにリンク先に URL を書くことができますが，
次のように相対的なディレクトリで書くことが普通です。
10
<a href="http://www.geocities.jp/yamakatsusan00/index_com.html">公開講座ホームページ作成</a><br>
<a href="http://www.geocities.jp/yamakatsusan00/index_com.html"> http://www.geocities.jp/yamakatsusan00/index_com.html</a><br>
<a href="http://www.geocities.jp/yamakatsusan00/index_com.html"><img src="images/mouse.gif" border="0" alt="公開講座ホームページ作
・内部リンク（同じページ内にジャンプ）
・内部リンク（同じフォルダ内の別ファイルへリンク）
・内部リンクの相対パスの書き方
【重要な注意】サイト内のファイルはリンクされていなくても見ることが
できます。ブラウザの URL窓にフォルダのディレクトリをタイプするだけ
で見れます。外部リンクの例の .jp/ の後がフォルダで末尾がファイルです。
11
<a href="#ここに">どこへ飛ぶのですか</a><br><br>
<a name="ここに">ここへ飛びました</a><br><br>
<a href="参照先.htm">参照先</a><br><br>
<a href="参照先.htm#ここに">参照先のここに</a><br><br>
<a href="bbb.html">同じフォルダの bbb.html にリンクします</a><br><a href="./bbb.html">同じフォルダの bbb.html にリンクします</a><br><!-- 先頭の"./"は自分と同じ位置を指します --><a href="B/ccc.html">下位フォルダの ccc.html にリンクします</a><br><a href="./B/ccc.html">下位フォルダの ccc.html にリンクします</a><br><!-- 先頭の"./"は自分と同じ位置を指します --><a href="../C/ddd.html">上位フォルダの ddd.html にリンクしま
⑫ table テーブル・テーブルとタグの関係
上のように表示されるテーブルは次のように書かれています。
テキストをセルのセンターに配置するには，
table タグの属性の詳細はググってみてください。スタイルシート css を
使った方が簡単になることが多いです。
12
<tr><tr>
<table>
</table>
<td>
<table width="600" height="" border="10" cellspacing="10" cellpadding="10" bordercolorlight="" bordercolordark="" bordercolor="" bgcolor="" background=""> <tr> <td>あ </td> <td>い </td> <td>う </td> </tr> <tr> <td>え </td> <td>お </td> <td>か </td> </tr></table>
<td align="center" bgcolor="" background="">あ </td>
td {color: #000; text-align: center;}
</tr>
</tr></
td>
<td> </
td>
<td> </
td><td> </
td>
<td> </
td>
<td> </
td>
あ い
お
か う
え
・セルの列結合と行結合
この例のソースは，下記要領で簡単につくることができます。
・最初に４行８列のテーブルをつくる。
① セルをつくります（例；<td>あ</td>）
セルの中が空欄だとセルが表示されないので任意の文字を入れておく
② 改行も含めてコピペして８セル分をつくる
③ ８セルを<tr></tr>で囲む
④ 改行を含めてコピペして４行分をつくる
⑤ 全体を<table></table>で囲む
注記；td の代わりに th を使えばボールドになります（見出しにつかえる）。
・結合する
① １行１列と１行２列とを結合して，１行２列のセルを削除する
② １行１列と２行１列，２行２列を結合して，２行１列，２行２列を削除
する
③ ２行３列４列５列を結合して，２行４列５列を削除する
④ ２行６列７列８列を結合して，２行７列８列を削除する
⑤ ３行１列と４行１列を結合して，４行１列を削除する
テーブルは表の作成ばかりでなく，Web ページの全体レイアウトにも使
うこともできます。そのとき，行結合，列結合を多用します。
ただし，ボックスレイアウトには，table タグの代わりにスタイルシート
css で修飾した div タグが使うことができます（詳細後述）。
13
⑬ イメージ
・html ファイルでリンクする画像の種類は（本講習では動画は扱わない），
・アイコン（自作することはない，他の Web ページから D/L コピペ）
・デジカメ写真（トリミング，リサイズ，圧縮をツールを使ってや
る）
・図，ロゴ（他の Web ページ（図集）から D/L して切り貼り編集）
・リンクできる画像の形式は，
・JPG；ジェイペグ ・PNG；ピング ・GIF；ジフ
・BMP；ビットマップ（ファイルサイズが大きく Web には使わない）
BMP は Windows の標準であり，１画素の RGB各色に１バイト＝８ビッ
トつまり RGB各色が 00～ff で 256階調を表現できます。これは HTML の
色指定と同じです。ちなみにファイルサイズは，画素数×３バイトになりま
す。
画素数は，JTrim で右下に表示されます。キロ掛けるキロがメガになりま
す（M=k×k）。例として，4,000×3,000 は 12 メガピクセルになります。
・PNG； ピング
PNG のロスレス圧縮とは，完全に BMP と同じであることが保証されてい
て，可逆といわれ，BMP に戻したときオリジナルと完全に同じなる。ファ
イルサイズは，1/2～1/3 になります。
・JPG；ジェイペグ
JPG のロス圧縮とは，情報の一部が失われ，非可逆です。その代り，ファ
イルサイズはかなり小さくできます。デジカメ写真は，JPG形式です。
デジカメ写真のトリミング・リサイズ・圧縮の方法は，次の Web ページ
を参照してください。
http://www.geocities.jp/yamakatsusan00/jtrim.htmlJPG は保存するたびに再圧縮され情報が失われて品質が落ちるので，事前
に PNG または BMP に変換しておき，この形式で加工後，最後に JPG に再変
換するとよいです。
14
・GIF ジフ
GIF，アニメ GIF は自作はあまりやらないです。自作したいときは，IBM ホームページビルダーにツールがあります。アイコンの多くが GIF でつく
られていますが，アイコンは PNG でつくるべきです。
・イメージリンク
リンク先，リンク元とも画像の例
TIPS；解像度とは
Web上の画像を印刷する場合，JPG，PNG，BMP，GIF などどの形式でも，
また JPG の解像度がどんな値が設定されていても，それの印刷解像度は
96dpi（ドット・パー・インチ）になります。画像ファイルを JTrim などで
印刷する場合も同じです。
96dpi の意味するところは，100%印刷時に，ディスプレイ上の 96 ドッ
ト分の長さが印刷紙上で 1 インチ＝25.4 ミリになるということです。
ペイントのプロパティには JPG のみ解像度が表示され，デジカメ写真 JPGではすべて 72dpi（ドット・パー・インチ）である。これは何を意味する
のか。
WORDワード，EXCEL エクセルなど Office 文書に貼り付けた JPG 画像
を印刷する場合は，この設定された解像度で印刷されます（この標準が
72dpi）。 ただし，Office 文書に貼り付けた画像の解像度が設定されてい
ない場合（JPG で 0 を設定したときや JPG以外の画像）の印刷解像度は，
96dpi です。
TIPS；html ファイルに貼り付けたデジカメ写真の印刷寸法を決める
例えば，印刷寸法の横幅を，100 ミリメートルにしたいとき，画像ファ
15
<img src="./images/37896.jpg" border="0" alt="印刷寸法横 100 ミリ"><br>
<a href="./images/デジカメ写真.jpg"><img src="./images/9496.jpg" border="0" align="" alt="大きくなります"></a><br>
イルの横の画素数が，
100 / 25.4 * 96 = 378 ドット（ピクセル）
になるように，JTrim でデジカメ写真/画像ファイルをリサイズします。JPGを JTrim で開いて，
イメージ→リサイズ→サイズで指定する→横：378→OKこのまま JTrim で，倍率 100%で印刷しても，横幅が 100 ミリメートル
になります。このままでは画質が良すぎてファイルサイズが大きすぎます。
・IJG 画質（JPEG品質）を 75 にする
ファイル→名前を付けて保存→ファイルの種類を JPEG ファイル
→設定→JPEG タブ→保存の品質→品質を数値で指定する→75→OK品質 75 は WindowsXP のペイントと同等であり，html ファイルに貼り
付けるのには十分です。Exif データは保持しないようにします。
JPEG品質； 98, 96 デジカメ写真ファインモード
90 デジカメ写真ノーマルモード
75 XP ペイント並み，Web はこれで十分
非可逆であるので，いちど品質を落としてしまうと，そのあと品質を上
げても無意味になります。加工・保存を何回もする場合は，事前に，BMPまたは PNG に変換しておき，最後に，JPG に再変換します。
TIPS；デジカメ写真 JPG を写真用紙に印刷する （Web ページと関係ない番
外）
写真用紙に印刷するときは，写真解像度が，300～350dpi以上必要です
（印刷業界のプロの意見です）。前項で説明したように 100%印刷時の解像
度は，96dpi ですので，写真用紙にきれいに印刷するには 3倍以上（1/3以下）の圧縮印刷すればよいことになります。
① 写真用紙が決まっている場合
例えば，KG サイズの長手は，152 ミリ，はがきは，148 ミリであり，
約 150 ミリ / 25.4 × 300dpi = 約 1800px
16
デジカメ写真の必要な画素数は，長手が，1800px以上となります。これ
を印刷用紙に合わせて印刷すると，約 1/3 の圧縮印刷となります。
② 印刷寸法が決まっている場合
例えば，身分証明用 30 ミリ×40 ミリにしたい場合は，
30 ミリ / 25.4 * 96 * 4倍 = 454 ピクセル（写真解像度は，384dpi）40 ミリ / 25.4 * 96 * 4倍 = 605 ピクセル
454 ピクセル×605 ピクセルの大きさに加工して，JTrim で額縁を付け，
印刷倍率 25%で印刷すればよいです。JTrim で次のように印刷します。
ファイル→印刷プレビュー→倍率指定 25%→印刷
次の Web サイトを参照してください。
http://www.geocities.jp/yamakatsusan00/IDphoto.htmlhttp://www.geocities.jp/yamakatsusan00/resolution.html
⑭ コメントと特殊記号
特殊記号については，HeTeMuLu Creator の
メニュー→タグ→特殊記号
を参照してください。
⑮ preソースの見た目のままを表示します。ブラウザに半角スペース，改行，タ
ブが反映されます。
17
<!--実はみえないところにコメントがあります--><!--コメント--><br>HTML ソース上にちょっとしたメモを書き込むことができます。コメントはページ上には表示されません。<br>特殊記号 &"©®
pre の例です<br><pre>Tue Dec 7 14:38:27 JST 2010 大雪 255Wed Dec 22 8:38:12 JST 2010 冬至 270Thu Jan 6 1:54:22 JST 2011 小寒 285Thu Jan 20 19:18:16 JST 2011 大寒 300Fri Feb 4 13:32:39 JST 2011 立春 315Sat Feb 19 9:25:12 JST 2011 雨水 330Sun Mar 6 7:29:47 JST 2011 啓蟄 345Mon Mar 21 8:20:44 JST 2011 春分 0</pre>
18
フレーム
右窓・右頁
左窓・左頁
◆ フレーム
フレームのソースは普通の html ファイルとは異なり，body の代わりに
frameset になります。各頁のソースは普通の html ファイルです。各頁を
フレームを使わずに見る方法は，フレームのソースにトップページの左頁
と右頁のディレクトリが書いてあります。トップページ以外は，左頁（た
いていメニューである）のリンク先にディレクトリが書いてあります。ブ
ラウザの URL を直接書き換えれば，各頁が単独で表示されます。または，
左頁のリンク元を，SHIFT+クリックすれば，各頁が単独で表示されます。
・フレームのソース
・左頁のソースのリンク部分
左頁（たいていはメニュー）からのリンクをフレーム内の右窓に表示す
る場合は，次のタグを head に記入します。
19
<html><head><title>法務部</title><meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"></head><frameset cols="240,*"> <!-- 左頁と右頁の幅 --> <frame name="menu" src="menu.htm"> <!-- 左窓の名前と左頁のディレクトリ --> <frame name="cont" src="title.htm"><!-- 右窓の名前と右頁のディレクトリ --> <noframes>フレーム対応のブラウザで閲覧してください </noframes></frameset>
次のような例もあります。
クリックしたときの新ページの表示のしかたが異なります。
target="_blank" 新しいウィンドウを別に 1枚生成し，表示します。target="_self" 現在の（リンク元の）フレームに表示します。target="_parent" リンク元のフレームの親フレームに表示します。
target="_top" すべてのフレームを破棄し，ウィンドウに表示します。
１枚の html ファイルのすべてのリンクにおいて新しいウィンドウを生成
したいときは，head に次のタグを書きます。フレーム以外に普通の htmlファイルにも使えます。
20
<A href="top.html" target="_top">ＴＯＰ</A><A href="group.html" target="_self">グループ紹介</A><A href="anpo.html" target="_blank">ＳＴＣ</A>
<base target="cont"> <!--"cont"は右窓の名前-->
<base target="_blank">
◆ head のタグ
典型的な head のタグの生成は，HeTeMuLu のタグ機能を使います。
タグ→ページの設定→HTML の骨組み→
ページの情報タブ→全部チェック
拡張設定タブ→MIME タイプの指定→全部チェック
その他のタブ→ディフォルト
または，次のコピペでもよいです。
・DOCTYPE；バージョン宣言（Yahoo! JAPAN の先頭行のコピペでもよ
い）
・<html>，<head>，<body>；このままの並びとする
<head>内は字下げしないことが多い
<body>内は必ず字下げする
21
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html lang="ja"><head><title></title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta http-equiv="content-style-type" content="text/css"><meta http-equiv="content-script-type" content="text/javascript"><meta name="generator" content="HeTeMuLu Creator Ver.1.20β2"><meta name="description" content=""><meta name="keywords" content=""><meta name="classification" content=""><meta name="author" content=""><link rel="stylesheet" href="style.css" type="text/css"><link rel="shortcut icon" href="img/favicon.ico"><script lauguage="JavaScript"><!-- これはコメントアウト（ブラウザから見えないように）
//--></script><style type="text/css"><!-- これはコメントアウト（ブラウザから見えないように） css と Java ではコメントアウトの閉じが違う--></style><base target="_blank"></head><body></body></html>
・title；ブラウザの最上欄とお気に入りに表示されます
・text/html；HTML を使っていることを宣言
charset=utf-8；文字コードにユニコードを採用（世界標準）
HeTeMuLu，TeraPad：文字/改行コード設定/指定；『UTF-8N』charset=shift_jis；文字コードに shift_jis を採用（Windows標準）
・text/css；スタイルシートを使っていることを宣言
・text/javascript；JavaScript を使っていることを宣言
・name=generator/description/keywords/classification/author；エディタ，概要説明，キーワード，分類，作者を自由記入
・href="style.css"；css ファイルのディレクトリを宣言
・href="img/favicon.ico";ファビコンのディレクトリを宣言
ファビコンとはお気に入りのアイコンのことで URL にも表示されます
ico ファイルの作り方はググってください
・script lauguage="JavaScript"コメントアウトの中に JavaScript を書きます
・style type="text/css"コメントアウトの中にスタイルシート css を書きます
・target="_blank";すべてのリンクが新しいウィンドウを生成する宣言
◆ html バージョン（doctype 宣言）
現在最もポピュラーなのが旧い IE でも見れる HTML 4.01 です。その後
継に XHTML が開発されたが，アップルなどが反発して HTML5 を開発しこ
ちらが後継になった。XHTML より HTML5 を使うべきだが，HTML5 で対
応すべきもののみ HTML5 を使い，そうでないものは HTML 4.01 が推奨さ
れます。
XHTML ではタグを必ずペアにするため ，例えば，<br></br> または
<br /> としなければならないが，IE以外のブラウザでは読めない恐れがあ
ります。
22
・HTML 4.01 の宣言は，Yahoo! JAPAN を参照のこと。
・XHTML の宣言は，この Web ページを参照のこと。
・HTML5 の宣言は，Google 日本を参照のこと。
23
◆ 文字コードの変更方法
文字コードは shift_jis（Windows標準）と utf-8（世界標準）が混在して
います（ページごとに違っても可）。どちらを選んでもかまわないが，
HeTeMuLu の場合，
メニューバー→ファイル→文字/改行コードの設定
→文字コード＝Shift-JIS／UTF-8N（UTF-8 ではないことに注意）
改行コード＝CRLF（これで決まり）
必ず，meta 宣言と一致させること。一致していないと文字化けします。
文字コードは TeraPad でも変更できます。
◆ リダイレクト
Web ページが引っ越した後，引っ越し前の URL にアクセスされたときに，
引っ越し先にリンクする手法が３つあります。メッセージの例として，
「５秒後にリダイレクトします。お急ぎのかたはこちらをクリックして
ください。」
ファイアウォールによっては，リダイレクトがブロックされます。
リダイレクトは，サイトによっておすすめの方法があるようです。本講
習では扱わないので，必要ならば，ググってください。
24
■ スタイルシート css◆ スタイルシート css を書く場所
html ファイルの<head>内に次のように書くことができます。
または，外部ファイルに書き，次のようにディレクトリを指定します。
ディレクトリは階層可であり，Web からこの css ファイルの内容を見る
には，ファイルの階層ディレクトリを URL にコピペすればよいです。
わざわざ別ファイルにするのは，複数の html ファイルから参照すること
により，スタイルシート css が共通化できるからです。
３つめの書き方は，次のように html タグの属性として書くことができま
す。
「:」の前はスタイルシート css の属性（プロパティ），後は属性の値で
す。属性どうしは「;」で区切る。
◆ id，class による修飾
前項の３つめの方法はあまり使われず，１つめと２つめの方法において，
次のように html タグをスタイルシートで修飾することができます。
html タグ スタイルシート css<div id="aaa"><p id="bbb">
div#aaa{css の属性}#bbb{css の属性}
<div class="ccc"><p class="ddd">
div.ccc{css の属性}.ddd{css の属性}
25
<link rel="stylesheet" href="base.css" type="text/css">
<style type="text/css"><!-- これはコメントアウト（ブラウザから見えないように） css と Java ではコメントアウトの閉じが違う--></style>
<body style="margin-top: 40px; margin-bottom: 40px">
html タグの属性として id と class が使えます。id は html ファイルの中
でその名前が１回しか使えないほかは，id と class は同じような使い方を
します。
上表のように，html タグに id または class 属性を付け，それに任意の名
前を付ける。それを修飾するスタイルシート css では，id に対しては # を付け，class に対しては . を付けてその名前を付ける。この部分をセレクタ
と言い，続けて {} 内にスタイルシートの属性を書きます。セレクタには
html タグを付けてもよいが省略可です。id の名前は html ファイルに１つ
なので，
div#aaaのようにセレクタに html タグを含めること多い（省略しても可）。
スタイルシートの属性の書き方は，前項の３つめの方法の “”内と同じであ
り，属性のプロパティと値を : を区切り，属性どうしを ; で区切る。
◆ div と css を使ったボックスレイアウト
html タグ div はそのままではあまり使えないタグであるが，スタイル
シート css で修飾すると最もポピュラーなボックスレイアウトとして使え
ます。
その使い方は次の Web ページを参考にしてもらいたい。
1.CSS レイアウトは<div>で作る
http://homutuku.com/beginner/210.html2.XHTML/html タグへ個別に CSS（スタイルシート）を指定する
http://homutuku.com/beginner/220.html3.上下に並んだ<div>..</div>を左右に配置させる
http://homutuku.com/beginner/230.html4.Web ページの横幅を指定する
http://homutuku.com/beginner/240.html5.「float」による CSS レイアウトの崩れを防ぐ
http://homutuku.com/beginner/250.html
26
id または class を使うとボックスのあらゆることが定義できます。ここ
では主にボックスレイアウトに関係するところだけ示す。
◆ スタイルシート css によるフォント指定
html タグ font は非推奨なのでスタイルシート css でフォントを指定しま
す。body の代わりに * でもよいです。この属性がファイル全体に反映され
るかを確認するためには，"ＭＳ 明朝"と置き換えてみれば判ります。
27
div#headWrap {position:relative;width:100%;margin:0 auto;padding:10px 0;border:1px solid #D8D8D8;background:#fff;
}div#header {
position:relative;width:835px;margin:0 auto;border:1px solid #D8D8D8;background:#fff;background-image: url(img/bg_header.jpg);
}div#pr {
position:absolute;left:0;top:-5px;width:835px;
}div#gnavi {
position:absolute;bottom:0;right:0;
}
body{background-image:url(./images/backwall.jpg);background-color: none;text-align: center;color: #000;
/* font-family: "ＭＳ 明朝";*/font-family: 'ヒラギノ角ゴシック ', 'Hiragino Sans', 'ヒラギノ角ゴ ProN
W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', verdana, sans-serif;
font-size: 10.5pt; font-weight: none;
line-height: 150%;}
スタイルシート css のプロパティは次の Web ページを参考にしてもらい
たい。
http://www.tagindex.com/stylesheet/properties/
◆ スタイルシート css による相対フォントサイズ指定
スタイルシート css によるフォントサイズ指定において，サイズを直接
指定する場合は，px ピクセルや ptポイントを使用します。これらは，バー
ジョンの旧い IE でブラウザによるサイズ変更で不具合になったようです。
スタイルシート css による相対フォントサイズ指定は次のようにします。
この Web の priv.html を例にします。
最初に，基準サイズを html または body に書きます。どんなブラウザで
も 100%が 16px（= 12pt）です。相対値を em 単位で書きますが，htmlまたは body に書いた基準サイズが 1em となります。相対値を計算しやす
いように，基準を 10pt にしました（10pt/12pt = 83.3%）。
この方式の欠点は，例えば，<ol>と<li>の両方に em 単位の相対サイズ
を書いたときは，<li>の実際のサイズは<ol>の指定サイズとの掛け算にな
ることです。
それを避けるために，html5 では em の代わりに rem が推奨されていま
す。
また，すべてを % 単位で指定することは相対サイズとしてあまり意味の
ないことになります。
28
body {font-size: 83.3%}.style55 {font-size: 1.05em}/*10.5pt 相当*/・・・・・・・・・・・<ol class="style55">
◆ リンク元の装飾
リンク文字の色を変えるのは body タグの属性でもできるがこれは非推奨
なので，スタイルシートでやるのがポピュラーである（フォントも変えら
れる）。
htmlカラーコード#ffcc99 は，cssカラーコード#fc9 となる。ただし６
桁のままでもかまわない。
特定のボックスだけに使うリンクは次のように書く（一例にすぎない）。
29
a:link { color: #00f; text-decoration: none}a:visited { color: #36f; text-decoration: none}a:hover {color: #b81; background-color: #ccc; font-size: 12pt; font-weight: bold; text-decoration: underline;}a:active { color: #0f0; text-decoration: none}
div#header h1 a { color:#D30000;}
■ JavaScript◆ JavaScript を書く場所
これは<head>内に書きます。ここに書くのは function の定義だけです。
次の例のように，普通は<body>内に直接書くことが多いです。
◆ オンマウス（ホバー）で画像が入れ替わるリンク
マウスを画像に重ねたときに別の画像を表示する（a:hover の代わり）方
法はいくつかあるが，次の方法が最もポピュラーであり確実であり簡単で
す。
２つの画像の大きさは同じでなくてもかまわない。
◆ html ファイルの更新日
html ファイルの更新日を表示するのに，じしんのファイル更新日（タイ
ムスタンプ）を表示します。
30
<script type="text/javascript">upd = document.lastModified.split(/[\/ :]/);document.write(" 最終更新日 "+upd[2]+"."+upd[0]+"."+upd[1]+" "+upd[3]+":"+upd[4]); </script>
<head><script lauguage="JavaScript"><!-- これはコメントアウト（ブラウザから見えないように）
//--></script></head>
<a href="http://www.???.co.jp/"><img src="./images/dream.png" border="0" alt=" 公 開 ホ ー ム ペ ー ジ へ " onmouseover="this.src='./images/dream2.png'" onmouseout="this.src='./images/dream.png'"></a>
<a href="リンク先の URL"><img border="0" src="１番目の画像のアドレス" onMouseOver="this.src='２番目の画像のアドレス'" onMouseOut="this.src='１番目の画像のアドレス'"></a>
◆ ページ戻り
31
<a href="javascript:history.back();"><IMG src="img/back.gif" alt="戻る" border="0"></a>
■ １６進法
・１０進法；0 から 9 まで数えてから桁上げするのを 10 進法という。
人の指が 10 本あったから。
10 進法の 1 桁をデジットという。
・２進法；0 から 1 まで数えてから桁上げするのを 2 進法という。
コンピュータの指が 2 本しかないから（スイッチのオン・オフ）。
2 進法の 1 桁をビットという。
・１６進法；0 から 9,a,b,c,d,e,f まで数えてから桁上げするのを 16 進法。
2 進法の数字は 4 ビット区切りで 16 進法となり読みやすくなる。
2 進法の 4 ビットが，2×2×2×2＝16 進法の 1 桁となる。
2 進法の 8 ビット（1 バイト）が， 16 進法の 2 桁となる。
つまり，1 バイトで，16×16＝256（00～ff）まで数えられる。
htmlカラーコード，cssカラーコードは次を参照してください。
http://www.geocities.jp/yamakatsusan00/colorsample.html
32
33