★Lesson2★
〜HPの基礎編〜


○2:HPの基礎編

 まずはTOPページから作っていきましょう。完成図はこんな感じになります。で、まずはHPの元となる「骨格」を勉強してみましょう。で、そのHPの骨格ともいうべきタグは5種類あります。

★HTMLタグ<html>〜</html>

基礎の基礎、と言ってもいいようなタグ。「この文書はHTML文書ですよ」というタグです。このタグの中に他のさまざまなタグや文章を記述していきます。

★HEADタグ<head>〜</head>

このタグはその名の通りHEAD(頭)です。今この画面の一番上を見て下さい。そうすると「★Lesson1-1★ 〜HPの基礎編1〜」と書かれているはずです。このタグはそこの部分を意味しているタグです。

★TITLEタグ<title>〜</title>

このタグは先程説明したHEADタグの中に書き込むタグです。TITLEタグの中にある文字は「★一時間目★ 〜HPの基礎編〜」が表示されてる部分に表示するものです。お気に入りに追加したときに表示される文字も基本的にはタイトルタグ内に記述した文字です。

★文字コード<meta http-equiv="****" content="****>

文字コードはページの文字化けを防止するためのタグです。なので、省略は可能ですが、文字化けしてしまうとせっかく作ったサイトも人に見てもらえなくなるので省略せずにつけておくことをお勧めします。文字コードのタイプには「Shift-JIS/EUC/JIS」の3種類あります。記述方法は****の部分に、http-equiv=""の部分には「Content-Type」、content=""の部分にはShift-JISの場合なら「text/html; charset=Shift_JIS」、EUCの場合なら「text/html; charset=EUC-JP」、JISの場合なら「text/html; charset=ISO-2022-JP」と記述しましょう。文字コードが分からない人はとりあえず一般的に多い環境ではShift-JISなので、これに設定してみて、それで文字化けするようであればEUCに設定を変更してみて下さい。

★BODYタグ<body>〜</body>

BODYタグはHPの内容部分を記述するタグです。HEADタグはHPの名前を、BODYタグはHPの内容を記述する場所です。

で、以上の5つのタグを全て組み合わせると、以下のようになります。

※当サイトはEUCなので文字コードはEUC-JPに設定しています。

で、一通りタグが理解出来たところで、実際それをブラウザに表示させてみましょう。まずはメモ帳を起動させ、上の窓の中に記述されてあるものをメモ帳にコピーして下さい。で、それが出来たら「メモ帳」のメニューで「ファイル(F)」→「名前を付けて保存(A)」をクリックします。そうすると保存窓が表示されるので、ダイアログボックス内で先程作成した「HP製作場所」フォルダを開き、「ファイル名(N)」欄には「index.html」と記述し、「ファイルの種類(T)」は「すべてのファイル」を選択して「保存(S)」をクリックすると保存されます。念のために、ちゃんと保存が出来たかどうか確かめてみましょう。

上の画像のようになっていたら成功です(※上記の画像はWindowsXPの場合)

もしも上の画像のようになっていた場合、それはファイルの拡張子が「.html」ではなく「.txt」で保存してしまっています。そういう場合は保存しなおすか、もしくはこちらの方法で拡張子を全て表示させ、「index.txt」となっているのを「index.html」に記述しなおして下さい。

で、まずは確認としてindex.htmlファイルを開いてみて下さい。IE(=Internet Explorerの略)が起動したはずです。で、ページは何も記述されていない無地のページが表示されていれば確認作業は終了です。

で、実際に記述していきましょう。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>☆スカイエリアのサイト☆</title>
</head>
<body>

本文(内容)をここに書きます

</body>
</html>

赤い部分がタグで、そのタグの間に挟まれて記述されてある青い文字を、実際に記述してみて下さい。記述の仕方は、index.htmlファイルを起動し、IEメニューの「表示(V)」⇒「ソース(C)」をクリックするとメモ帳が起動します。で、そのメモ帳の中に、上記の通りに記述してみて下さい。で、出来たらメモ帳メニューの「ファイル(F)」⇒「上書き保存(S)」をして、IEを更新(F5キーで更新)させると、このページと全く同じものが出来たはずです(当然のことながら「アドレス(D)」の部分は違いますが…)。尚、これからはブラウザから直接、完成したかどうかのチェックを行いたいと思います。その理由としては、HPは通常ブラウザで見るものですから、作成者も同様の方法で閲覧するのが最適だと思うからです。編集方法についても同様に、一度ブラウザを開き、ソースを表示させてのメモ帳起動という方法をとりたいと思います。

どうでしょう?ここまでは順調に出来ましたか?ここまではHTMLタグ以前に、PCの扱い方の問題ですから、ここでつまづかれたらこれからは少々厄介です。次回は「〜文字の装飾編〜」です。実際にTOPページを作成していく作業に入ります。


≪≪前のレッスンへ戻るレッスンページTOP次のレッスンへ進む≫≫