ホームページの作り方

まずはテンプレートのファイルを開こう

まだ、テンプレートを持っていない方は、前回の記事「ホームページが作れる簡単テンプレート」を読んでダウンロードして下さい。

ちなみに、この回から始めても中途半端なホームページになってしまいます。必ず最初の記事「ホームページが作れる簡単テンプレート」からはじめてください。

前回と同じように、index.html と同じディレクトリーにある css フォルダを開き中にある style.css をメモ帳で開きましょう。

各ブロック（フレーム）の色を決める

今回も、TAG<index>さんの色の組み合わせチェックという便利なツールを利用させていただくこととします。

このツールに出てくる名称と、このブログで公開しているテンプレートでは、名称が若干違う点がありますので注してください。

まずは、画面右側の上にある《色指定の対象》からHeadBoxを選択します。

次に下のカラーパレットから、お好きな色をクリックします。私の場合は、《white》を選びました。

すると、画面中央のボックスの色が代わったと思います。

同様に、SideBox、MainBox、FootBox を決めていきます。

実際に背景色を設定しましょう

まずは、ヘッダー部分の色からです。

ヘッダーとは、テンプレートで言えば見出し１とホームページの紹介文が表示される部分のことです。

メモ帳で開いた style.css に以下の太文字の部分を追加して下さい。

/*------------------------------*/
/* ヘッダー */
/*------------------------------*/
#header_frame
{
/* 高さ */
height:190px;
background-image:url(../images/header.jpg);
background-color:#000000;
}

画面中央の下に表示される《ボックスの色指定》のHeadBox横のテキストボックスから、#FFFFFF の部分(FFFFFFは選んだ色によって違います)をコピーし #000000 の部分を入れ替えます。

/*------------------------------*/
/* ヘッダー */
/*------------------------------*/
#header_frame
{
/* 高さ */
height:190px;
background-image:url(../images/header.jpg);
background-color:#FFFFFF;
}

次に、MainBox を指定します。手順はヘッダー部分と同じです。

背景色を設定しよう

まずはテンプレートのファイルを開こう

まだ、テンプレートを持っていない方は、前回の記事「ホームページが作れる簡単テンプレート」を読んでダウンロードして下さい。

ちなみに、この回から始めても中途半端なホームページになってしまいます。必ず最初の記事「ホームページが作れる簡単テンプレート」からはじめてください。

index.html と同じディレクトリーにある css フォルダを開き中にある style.css をメモ帳で開きましょう。

背景色を決める

では、メモ帳で開いた style.css に以下の太文字の部分を追加します。

body
{
/* ページの余白 */
margin:0px;
/* ページの表示位置(IE用) */
text-align: center;
background-color:#000000;
}

今回は、TAG<index>さんのカラーチャートを利用させていただくこととします。

TAG<index>さんのページから、お好きな色の右に表示されている文字（ #000000 のようなカラーコード）を#000000の部分と入れ替えます。私の場合は、#006400 （ダークグリーン）を選びました。

body
{
/* ページの余白 */
margin:0px;
/* ページの表示位置(IE用) */
text-align: center;
background-color:#006400;
}

ここまで完成したら、メモ帳を上書き保存します。

早速、index.html をダブルクリックして、デザインを確認しましょう。

上の画像のように表示されれば成功です。

選んだカラーによっては文字が見にくくなったかもしれませんが、今後、修正していきます。

もし、気に入らなければ最初からやり直してみて下さい。

次回は各ブロック（フレーム）の変更を行う予定です。

ホームページの見出しを決める

まずはテンプレートのファイルを開こう

まだ、テンプレートを持っていない方は、前回の記事「ホームページが作れる簡単テンプレート」を読んでダウンロードして下さい。

ちなみに、この回から始めても中途半端なホームページになってしまいます。必ず最初の記事「ホームページが作れる簡単テンプレート」からはじめてください。

例のごとく、index.html をメモ帳で開きましょう。

見出し１( <h1> 〜 </h1> )を決める

この見出し１は、非常に重要な見出しです。検索されるようなキーワードを交えて修正するようにして下さい。前回、紹介したタイトルやキーワードも同様ですので、ぜひもう一度、見直してみてください。

どんな見出し１にするか決まりましたか？

決まったら、早速入れてみましょう。会社名を入れるならこんな感じで。

ホームページの案内文を入れる

続いて、紹介文を入れましょう。以下の部分を修正します。

ダウンロードの前に

このテンプレートは、たった何時間、たった何日で作れる！とかいう分類のテンプレートではありません。手順通りに進めればホームページは作れますが、急いでいる人には不向きですので、予めご了承下さい。

テンプレートのダウンロード

まずは圧縮ファイルのダウンロード

こちらをクリックしてテンプレートをダウンロードして下さい

ダウンロードするファイルは、分かりやすいようにデスクトップにでも保存してください。

とりあえず解凍しましょう

このテンプレートは圧縮してありますので解凍してご利用します。

ダウンロードした圧縮ファイルを解凍ソフトで展開するか、圧縮ファイルを右クリック、「すべて展開」をクリックします。

作成された《homepage》フォルダをダブルクリックして開き、index.html をダブルクリックしてください。

「セキュリティ保護のため〜」の部分をクリックし、「表示されたらブロックされているコンテンツを許可」をクリックします。

これが最初の状態です。少しずつ作っていきましょう。

文字を入れ替えるだけでOK

HTMLドキュメントの宣言やメタタグなど、よく分からないかも知れませんが、基本的なことは全て記述済みです。あとはテキストを入れ替えるだけでOKです。

では、早速ホームページをあなた仕様に修正しましょう！まずは一番重要な。。。

ホームページの閲覧者はどこからくるのか

あなたが情報を得るときに何を使って調べるか

たとえば、あなたがある情報を欲しかったしたら、どのように調べますか？ここでは「ホームページの場合」で考えるので、タウンページや雑誌というものは除きましょう。

ブラウザを開いたときに最初に表示されるホームページはどこですか？日本人の多くは、Yahoo! Google MSN を最初に表示されるように設定していると思います。

もし、あなたが不動産を経営していて、管理している物件情報を公開したいと思っていた場合、物件を探している人があなたのホームページまで、どのような経緯をたどって訪問するのか。

大抵の場合は、Yahoo! Google MSN からキーワード（不動産）を入れて【検索】ボタンを押し、表示された一覧から良さそうなホームページを選び情報を得ていることと思います。

このとき、表示される順番は作られた順でも、会社の大きさでもなく、キーワードにもっともマッチしていると思われるものから順に結果を表示します。

検索結果の上位に表示される重要性

さて、あなたは表示された検索結果の一覧を何ページ目まで見ますか？

ある調査によると。。。

HTMLはすべて"タグ"で構成されている

まずはホームページのタグを見てみましょう

みなさんは、普段見ているホームページがどのように構成されているか見たことがありますか？構成（ソース）を見ることは非常に簡単です。例えば、このブログを表示したまま。。。

これで何やらゴチャゴチャと書かれたウインドウが開いたと思います。初めての方はサッパリ意味が分からないかもしませんが大丈夫。コツを掴めばすぐに分かります。

パッと眺めた感じでは、< > が多く使われていることが分かります。 この、< > で囲まれた部分を"タグ"と言います。

タグには２通りのパターンがある

タグは全て始まりと終わりが存在しますが、細かく見ると2つのパターンが存在します。1つ目は。。。

ホームページはどうすれば表示されるのか

ホームページの語源を説明したり、あれこれ解説して余計な知識を書きたくなってしまいますが、これは次の機会として、どうしたらホームページを表示することが出来るのか。

簡単に言えば、ホームページを表示するためには専用のソフトウェア( ブラウザ → Internet Explorerなど パソコンを買ったときに最初から付いている無料のソフトウェア )が必要で、そのソフトウェアが理解できる言語で書かれたファイルがあれば見ることが出来ます。

そのファイルは、すべてのホームページの基本となるHTMLという言語から成り立っています。

言語といっても外国語を覚えるより、遥かに簡単なので心配しないで下さい。

必要なのは、日本語と中学生レベルの英単語、そしてちょっとした記憶力だけです。

といっても習うより慣れろ！と言うことで、まずは日本語だけで作る世界一簡単なホームページ、いや、日本語なので日本一簡単なホームページを。。。

ホームページを持つ理由

ホームページを持って本当に利益が上がるのか

・ネットショップがヒットして大成功した話し。
・ホームページの広告費で悠々自適の生活の話し。

そんな話しは今現在、一切無いとは言いませんが、まずありません。

私は、こういった話を元にホームページを持とうと言っているのではありません。

ではなぜ、私はホームページを持とうと提案するのか

私の父は、社長一人、社員なしと、別の意味でのワンマン社長（笑）で、知り合いの人に事務所の一部を借りて営業していた小さな会社です。

もちろん、それまでは大手企業との取引などなく細々とした零細企業でしたが、ホームページを持つことで大手企業からの問合せがくるようになっています。

それは、とある営業に出かけた際に、ある技術に興味を持ってくれたお客さんに渡した"名刺"がきっかけでした。