まずはパソコン環境を整えましょう
はじめに
こんなパソコン環境です
無線でインターネット
悩み多きeo光の回線終端装置の設置場所

ＨＰ作りの下準備
ホームページの仕様
初心者の専門用語、操作の仕方
あると便利な無料ＨＰ作成支援ソフト

ＨＰが出来るまで
ＨＰの保管用・画像保管用フォルダ、cssファイルを作ります
ＨＰのトップページ用のhtmlファイルを作る
トップページの画面割りをしよう
トップページソースの補足
htmlタグの解説
ＨＰにタイトルを入れてみよう
ＨＰのタイトルに背景を入れてみよう
節約に対する考えを書いてみよう
メニューリストを作ろう
フッターを作る
トップページ以外のページを作ろう
リンクページの画面割りをしよう
ＨＰ作り終了
カラーコード表

＊タイトルをクリックするか、数字を選んで各ページをご覧下さい。

これは、管理人がこのサイトを作るまでに得た情報を公開しているレポートです。

実際にこのサイトも１円も使わずに（もちろん、パソコン代や電気代はかかっていますが・・）作られています。

節約している身にとって、高価なＨＰ作成ソフトや書籍などはとてもじゃないけど買えません。 そこで、以下の方法でＨＰを作りました。

• パソコンの検索でＨＰの作り方を探しまくる。
• ＨＰ作成関連の本を立ち読みする。
• お金をかけずに時間をかける。
• 無料ダウンロードソフトを活用する。

正直、ＨＰ作成ソフトがあればもっと楽にできる事も多々あると思いますので、あくまで節約してＨＰを 作る方にのみオススメするポイントです。

デメリットとしては、莫大な時間を必要としますので、これからＨＰを作ろうと考えている方に同じ苦労を しなくてすむように簡単な作り方を紹介しています。

多くの方に節約サイトを作って戴き、節約の輪が広がればいいなと思っています。

■コピーペーストで作る■

基本的には、ソースと呼ばれるhtmlの文をコピーして作っていきます。 そのまま読み進めれば、ここで作る（仮）の節約ＨＰと全く同じＨＰが出来上がります(^_^)。

■節約ＨＰを作ります！■

（仮）の節約ＨＰが、最終的には作れます。簡単なので、ぜひチャレンジしてみて下さい。

■節約のポイント■

ＨＰ作成ソフトを買うお金の節約になる。

有料のプログラムなどは一切使用しないので完全に無料で出来上がります(^_^)。

ＨＰを作る知識を覚える為に必要な本代が節約になりますよ。

簡単に作れるので時間の節約になる。

＊間違えた情報もあると思いますが、このサイトなりの解釈ということでご理解下さい。

＊もし、ここでＨＰがうまく作れたらぜひこのサイトを紹介して下さいね(^_^)。

■このページの専門用語■

ＨＰとは

ホームページの略。自分が好きな事や趣味の事などを、世界中の人にインターネットを通して 伝える事ができるメディアです。

サイトとは

ひとまとまりに1冊の本のように、公開されているWebページの集まりの事。また、そのWebページの集まりが置いてあるインターネット上の場所。

どんな環境で作っているかを紹介します。基本的にどんなパソコンでもＨＰは作れますので 参考までに。

パソコンは様々なメーカーから大量に発売されています。値段の安さと性能で選び、色々探して結局Gatewayにしました。 正直これしか持っていないので性能が良い悪いは分かりません(@_@)。

パソコン本体 Gateway M-7810j

office2007インストール済

windows Vista

HDD 320GB

メモリ 3GB

CPU Core2DuoT9400

購入価格 129800円（税込）

プリンタ:EPSON RM-T960

展示品を24800円（税込）で購入。６色インクなのでインク代だけで６０００円くらいします（泣）。

ルータ:BUFFALO WZR2-G300N/U

10800円（税込）で購入。３００Mbpsの高性能の機種にしました。

ウイルスセキュリティZERO USBメモリ版

ウイルスソフト。4980円（税込）で購入。１度買えば更新料不要で何年も使える節約商品です。

パソコンはCPUの性能とメモリの大きさを基準に、財布と相談して選びました。

Gatewayは外国の会社なので、同じ性能なら国産のパソコンよりも安く買うことができます。節約してパソコンを 買いたい方にはオススメです。

牛の模様のロゴがサッカーボールみたいですよね。

■このページの専門用語■

CPUとは

コンピュータを構成する部品の一つで、各装置の制御やデータの計算・加工を行なう装置。

メモリとは

現在動いているソフトウェアの情報や、作成中の文書などの情報を一時的に記録するために使用されています。 後から増やすことも可能ですが、メモリ自体が高額なので節約の観点からみても始めから3GBくらいあった方が良いですよ。

パソコン、プリンタ共に無線で使いたかったのでルータの選択にはかなり悩みました。

我が家は３階建てで、光ケーブルを３階に引き入れたので必然的にルータは３階になり、３階→１階に伝波が届くか 心配でした。

電気屋の店員さんに色々聞きましたが「届くとは思うけど・・」とはっきりとは答えてくれないので 余計に不安になりました(~_~)。さんざん悩んでBUFFALOの３００Mbpsの三本アンテナにしました。 さて結果は・・・・。

上りとはパソコン→ルータ、下りとはルータ→パソコンの伝達速度を表すみたいですね。

だいたい３０Mbps越えれば十分みたいです。もう少し安いルータでもよかったかな？

■このページの専門用語■

ルータとは

ネットワーク上を流れるデータを他のネットワークに中継する機器。

無線とは

LANケーブル類でパソコンやルータを繋がずに伝波で繋ぐ方法。

家に固定電話もなかったので光電話もあるeo光に加入しましたが、これがADSLのように電話回線のモジュラーコンセント が使えません。

エアコンの配管の穴や電気の線を通す配管、壁に穴を開けたりして光ケーブルを家の中に通します。

しかし通す予定の３階にはエアコンもなければ、電気の配管もきてません（>_<）。仕方なく壁に穴を開けました。

■このページの専門用語■

回線終端装置とは

電線から引っ張ってきた光ケーブルを繋ぐ為の機器。

モジュラーコンセントとは

電話の線であるモジュラーコードを挿す所。

ＨＰを作るには色々な方法があります。だいだい次の３つが主流みたいです。

本やネットで調べて、一番お金がかからず自由に作れそうなメモ帳でＨＰ作りスタートです。

作っていくＨＰの仕様紹介

■ブラウザは？■

インターネットエクスプローラーver7(IE7)で動作テストしています。

■文章を書く方法は？■

htmlというプログラムで今後の主流になると思われるXHTMLで文章を書きます。

■画像の表示や装飾は？■

スタイルシートでcssというやり方で載せていきます。

文章（XHTML）＋デザイン（css）＝実際のＨＰの画面という感じですね。

■このページの専門用語■

htmlとは

人が書いた命令をコンピュータに分からせる為のプログラム。

css（スタイルシート）とは

絵やデザインを設定するのに使います。

ここではＨＰを作るうえで出てくる簡単な用語の説明や操作方法を紹介しています。 間違いもあるかも知れませんがこのサイトなりの解釈という事でご理解下さい。

コピーペーストとは

文字をコピーして、別の所に貼り付ける（ペースト）こと。

ドラッグとは

左クリックしたままマウスを動かす操作の事。デスクトップのアイコンの移動やコピーペーストする時に使います。

ソースとは

htmlで書いたプログラムの事。

ブラウザとは

インターネットエクスプローラーやFirefox等ＨＰを表示させる場所。同じＨＰでもブラウザによって見え方が違ってきます。

サイトとは

ひとまとまりに1冊の本のように、公開されているWebページの集まりの事。 また、そのWebページの集まりが置いてあるインターネット上の場所。

Webとは

World Wide Webの略名。インターネットを使ったサービスの代表格の情報検索システムの事。 情報どうしをつなぐリンクが、あたかも蜘蛛の巣（web）のように広がっているイメージから、 この名前が付けられたみたいです。

htmlとは

人が書いた命令をコンピュータに分からせる為のプログラム。

css（スタイルシート）とは

絵やデザインを設定するのに使います。

タグとは

htmlで書いたプログラムの中の各定義コード。例えば<br />ならコンピュータに改行してと 命令させるタグ。

スパムとは

営利目的のメールを無差別に大量配信すること。

ＨＰとは

ホームページの略。自分が好きな事や趣味の事などを、世界中の人にインターネットを通して 伝える事ができるメディアです。

ネットは便利なもので、ご親切に無料でＨＰ作成に役立つソフトが貰える所が沢山あります。 ネットサーフィンで見つけた無料ソフトを紹介します。絶対必要なものもありますよ。

JTrim

必要度★★★★

写真を加工して文字をいれたりできます。主に写真を小さくするのに使ってます。

これは操作も分かりやすく気に入っています。

HTMLProject2

必要度★★

HTMLを書くソフト。入力間違いをチェックしてくれる機能のみ使っています。取扱説明書がないとイマイチ操作が 分からないので使いこなせてないだけなのですが・・・。

icoFX

必要度★★★

アイコンが作れるソフトです。これは超使いやすいしオススメです。このＨＰのアイコンは全てこれでつくりました。

pixa

必要度★★★★

昔から人気のある無料お絵かきソフトです。使い方が少しややこしい気がしますが、多機能でお得度は高いです。 このＨＰの画像の一部をこれで作りました。

natm

必要度★★

gifアニメーションが作れるソフトです。icoFXで作ったアイコンをアニメーションさせるのがおもしろいです。

＊名前から各サイトに行けますので、ぜひ１度ダウンロードしてみて下さい(^_^)。

本屋さんでhtmlの解説書を３時間連続で立ち読みしたり、無料でソフトも取得したりでなんとかお金を 使わずにＨＰを作れる環境が整いました(^_^)。

■ＨＰの保管用フォルダを作る■
1. まずはパソコンを立ち上げた最初のアイコンが並んだ画面（デスクトップ）の何もない所でマウスを右クリック。
2. メニューの「新規作成」→「フォルダ」を選びます。
3. 次にキーボードのBackspaceキーを１回押して”新しいフォルダ”という名前を消します。
4. 最後に好きなフォルダ名をキーボードで入力してEnterキーで決定します。 （名前は好きなのでいいですよ。ここではＨＰ作成と付けました。）
5. これでＨＰの内容をパソコンにしまうフォルダの完成です。

■ウィンドウズのメモ帳でデザイン用のcssファイルを作る■
1. デスクトップ画面の左下のウィンドウズのロゴマークをクリックしてメニューからメモ帳を選びます。
2. メモ帳の画面が開いたら何も書かずに上部のメニューから「ファイル」→ 「名前を付けて保存」を選びます。
3. 名前をindex.cssと付けます。保存先は上部に表示されたアイコンから、先程作ったＨＰ作成のフォルダを選び保存をクリックします。
4. ここに背景の色とか枠線とかの設定をしますがそれは後ほど。

■画像保存フォルダを作る■
1. 「ＨＰ作成」のフォルダを開き、フォルダ内の何もない所で右クリックします。
2. メニューの「新規作成」→「フォルダ」を選びます。
3. 次にキーボードのBackspaceキーを１回押して”新しいフォルダ”という名前を消します。
4. キーボード入力でimgと名付けEnterキーで決定します。
5. ここにデジカメで撮った写真とかを保存してＨＰに使います。

どうですか？デスクトップ上にＨＰ作成という名前のフォルダは出来てますか？ そのフォルダの中にindex.css、img というファイルやフォルダが保存されていればここまではＯＫです。

いよいよ、実際にＨＰの文や画像を載せるトップページ用のhtmlファイルを作ります。コピーペースト するだけなので簡単ですよ(^。^)。

■htmlファイルの作り方■
1. デスクトップ画面の左下のウィンドウズのロゴマークをクリックしてメニューからメモ帳を選びます。
2. メモ帳の画面が開いたら次のソースをコピーペーストして下さい。

■ソースの補足■
• <title>○○○○</title>の間には、 ページタイトルを記述して下さい。実際のＨＰ画面左上に表示されるタイトルになります。
• <body>〜</body>の間には、ＨＰの内容を記述していきます。
• 最初の英文はhtmlファイルですよとコンピュータに教える為のソースです。

3. ソースのコピーペーストができたら上部のメニューから「ファイル」→ 「名前を付けて保存」を選びます。
4. 名前をindex.htmlと付けます。保存先は必ずＨＰ作成のフォルダを選んで下さいね。
5. ＨＰ作成のフォルダ内にindex.htmlが入っていれば成功です(^^)。
6. index.htmlはＨＰのトップページに付ける名前です。〜.htmlの〜の部分を変えて 何個でもhtmlファイルが作れます。（＊注意点として名前は必ず半角のアルファベットと数字のみで付けます。（かっこ）も禁止です。）

一息いれたら、次はこのindex.htmlファイルに内容を入れていきますよ(・_<)。

ここからはindex.htmlの中身（トップページの内容）を作っていきます。ネットサーフィンをしていると 画面上にタイトルがあってその下にＨＰの内容とメニューがあるＨＰが多いですよね？

そんな感じの画面割りを四角の枠（box）を使って作ります。まずは下のソースをコピーペーストしてみて下さい。

テスト用イメージ画像のトップページと同じものが出来るはずです。

■index.htmlへのコピーペーストの仕方■
1. index.htmlのファイルを２回クリックすると真白な画面が出てきます。
2. 真白な画面の何もない所で右クリックしてメニューを出します。
3. メニューの中から、「ソースの表示」を選ぶとhtmlが書かれた画面が出てきます。
4. コピーペーストはこの画面の<body>〜</body>の間に入れて下さい。
5. ペーストしたら画面上部のメニューバーから「ファイル」→ 「上書き保存」を忘れずにしましょう。
6. 保存できたら、１度ファイルを閉じて下さい。

■index.cssへのコピーペーストの仕方■
1. index.cssのメモ帳を２回クリックして開いた画面にコピーペーストして下さい。
2. コピーペースト後に上書き保存も忘れずにしましょう。
3. 最後にindex.htmlを開いて、画面割がテスト画像の様に出来ていれＯＫです(^^)。

後、index.htmlの<head>〜</head>内に

＊<body>〜</body>内や<head>〜</head>内という指定がある場合は、必ずその間にソースをコピーして下さい。 コピーするスペースがない場合は、マウスをコピーしたい所に合わせ、キーボードのEnterキーを押すと改行されてスペースが空きます。

＊この時点では、index.htmlの画面は真白のままです。続けて、008pでメモ帳で作ったcssファイルのindex.cssにも次のソースをコピーして下さい。

＊字が小さくて見にくい方はブラウザの文字サイズを変更できますのでお試し下さい。

＊うまく表示されましたか？表示できていない場合は、<head>〜</head>等の指定どおりの所にコピーされていないと思われますので、諦めずに確認してみて下さい。

*先程の画面割りのソースの内容を補足します。 自分でソースの数値を変えたりすると楽しいし、感覚的に理解できると思いますよ。

width

boxの横幅を指定。

height

boxの縦幅を指定。

float

boxの位置を指定。leftで左寄せ、rightで右寄せにboxを配置。指定がないとばらばらになります。

background

boxの背景色を指定。 カラーコード表 はここで見られます。

margin

boxの外側の余白量を指定。margin-left:10px;でboxを左に10pxの余白を作るという意味になります。 top（上側）left（左側）right（右側）bottom（下側）それぞれ指定出来ます。

padding

boxの内側の余白量を指定。box内の文字等の位置をずらすのに使います。 padding-left:10px;でbox内に書いた内容を左に10pxずらすという意味になります。

border

boxに枠線を付けられます。pxで線の太さ、カラーも指定できます。 solid(普通線）double（二重線）groove（谷型線）ridge（山型線）insent（凹線）outset（凸）dotted（点線）dashed（太い点線）の中から種類も指定出来ます。

boxによる画面割りが出来たら後は、box内に文章や画像を入れるhtmlタグを駆使してＨＰを作っていきます。 ここでは個人的によく使うタグだけを紹介します。参考になれば幸いです。

<div id="○○○"></div>

cssで設定した（index.cssで#○○○と記述した）boxの表示に使います。</div>の手前に入れた記述がそのbox内に表示されます。

<b>〜</b>

文字を太くします。boldの略です。〜内の文字全てに有効となります。

<br />

改行させます。最後に「/」を入れるのがxhtml流です。

<h1〜6>〜</h1〜6>

文字の大きさを変更。１が大きく６が小さい。

<p>〜</p>

上下を改行して文章を書く時に使います。

<div class="○○○"></div>

cssで設定した（cssで.○○○と記述した分）アイコンや画像を表示させるのに使います。

<a href="○○○"></a>

リンク指定に使います。○○○の部分にはリンク先のアドレスかhtmlファイルの名前をいれます。

<table><tr><td>○○○</td><td>△△△</td></tr></table>

本来は表を作るタグですが、別々の文章やアイコンを横並びにする時に使っています。 ○○○と△△△が横並びで表示されます。あまりオススメできる方法ではありませんが・・。

<img src="img/○○○">

画像ファイルから直接画像を貼り付ける時に使います。○○○には画像名を入れます。

<dl><dt>○○○</dt><dd>△△△△△△</dd></dl>

このタグ説明のように、○○○が表題、△△△△△△が表題の解説といった書き方をする時に使います。

＊他にも様々なタグがありますので機会があれば紹介したいと思います。

タイトルの文字が入ったので、今度はバックに背景を入れてみましょう。まずは、下の画像を 先に作っておいた画像保管用のimgフォルダに保存してみて下さい。

画像が取れたら index.cssの#bannerの{かっこ}内にコピー→→

タイトルの次は、ＨＰの内容をcontentのboxの中に入れていきましょう。

この様に<div id="content">とcontentのboxの終了タグの</div>の間に コピーペーストして下さい。キーボードのEnterキーで<div id="content">と</div>間を改行させると見やすいですよ。

このままでは、見にくいのでindex.cssで装飾しましょう。

#contentの記述を全部消してから、このソースを丸々コピーして下さい。

背景色を白に、大きい点線で枠を作り文字の位置を10pxずつ余白を作るというスタイル変更です。

今度は、別のページにリンク（移動）出来るメニューリストを作ります。

この様に<div id="menu">とmenuのboxの終了タグの</div>の間に コピーペーストして下さい。キーボードのEnterキーで<div id="menu">と</div>間を改行させると見やすいですよ。

このままでは、見にくいのでindex.cssで装飾しましょう。

#menuの記述を全部消してから、このソースを丸々コピーして下さい。

背景色を肌色に、細い黒線で枠を作り文字の位置を10pxずつ余白を作るというスタイル変更です。

ここでは、フッターという画面下のboxを作っていきます。

footのboxにも文章とスタイル変更のソースをコピーペーストしましょう。

この様に<div id="foot">とfootのboxの終了タグの</div>の間に コピーペーストして下さい。キーボードのEnterキーで<div id="foot">と</div>間を改行させると見やすいですよ。

このままでは、見にくいのでindex.cssで装飾しましょう。

#footの記述を全部消してから、このソースを丸々コピーして下さい。

文字の位置を15px上に余白を作り文章を真ん中に、文字色を白にして文字サイズを少し小さくというスタイル変更です。

016pのメニューリストを作ろうで、リンク先に指定したlink1.htmlとlink2.htmlのファイルを作り、 トップページから移動できるリンクページを作っていきましょう。

■link.htmlファイルの作り方■
1. デスクトップ画面の左下のウィンドウズのロゴマークをクリックしてメニューからメモ帳を選びます。
2. メモ帳の画面が開いたら次のソースをコピーペーストして下さい。

link1.htmlを作る
1. ソースのコピーペーストができたら上部のメニューから「ファイル」→ 「名前を付けて保存」を選びます。
2. 名前をlink1.htmlと付けます。保存先は必ずＨＰ作成のフォルダを選んで下さいね。
3. ＨＰ作成のフォルダ内にlink1.htmlが入っていれば成功です(^^)。

link2.htmlを作る
1. 「ＨＰ作成」のフォルダを開き、link1.htmlのファイルにカーソルを合わせて、右クリックします。
2. メニューの「コピー」を選びます。
3. 次に、「ＨＰ作成」のフォルダ内の何もない所で右クリックしてメニューを出して、「貼り付け」を選びます。
4. すると、”link1-コピー.html”というファイルが出来ます。
5. 次にキーボードのBackspaceキーを１回押して”link1-コピー.html”という名前を消します。
6. キーボード入力でlink2.htmlと名付けEnterキーで決定します。
7. これで、リンクページ用のhtmlファイルが２つ完成です。
8. 同じ様にすれば、ファイルはいくらでも増やせます。

後は、トップページと同じ様に、cssファイルでスタイルを指定して、見やすいページを作っていきましょう。

各リンクページの内容はlink1が私の節約術、ink2が私のイチ押し節約レポートです。ソースをコピーしてみて下さい。

＊link2もタイトルだけ変更して、同じものをコピーして下さいね。

＊うまく表示されましたか？後は、自分なりに文章を作っていけば、節約を紹介したページの完成ですv(^_^)v。

長い間、お付き合いいただきありがとうございました(^_^)。

一応、ここまででＨＰの作り方は終了です。まだ、ほとんどページもないし、デザインもいまいちで納得できるＨＰには なっていないと思いますが、htmlやcssの役割などＨＰを作る知識は付いたのではないでしょうか？

作ったＨＰに写真を入れたり、絵を入れたりパワーアップさせる方法を紹介した 節約ＨＰパワーアップ集も用意しています。

作ったＨＰを全国の方に見てもらうには、アップロードという作業が必要になりますが、アップロードの仕方も詳しく紹介しています。

ぜひ、参考にして、素敵なＨＰを作ってみて下さい。そして、それが節約に関するＨＰでより多くの方に節約の輪が広がっていくことを願っています。

お願い

間違えた情報の訂正や、知りたいことなどがあれば、メールに書き込んでいただけると、 出来る範囲でこのページに反映させたいと思っています。宜しくお願いします。