|
FrontPageやホームページ・ビルダー等とは一線を画した
思い通りのＨＰを、これだけHTMLで作ってみませんか！
これだけHTML-1
HTML（えっち・てー・えむ・える）
HTMLとはHyper Text Markup Languageの略で、これはタグと呼ばれるものから成
り立っているＨＰ制作用の言語です。この言語にも文法というようなものがあって、
Ｗ３Ｃ（World Wide Web Consortium ）というところで管理されています。
現在のHTMLバージョンは4.01です。ここでは4.01に従って進めていきます。
制作のための準備
まず、テキストエディタが必要です。Windowsではメモ帳、Macintoshでは SimpleText。
次に、Ｗｅｂページを確認するためには、ブラウザのバージョンは最新のものを入手してください。古いものではスタイルシートなどをサポートしていないものがあります。
そして、画像を制作するためには、デジタルカメラやスキャナー、それらを加工するためのソフトウェアが必要です。
フリー（無料）ソフトウェアはこちらにあります。
Windows用 窓の杜 http://www.forest.impress.co.jp/
Macintosh用 新らしもの好きダウンロード http://mac.page.ne.jp/
それでは早速はじめましょう！
◆半角カタカナは文字化けの原因
HTMLを書く上で絶対に半角のカタカナを使ってはダメだということです。これ
は常識ですから必ず守りましょう。文字化けを起こしてしまいます。
The HTML Coded Character Setでは、様々な制御コードがあり、ここにコード
が重なると制御記号として解釈され、まともでない動作になってしまいます。
（半角カナを表わすための１バイト目のコード番号とHTMLの制御記号を表わすた
めのコード番号がもろにぶつかってしまい、障害の原因となってしまいます）
HTML文はすべて小文字で記述します。（HTMLの次期バージョンでは、タグはすべて小文字と規定されているからです）
まず下記のタグをエディタにタイプします。漢字以外は半角です。
<html>
<head>
<title>ホームページ</title>
</head>
</html>
◆解説
<html> これからHTMLが始まるという宣言のようなものです。
階層構造で言うと、最も上に位置するものです。
HTML文書全体を囲みます。
<head> まさに頭の部分です。この要素の中にさまざまな情報を仕込んでおくこ
とによってブラウザを制御したり、ページに色々な定義づけをします。
<title> その名の通りタイトルです。
日本語が使えます。「お気に入り」にこのタイトルが挿入されます。
</title></head></html> 終わりを示します。
タグには順番があります
<aaa><bbb><ccc> というタグが出てきたら </ccc></bbb></aaa>と終わらせます。
タグにはちゃんと順番があります。上記のように文章全体の始まりをさす<html>
の終了は、文章の一番終わりに入力します。
<head>は、頭の部分ですから本体<body>の前で終わらせます。
次に、</head>から</html>の間を入力します。
<html>
<head>
<title>ホームページ</title>
</head>
<body bgcolor="#00ff00">
</body>
</html>
◆解説
保存できたらブラウザで見てみましょう。ダブルクリックで開きます。
画面全体が緑色で表現されているでしょう。ブラウザのバックグラ
ウンド（背景）を緑に塗れと指示したのです。= bgcolor="#00ff00"
これは <body bgcolor="#00ff00"> と一行で書くようにします。#00FF00はＲＧ
Ｂの16進法で指示されており、いろいろと変えてみるといいでしょう。
Tips：body（要素）bgcolor（属性）"#00ff00"（値）
<body>タグには、最後に</body>が必要です。
ホームページは情報の発信メディアです。大切なのは何を伝えたいのかを明確にしておくことで、構成やデザインが沸いてきます。
これだけHTML-2
スタイルシート
HTMLを書く上でＷ３Ｃから勧告されている決まり事がたくさんあります。
最近ではスタイルシートを使って表現を定義するようにされています。
スタイルシートは（Cascading Stylesheet）テキストの段落やフォントの設定など、体裁全体を定義して表現できるものです。
それでは、少し体裁を変えてみましょう。
<html>
<head>
<title>ホームページ</title>
</head>
<body bgcolor="#ffff00">
<font size="6" color="#0000ff"><b>ためのホームページ</b>
</font>
</body>
</html>
内容を少し変化させて見ました。入力したら上書き保存をして、ダブルクリ
ック。黄色の画面にすこし大きく青色で表現されましたね。今度は位置を変えて
みましょう。bodyタグの後に<center>と入力します。
<html><head><title>ホームページ</title></head>
<body bgcolor="#ffff00">
<center>
<font size=4 color="#0000ff"><b>ホームページ</b>
</font>
</center>
</body>
</html>
◆解説
<b>〜</b>文字を太くするタグです。 できれば、
<strong>〜</strong>を使いましょう。同じ結果になります。
<font>〜</font>文字通りフォントを指定するタグです。
スタイルシート その１
さて、上記のタグですが、Ｗ３Ｃでは近い将来 font、centerなどのタグが廃止
することを決定しています。便利なタグでしたが、今後はスタイルシートで表現
するように勧めています。
上記のタグをスタイルシートで書くとどうなるでしょう。
<html>
<head>
<title>ホームページ</title>
<style type="text/css">
<!--
h3 { font-weight: bold; color: #0000ff; text-align: center }
body{ background-color: #ffff00 }
//-->
</style>
</head>
<body>
<h3>ホームページ</h3>
</body>
</html>
◆解説
<head>の中にスタイルシートを書くエンベッド方式、
外部からスタイルシートを読み込むリンク方式、
適応したい要素に直接書き込むインライン方式があります。
全ページにわたって統一した表現するときにはリンク方式が便利ですね。
コロン「：」とセミコロン「；」を間違えないように注意してくださいね。
ちなみにインライン方式では
<font size="6" color="blue"><b>ホームページ</b> を
<h3 style="color:#0000ff;text-align:center">ホームページ</h3>
<head>〜</head> に置くエンベッド方式や外部リンク方式は、ページ全体の各要素に対して繰り返し使う場合に便利ですが、ほとんど使うことがない場合にインライン方式を使います。
◆解説
headの中で定義されたスタイルシートは、そのページすべてにわたって定義され
ます。上記の場合は、「h3」がそれに当たり、そのページですべての「h3」は同
様に表現されます。非常に便利ですが時には不便なときもあります。そのために
細かく定義する必要が出てきます。
<style> の後の囲み <!-- と //-->は、スタイルシートに対応していないブラ
ウザに対する配慮として記述します。この囲みはしておいた方が安全でしょう。
（外部スタイルシートの作り方と実装方法）
今度は、スタイルシートを外部から、HTML文書に読み込みさせます。
まず、テキストエディタで次のようにタイプします。
body { background-color: #fff; color: #000}
h3 { font-weight: bold; color: #0000ff; text-align: center }
入力が終わったら保存します。保存方法はHTML文書と同じフォルダに小文字で
stylesheet.css と、必ず拡張子 css を忘れないようにします。
次に今作った css文書をHTML文書に実装します。今まで作った index.html
を変更しましょう。下記のように変更します。
<html>
<head>
<link rel="stylesheet" href="stylesheet.cc"
type="text/css">
<title>ホームページ</title>
</head>
<body>
<h3>ホームページ</h3>
</body>
</html>
入力が終わったら保存してください。
HTML文書をダブルクリックでブラウザを立ち上げてください。
◆解説
<link>タグは<head>の中にのみ使われ、現在のページと他の文書または場所との
関係を示すために使われます。
href は別の文書が置いてある場所と文書名を指定して呼び出します。
type は呼び出す文書のMIME（マイムと呼びます）タイプの指定するものです。
それぞれ、<link>要素の属性は必須ですので忘れないようタイプします。
外部スタイルシートを作ると、別のページにも読み込ませて同じ表現ができます。
これだけHTML-3
DTD(Document Type Definition：文書型定義)の宣言
（HTML文書のバージョンの宣言）
文書型定義が宣言されていないHTML文書は、 HTML2.0仕様書によると「ブラウ
ザは HTML2.0として扱え」となっていますが、HTML4.01ではこの考え方では現状
に対応できないとの見解をＷ３Ｃが示しております。
同時に、全要素、属性に対して、誤った記述をブラウザ側で正常に表示するよ
うに求めており、この文書型定義の明示如何に関わらず、一応正常に表示される
はずです。
◆HTML4.01 Strict DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
あるいは、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3c.org/TR/html4/strict.dtd">
廃止予定の要素や属性とフレーム関連を除く、すべての要素と属性が定義されて
います。 将来、このDTDに統合されていく予定です。
◆HTML4.01 Transitional DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
あるいは、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/html4/loose.dtd">
この宣言型は、過渡的なものとして多くのＷｅｂページで採用されています。
◆HTML4.01 Frameset DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
フレーム関連と廃止予定の要素や属性を含むすべての要素と属性が定義されてい
ます。将来、これも廃止予定ですが、ブラウザはこれらをサポートする必要があ
ります。
文字の設定
文字化けするサイトに出会ったことがあると思います。そのほとんどが文字設定を忘れている場合があります。必ず<head>の中に使用する文字を設定しましょう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Strict//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=SHIFT_JIS">
<title>ホームページ</title>
</head>
◆解説
通常<html>には属性がないのですが、HTML文書全体が日本語で書かれていること
を明記するために、<html lang="ja">と示します。
<meta>の部分は改行せずに１行で書きましょう。この文字設定は SHIFT-JISで、
圧倒的に多くのサイトで採用されています。この文字コードセットはIANAという
組織が管理しています。現在、SHIFT_JIS、ISO-2022-JP、ECU-JPの３つの日本語
文字コードが認定されています。
<title>を後に置いたのは文字を設定する前では、漢字である非アスキー文字が
使えないという文法によるものです。
（誤りの例）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html lang="ja">
<head>
<title>漢字編ホームページ</title> <!-- 設定の前に漢字 -->
<meta http-equiv="Content-Type" content="text/html;
charset=SHIFT_JIS">
</head>
MIMEタイプの設定
MIME（マイムと呼ぶ）とは、Multipurpose Internet Mail Extensions の略で、インターネットの電子メールのプロトコル（通信手順）です。もともとインターネットの電
子メールでは半角の英数字しか送ることができなかったのですが、MIMEに対応し
ている電子メールソフトを使うと、漢字などの２バイト文字が扱え、画像や音声
などのバイナリデータをやりとりできるわけです。これは Webページにも当ては
まります。
HTTP（ HyperText Transfer Protocol）は、情報の転送を依頼するリクエスト
とそれに対するサーバのレスポンスから構成されています。URL やユーザー名と
パスワード、Webブラウザの種類、使用言語などの情報をWebサーバ側に送信する
と、Webサーバはそれに応じてデータやエラーコードなどを転送してきます。
データのヘッダにはリクエストの可否、現在の時刻、サーバの種類などが記載
されており、これとHTMLなどの要求されたデータ本体が返答されてきます。
また、MIMEの定義に基づいたデータの属性についても、返答が戻されます。Web
ブラウザは、返信されてきたHTMLファイルを解析し、画像ファイル等があれば再
度送信を要求し、返信されてきた画像を読み込んで、表示することになります。
リクエストには、ほかにもフォームなどに入力したデータを送信するPOSTや、
データの更新日時やサイズなどの情報を取得するHEADといったメソッドが用意さ
れているのです。
<meta http-equiv="Content-Type" content="text/html;
cahrset=Shift_Jis">
このテキストはHTML文書で文字コードにShift_JisであるというMIME設定
<meta http-equiv="Content-Style-Type" content="text/css">
このテキストスタイルは CSS文書であるというMIME設定
<meta http-equiv="Content-Script-Type" content="text/javascript">
このテキストで書かれたスクリプトはJavaで書かれたスクリプトであるという設
定。
スタイルシートの言語設定
<link rel="stylesheet" href="stylesheet.css"
type="text/css"
charseｔ="Shift_Jis">
MIME設定でスタイルシートの言語設定を行うことがベストです。
<meta http-equiv="Content-Style-Type" content="text/css;
chaset=Shift_Ji
s">
HTML文書そのものを SHIFT_JISで書くならスタイルシートの言語設定は必要でなく、そうでない場合は設定しておくと安全です。
ちなみに、Windowsの「メモ帳」、MachintoshのSimpleTextはどちらもShift_Jis
です。
HTML文書を書いてみましょう。
（Strictの場合）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="stylesheet.css"
type="text/css">
<title>初心者のためのホームページ作り</title>
</head>
<body>
<h3>ホームページ</h3>
</body>
</html>
（Transitionalの場合）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="stylesheet.css"
type="text/css">
<title>ホームページ</title>
</head>
<body>
<h3>ホームページ</h3>
</body>
</html>
かなり本格的なHTML文書になりました。
なお、講座では、StrictとTransitionalを併用して使うことにします。なるべ
くならStrictがいいのですが、今後使用する要素（タグ）と属性がStrictで動く
かどうかについての検証が難しい場合には、安全を期してTransitionalを使うよ
うになります。
要素と属性の関係などにあまり自信がない場合には、Transitionalを使ったほ
うが安心です。
◆ホームページ作りのポイント
代表的なブラウザとして、マイクロソフトのインターネット・エクスプローラー（ＩＥ）とネットスケープ社のネットスケープ・コミニュケーター（ＮＳ）では、お互いに独自の機能があり、互換性がありません。
制作者の意図に反して、ＩＥで表現できてもＮＳでは無視され、その逆もあり
ます。これは、JavaScriptでも内容によって同様の現象があります。
どんなブラウザでも対応できるようにするため、基本的に独自タグは使わないように心がけています。
これだけHTML-4
◆テキストを中心のホームページ（スタイルシート活用）
テキストを中心にページを見栄えよく表現します。そのためにも段落を設定したスタイルシートは欠かせません。
まず最初にスタイルシート文書を作成します。テキストエディタ（メモ帳など）
を立ち上げて下記のようにタイプします。コロン「：」、セミコロン「；」を間
違えないように入力してください。間違えるとスタイルシートがページに反映さ
れません。すべて英字半角小文字です。
body { background-color: #ffffcc; font-size: 12pt; color:
#000000 }
div.test { color: #000066; line-height: 135% }
span { color: #cc3300 }
h2 { font-size: 20pt; font-weight: bold; text-align: center }
ここまで入力が終わったら保存します。
これで外部スタイルシートであるCSS文書が完成しました。
次に上記スタイルシートを利用するHTML文書を書きます。下記のようにタイプし
てください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=Shift_Jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="test_01.css"
type="text/css">
<title>テキストページ</title>
</head>
<body>
<h2>これはテキストのページです</h2>
<div class="test">
ホームページ作りの勉強を。だんだん<span>本格的</span>になりました。
</div>
</body>
</html>
<div>〜</div> 内のテキストは改行なしで入力します。
入力が終わったらHTML文書として保存します。さきほど作った CSS文書と同じフ
ォルダに保存します。必ず、英字半角小文字でtest_01.html と拡張子 .htmlを
忘れないようにしてください。
◆解説1……スタイルシートの構造
スタイルシートの構造はセレクタ（選択部）と宣言部により構成され、宣言部は
属性（プロパティあるいはアトリビュート）と値で構成されています。
body { background-color: #ffffcc; color: #000000 } の場合、
body（セレクタ）、{ background-color 〜 #000000 }（宣言部）
そして宣言部に
background-color（属性）、#ffffcc（値）
color（属性）、 #000000（値）となります。
宣言部は { } で囲みます。
◆解説2……スタイルシートの記述内容
body { background-color: #ffffcc; color: #000000 }
これは、body要素（表現するすべて）に対して、背景を薄いクリーム色、文字を
黒で表示することを設定しています。なお、ひとつのbody（セレクタ）にスタイルを複数設定する場合は、「；」とセミコロンで区切って行います。
div.test { font-size: 12pt; color: #000033; line-height: 135%
}
div要素はブロックレベル要素ですがこのタグだけでは何もしないので属性やス
タイルシートで表現を設定します。ブロックレベル要素ですが、div だけでは前
後に改行を持つことはありませんが、ひとつの段落を意味します。ブロックレベ
ルというのは、大きな段落のかたまりを形成すると思ってください。 div要素に
対しては、好きな名前をつけてセレクタに置きます。
ここでは、フォントサイズを12ポイント、文字の色を濃い青 #000033、文字の
行間line-height を文字の大きさの135%で、つまり、文字の大きさの35％分の空
白を設定しました。
span { color: #cc3300 }
span要素はインラインレベル要素で、上下前後に空白はありません。また<span>
タグだけでは何もしないので、スタイルシートで表現を記述します。ここでは、
文字の色をオレンジ色 #cc3300に設定しました。
h2 { font-size: 20pt; font-weight: bold; text-align: center
}
h要素（見出し要素）はブロックレベル要素で上下に空白を持っています。
このタグに数字の１〜６まで使え、<h1>が一番大きなフォントサイズで表示しま
す。ここではフォントサイズを20ポイント、フォントの字体 font-weightで太字
に、また位置関係 align を中央揃え center に設定しました。
………………………………………………………………………………………………
◆汎用属性・・class（クラス）属性とID（アイディー）属性
スタイルシートでピリオド「. 」を入れて書く場合、（この場合 div.test）HTML
文書の記述は、クラス属性（class= ）を用います。これが div#testの場合はID
属性（id= ）で示します。
例 CSS文書 div.test { margin: 20px; padding: 10px; border:
…… }
HTML文書 <div class="test">〜</div>
CSS文書 div#test { margin: 20px; padding: 10px; border:
…… }
HTML文書 <div id="test">〜</div>
ただしID属性については、同じIDは１ページ当たり１回しか使えませんので注
意が必要です。これを無視すると、表示が極端に遅くなったり、表現が無視され
る場合があります。クラス属性は何度も使えます。
スタイルシート はそのままにしてHTMLを変えてみましょう。
<p>という要素を使います。この要素もブロックレベル要素で、段落を表現します。前後に改行が入ります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=Shift_Jis">
<link rel="stylesheet" href="test.css"
type="text/css">
<title>テキストページ</title>
</head>
<body>
<h2>テキストのページ</h2>
<div class="test">
ホームページ作りの勉強。だんだん<span>本格的</span>になりました。
</div>
<p>だんだん難しくなりますが、踏ん張り時。</p>
<div class="test">
必ずプロ並みの表現力で素晴らしいホームページを作りたい。
</div>
</body>
</html>
上記のHTMLを好きな文章に書き換えてください。
スタイルシートだけを変更してみましょう。
body { background-color: #cff; font-size: 12pt; color: #000
}
div.test { background-color: #6ff; color: #006; line-height:
135% }
span { color: #c30 }
h2 { font-size: 20pt; font-weight: bold; color: #096;
text-align: center }
p {font-weight: bold }
spanはそのままで、それ以外を変えました。
◆解説
body { background-color: #cff; font-size: 12pt; color: #000 }
全体の背景色を薄い青緑に、フォントのサイズを12ポイント、文字色を黒に設定
しました。
div.test { background-color: #6ff; color: #006; line-height:
135% }
段落を表示する div要素に背景色をやや濃い青緑に、文字色を濃い青に、文字の
行間を135%に設定しました。
h2 { font-size: 20pt; font-weight: bold; color: #096; text-align:
center}
見出し要素の h2 の文字の大きさを20ポイント、字体を太字、文字色を濃い緑、
位置揃えをセンタリングしました。
p {font-weight: bold }
段落をあらわす p要素の字体を太字に設定しました。この要素はブロックレベル
要素で前後に改行が入ります。これも段落のひとつです。
………………………………………………………………………………………………
強制改行の <br> を連発して段落を作っていますが、文法的には誤りです。
◆ホームページの最適サイズ
ユーザが見るディスプレイサイズを意識することも大切です。最近は17インチが主流となり、1028Ｘ768サイズが多くなっていますが、幅は800以下が適当でしょう。特に横スクロールを強要してしまうページ作りは避けたいものです。
|