*タイトルをクリックするか、数字を選んで各ページをご覧下さい。
これは、管理人がこのサイトを作るまでに得た情報を公開しているレポートです。
実際にこのサイトも1円も使わずに(もちろん、パソコン代や電気代はかかっていますが・・)作られています。
節約している身にとって、高価なHP作成ソフトや書籍などはとてもじゃないけど買えません。 そこで、以下の方法でHPを作りました。
正直、HP作成ソフトがあればもっと楽にできる事も多々あると思いますので、あくまで節約してHPを 作る方にのみオススメするポイントです。
デメリットとしては、莫大な時間を必要としますので、これからHPを作ろうと考えている方に同じ苦労を しなくてすむように簡単な作り方を紹介しています。
多くの方に節約サイトを作って戴き、節約の輪が広がればいいなと思っています。
*間違えた情報もあると思いますが、このサイトなりの解釈ということでご理解下さい。
*もし、ここでHPがうまく作れたらぜひこのサイトを紹介して下さいね(^_^)。
どんな環境で作っているかを紹介します。基本的にどんなパソコンでもHPは作れますので 参考までに。
パソコンは様々なメーカーから大量に発売されています。値段の安さと性能で選び、色々探して結局Gatewayにしました。 正直これしか持っていないので性能が良い悪いは分かりません(@_@)。
パソコンはCPUの性能とメモリの大きさを基準に、財布と相談して選びました。
Gatewayは外国の会社なので、同じ性能なら国産のパソコンよりも安く買うことができます。節約してパソコンを 買いたい方にはオススメです。
牛の模様のロゴがサッカーボールみたいですよね。
パソコン、プリンタ共に無線で使いたかったのでルータの選択にはかなり悩みました。
我が家は3階建てで、光ケーブルを3階に引き入れたので必然的にルータは3階になり、3階→1階に伝波が届くか 心配でした。
電気屋の店員さんに色々聞きましたが「届くとは思うけど・・」とはっきりとは答えてくれないので 余計に不安になりました(~_~)。さんざん悩んでBUFFALOの300Mbpsの三本アンテナにしました。 さて結果は・・・・。
*木造3階建て延べ床面積90u20坪の小さい家でのデータです。 速度はsokudo.jpで調べました。
上りとはパソコン→ルータ、下りとはルータ→パソコンの伝達速度を表すみたいですね。
だいたい30Mbps越えれば十分みたいです。もう少し安いルータでもよかったかな?
家に固定電話もなかったので光電話もあるeo光に加入しましたが、これがADSLのように電話回線のモジュラーコンセント が使えません。
エアコンの配管の穴や電気の線を通す配管、壁に穴を開けたりして光ケーブルを家の中に通します。
しかし通す予定の3階にはエアコンもなければ、電気の配管もきてません(>_<)。仕方なく壁に穴を開けました。
HPを作るには色々な方法があります。だいだい次の3つが主流みたいです。
方法 | HTML | お金 | 備考 |
市販ソフトを買う | 覚えなくてよい | 4000円〜何万円 | ホームページビルダー等 |
wordを使う | 覚えなくてよい | 0円〜(wordインストール済の場合) | 作ったHPの表示速度が遅くなるみたいです |
メモ帳を使う | 必要 | 0円 | 自由度が高いです |
本やネットで調べて、一番お金がかからず自由に作れそうなメモ帳でHP作りスタートです。
文章(XHTML)+デザイン(css)=実際のHPの画面という感じですね。
ここではHPを作るうえで出てくる簡単な用語の説明や操作方法を紹介しています。 間違いもあるかも知れませんがこのサイトなりの解釈という事でご理解下さい。
ネットは便利なもので、ご親切に無料でHP作成に役立つソフトが貰える所が沢山あります。 ネットサーフィンで見つけた無料ソフトを紹介します。絶対必要なものもありますよ。
*名前から各サイトに行けますので、ぜひ1度ダウンロードしてみて下さい(^_^)。
本屋さんでhtmlの解説書を3時間連続で立ち読みしたり、無料でソフトも取得したりでなんとかお金を 使わずにHPを作れる環境が整いました(^_^)。
どうですか?デスクトップ上にHP作成という名前のフォルダは出来てますか? そのフォルダの中にindex.css、img というファイルやフォルダが保存されていればここまではOKです。
いよいよ、実際にHPの文や画像を載せるトップページ用のhtmlファイルを作ります。コピーペースト するだけなので簡単ですよ(^。^)。
<?xml version='1.0' encoding='shift_jis'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=shift_jis' />
<title>節約HPトップページ</title>
</head>
<body>
</body>
</html>
一息いれたら、次はこのindex.htmlファイルに内容を入れていきますよ(・_<)。
ここからはindex.htmlの中身(トップページの内容)を作っていきます。ネットサーフィンをしていると 画面上にタイトルがあってその下にHPの内容とメニューがあるHPが多いですよね?
そんな感じの画面割りを四角の枠(box)を使って作ります。まずは下のソースをコピーペーストしてみて下さい。
テスト用イメージ画像のトップページと同じものが出来るはずです。
<div id="container">
<div id="banner"></div>
<div id="content"></div>
<div id="menu"></div>
<div id="foot"></div>
</div>
後、index.htmlの<head>〜</head>内に
*<body>〜</body>内や<head>〜</head>内という指定がある場合は、必ずその間にソースをコピーして下さい。 コピーするスペースがない場合は、マウスをコピーしたい所に合わせ、キーボードのEnterキーを押すと改行されてスペースが空きます。
*この時点では、index.htmlの画面は真白のままです。続けて、008pでメモ帳で作ったcssファイルのindex.cssにも次のソースをコピーして下さい。
index.cssへコピー→#container{width:740px;
border-top:1px solid #3cb371;
border-left: 1px solid #3cb371;
border-right: 1px solid #3cb371;
border-bottom: 1px solid #3cb371;}
#banner{width:740px; height:100px;
background:#708090; margin-bottom:10px;}
#content{width:420px; height:400px; float:left;
background:#00ffff; margin-right:10px;}
#menu{width:280px; height:400px; float:right;
background:#ff00ff;}
#foot{width:740px; height:40px;
background:#708090; margin-top:10px;}
*字が小さくて見にくい方はブラウザの文字サイズを変更できますのでお試し下さい。
*うまく表示されましたか?表示できていない場合は、<head>〜</head>等の指定どおりの所にコピーされていないと思われますので、諦めずに確認してみて下さい。
*先程の画面割りのソースの内容を補足します。 自分でソースの数値を変えたりすると楽しいし、感覚的に理解できると思いますよ。
boxによる画面割りが出来たら後は、box内に文章や画像を入れるhtmlタグを駆使してHPを作っていきます。 ここでは個人的によく使うタグだけを紹介します。参考になれば幸いです。
*他にも様々なタグがありますので機会があれば紹介したいと思います。
まだboxだけの淋しいHPにタイトルを入れてみましょう。
index.htmlへコピー→この様に<div id="banner">とbannerのboxの終了タグの</div>の間に コピーペーストして下さい。キーボードのEnterキーで<div id="banner">と</div>間を改行させると 見やすいですよ。1回ファイルを閉じてからもう1回開くとタイトルが表示されているはずです。
このままでは文字が左上に寄りすぎて見にくいのでスタイルシート(index.css)を使って、 文字を中央にしてみましょう。
index.cssの#bannerの{かっこ}内にコピー→→これでタイトル文字が中央になりました。
paddingでbox内に余白を作ると、boxがずれて表示されてしまいます。そんなときはずらした分だけ、boxの大きさを 減らせばOKです。
padding | 変更する箇所 |
---|---|
top,bottom | heightをpaddingで指定した分だけ減らす |
left,right | widthをpaddingで指定した分だけ減らす |
*今回はtopを20pxずらしたので、heightをマイナス20pxすればOKです。
タイトルの文字が入ったので、今度はバックに背景を入れてみましょう。まずは、下の画像を 先に作っておいた画像保管用のimgフォルダに保存してみて下さい。
←この画像を背景にします。
画像が取れたら
index.cssの#bannerの{かっこ}内にコピー→→
削除の仕方は、コピーペーストの要領で消したい部分に青い帯を出してキーボードのBackspaceキーで消せます。
出来たら、実際に見てみましょう。チェック柄が出ていれば成功です(^o^)。
タイトルの次は、HPの内容をcontentのboxの中に入れていきましょう。
index.htmlへコピー→この様に<div id="content">とcontentのboxの終了タグの</div>の間に コピーペーストして下さい。キーボードのEnterキーで<div id="content">と</div>間を改行させると見やすいですよ。
このままでは、見にくいのでindex.cssで装飾しましょう。
index.cssの#contentの{かっこ}内にコピー→#contentの記述を全部消してから、このソースを丸々コピーして下さい。
背景色を白に、大きい点線で枠を作り文字の位置を10pxずつ余白を作るというスタイル変更です。
今度は、別のページにリンク(移動)出来るメニューリストを作ります。
index.htmlへコピー→この様に<div id="menu">とmenuのboxの終了タグの</div>の間に コピーペーストして下さい。キーボードのEnterキーで<div id="menu">と</div>間を改行させると見やすいですよ。
このままでは、見にくいのでindex.cssで装飾しましょう。
index.cssの#menuの{かっこ}内にコピー→#menuの記述を全部消してから、このソースを丸々コピーして下さい。
背景色を肌色に、細い黒線で枠を作り文字の位置を10pxずつ余白を作るというスタイル変更です。
ここでは、フッターという画面下のboxを作っていきます。
footのboxにも文章とスタイル変更のソースをコピーペーストしましょう。
index.htmlへコピー→この様に<div id="foot">とfootのboxの終了タグの</div>の間に コピーペーストして下さい。キーボードのEnterキーで<div id="foot">と</div>間を改行させると見やすいですよ。
このままでは、見にくいのでindex.cssで装飾しましょう。
index.cssの#menuの{かっこ}内にコピー→#footの記述を全部消してから、このソースを丸々コピーして下さい。
文字の位置を15px上に余白を作り文章を真ん中に、文字色を白にして文字サイズを少し小さくというスタイル変更です。
016pのメニューリストを作ろうで、リンク先に指定したlink1.htmlとlink2.htmlのファイルを作り、 トップページから移動できるリンクページを作っていきましょう。
<?xml version='1.0' encoding='shift_jis'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=shift_jis' />
<title>節約HPリンク1</title>
</head>
<body>
</body>
</html>
後は、トップページと同じ様に、cssファイルでスタイルを指定して、見やすいページを作っていきましょう。
各リンクページの内容はlink1が私の節約術、ink2が私のイチ押し節約レポートです。ソースをコピーしてみて下さい。
link1.htmlへコピー→
<div id="container">
<div id="linktop"><h1>私の節約術</h1></div>
<div id="linkcontent">
<h2 class="midashi">光熱費の節約</h2>
<p>文章を入れて下さい。</p>
<p>下にboxが伸びていくので、いくらでも書けます。</p>
<h2 class="midashi">食費の節約</h2>
<p>文章を入れて下さい。</p>
</div>
</div>
*link2もタイトルだけ変更して、同じものをコピーして下さいね。
index.cssへ追加のコピー→#linktop{width:735px;height:70px;text-align:center;
padding-top:40px;color:#ffb6c1;
border-top:1px solid #000000;
border-left: 1px solid #000000;
border-right: 5px solid #000000;
border-bottom: 5px solid #000000;
}
#linkcontent{width:725px;margin-top:10px;background:#f5f5f5;
padding-left:10px;padding-top:10px;margin-rigt:5px;
border-top:1px solid #000000;
border-left: 1px solid #000000;
border-right: 5px solid #000000;
border-bottom: 5px solid #000000;
}
.midashi{width:98%;border-left: 15px solid #ffb6c1;
border-bottom: 2px solid #ffb6c1;
font-weight:bold;
}
*うまく表示されましたか?後は、自分なりに文章を作っていけば、節約を紹介したページの完成ですv(^_^)v。
長い間、お付き合いいただきありがとうございました(^_^)。
一応、ここまででHPの作り方は終了です。まだ、ほとんどページもないし、デザインもいまいちで納得できるHPには なっていないと思いますが、htmlやcssの役割などHPを作る知識は付いたのではないでしょうか?
作ったHPに写真を入れたり、絵を入れたりパワーアップさせる方法を紹介した 節約HPパワーアップ集も用意しています。
作ったHPを全国の方に見てもらうには、アップロードという作業が必要になりますが、アップロードの仕方も詳しく紹介しています。
ぜひ、参考にして、素敵なHPを作ってみて下さい。そして、それが節約に関するHPでより多くの方に節約の輪が広がっていくことを願っています。