[ MENU PAGE ]     Step [4][5][6][7][8][ホームページのUL方法]
 ■ ホームページ制作方法の基礎編 ■
はじめに
 この度、ホームページの制作方法を掲載するにあたり、誰にでも制作できるように、なるべく難しい用語などは使わずに簡単に説明していきたいと思っています。
対象の方としては「ホームページを作りたいんだけど、よく分からない」という方が対象です。
すでに、一回でもホームページを制作した方は、今回ご紹介させていただく内容は、あまり役に立たないと思います。 ご了承ください。
ホームページは画像があって、手の凝ったページ作りをするのですが普通です。しかし今回は基礎ということもありますので簡単なページ作りを紹介したいと思っています。 制作工程でのOSは「WINDOWS」をベースに説明します。
ブラウザ(普段インターネットを見ているソフト)は[Internet Explorer(IE)][Netscape Navigator(NN)]を対象とします。 
また、これからご紹介する内容は私の知識上の説明になりますので違う点などありましたらご指摘ください。
よろしくお願いいたします。
Step 1  用意するもの

【 テキストエディター 】

テキストエディターとはテキストを作成するソフトのことです。
そんなの持ってないという方はいらっしゃるでしょうか? WINDOWSにはメモ帳がありますのでメモ帳を使って説明にはいります。
それだけでいいの?  それだけで十分なんです。 
そもそもホームページを作るのにソフトなどは必要ありません。 専用制作ソフトが無いと作れないと思っている方もいると思いますが、つい数年前までは全てテキストからの手打ちで制作したものです。 ソフトの使用で、たしかに制作工程が飛躍的に向上し、制作日数も比べものにならないくらい早くなりました。 しかし、ソフトを使っていても実際、手打ちの部分も発生しています。 100%完璧なソフトは今のところないのでは?(個人的に)
そこで、まず制作ソフトで、はじめるのではなく基本的な部分からはじめましょう。(タダですから)
話がそれましたが本題にはいります。

最初にメモ帳を開きます。 何か打ち込んで名前をつけて保存してください。
[XXXX.txt]と表示されたと思います。最後に[.txt]と表示が無い場合は表示されるように設定します。

■ 設定方法 ■

[デスクトップのマイコンピュータ]→[表示]→[フォルダーのオプション]→[表示]→[登録されているファイルの拡張子は表示しない]のチェックをはずす。

これで表示されたと思います。 [txt]とは拡張子というものです。(最後の英数字)
拡張子とはファイルの種類を意味するもので一般的なものとしてテキスト文書(txt)・エクセル(xls)・ワード(doc) 画像では(bmp)(gif)(jpg)などがよく知られています。
この拡張子は今回のページ作りだけでなくWINDOWSを使っている方は重要になります。 拡張子という名前をおぼえておきましょう。

ホームページに使われている拡張子です。[.htm][.html][.shtml]
この種類は使い方が多少異なります。今回は説明をひかえさせていただきます。m(_ _)m
今回は無難なところで[.html]を使うことにしましょう。(Win3.1利用の方は[.htm]

そこで、先ほど作ったテキスト文章(XXXX.txt)があると思いますが、そのファイルの名前を変更します。
最後の拡張子だけを[XXXX.html]に変更すればホームページファイルのできあがりです。

アイコンがメモ帳からブラウザアイコンに変わったはずです。立ち上げて見ましょう。先ほど打ち込んだ文章が表示されると思います。

Step 2  HTMLの基本
ホームページとはHTMLという言語で書かれています。
「言語」と聞くとチョット引き気味になりがちですが、難しいことではありません。(プログラムとは違います。)
文章を書くのに決まりごとがあるようなものです。まずは簡単な例文をHTMLのソースで説明します。

【 記述例 】

<html>
<head>
<title>HTMLの基本</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</head>
<body bgColor="#FFFFFF" >
ここからが画面表示部分です。
</body>
</ html>

【 表示例 】 

ここからが画面表示部分です。


【記述例】にはイロイロ書いてありますが、実際に表示すると【表示例】の文章だけです。
 
まず最初に<>でくくられているものは「タグ」と呼ばれているものです。 タグは重要ですから名前だけでも覚えておいてください。
ホームページの記述文は大きく3個に分かれます。(色分けされてるのがそうです。)
[html][head][body]に分かれてます。(最低記入条件です。)

[html]は、
このページはhtmlで書かれてるということを意味してます。

[head]は、
このページについてのドキュメント定義を意味してます。(難しそうですが気にせずに)

[body]は、
このページの画面表示部分です。

この記述例のタグがセットになっているのが分かるでしょうか? 例)<html>〜</html>
全てではありませんがタグはセットになることが多いです。 文章でたとえるなら"("で、はじまり ")"で、閉じるようなものです。 ただし、閉じる場合は「/」がはいるのが決まりになっています。

記述文の説明
<html><head><body
先ほど説明した通りです。
<title>HTMLの基本</title>
このページのタイトルです。ブラウザを開いたときに一番上に表示されます。お気に入りの追加などに表示
<meta http-equiv〜
書かれている文字コードです。
bgColor="#FFFFFF" >
このページの背景色です。    カラーコードはこちらを参照
ここからが画面表示部分です。
画面上に表示される文です。

基本的には<body>〜</body>内に本文を記述することになります。
Step 3 簡単な記述の実践
先ほどの例文をメモ帳に「コピー」&「ペースト」で貼りつけます。
[そこで問題発生!]
編集する場合は[.txt](メモ帳で)、表示確認をする場合は[.html]への拡張子の変更が必要となります。
編集する度に、これでは非常に手間をとりますので「小技」を伝授します。(たいした事ないです。)
なお、[Internet Explorer(IE)]の方はブラウザで編集ができますので必要ありません。
ブラウザのメニューバーに<表示><ソース>を開くとメモ帳が立ち上がるはずです。 そこで編集をかけ、「上書き保存」で編集完了となります。 ブラウザを更新してみてください。 内容の更新されたことが確認できます。
「タイトル」「本文」は表示されたでしょうか? 簡単ですが、ホームページを作ったことになるのです。
次のStepは、いろんな<タグ>を使った編集にはいります。
[ Step 4へ ]
Copyright © 2000 asarinet,co.all rights reserved.