お小遣いサイト作成
はじめに
「HP（ホームページ）を作りたい！」と思いました。
ですが、右も左もわからない初心者では何を見てもチンプンカンプンですよね？
管理人の 「 不良パパ 」 もそうでした。(^。^;)
初心者支援サイトを見ても何を書いてあるのかさえ分かりませんでした。ですが、沢山のサイト様を閲覧しているうちに簡単なものは少しずつ理解できるようになりました。
そこからは見よう見まねで何とかHPを作れるようになったので、これからHPを作りたいと言う方はあせらずにゆっくりと、少しずつスキルアップしていきましょう。
はじめは物まねでも、少しずつ自分のイメージに合うページを作れれば楽しいです。
ただし、サイト様によっては二次使用禁止やそのサイトへのリンクが使用条件だったりするので、利用規約などを良く理解したうえで使用させていただきましょう。
二次使用や物まねなどがあり、そこから新しい技術などが生まれ発展して行くのですから使用できなければ「ほんの一握り」の方たちの技術でしかありません。あまり神経質にならずに、利用規約を守って楽しんでHPを作りましょう。
ホームページを開設するサーバー（場所）はタダのところもあれば有料もあります。個人の楽しみ程度なら広告が表示されますがタダのスペースで十分でしょう。
ただし、お小遣いサイトやアフィリエイトなどの利益が発生するものはタダのスペースでは、ほとんどが禁止されているので利用規約をよく理解してから開設しましょう。
タダのスペースでもFC2WEBのように商用利用が可能なところもあるので、「ホームページスペースはタダがいい」って方は、広告が表示されますが FC2WEB はおすすめですよ！
無料版のホームページスペースの場合、注意しなければならないことがあります。運営の都合上で突然有料になったり、URLの変更・閉鎖なども考えられるのでお小遣いサイトをながく運営するなら有料版をおすすめします。
HTML の基本
H T M L について
Webページ（HP）はHTMLというものを使って記述します。
このHTMLはタグといわれるものを使ってテキストに色や形・レイアウトなどの指示を書き込んでコンピュータがその情報を読み込み、ブラウザ（Internet Explorer など）で表示するというものです。このタグを使ってさまざまなデザインを作ります。
HTMLの基本構造
| ■ タグ | ■ 解説 |
|
<html> <head> <title>お小遣いサイトを作ろう！</title> </head> <body> <h1>ホームページを作ろう！</h1> </body> </html> |
これはhtmlですよ <head>〜</head>の中にページの紹介文やキーワードを書き込む <title>〜</title>の中にホームページ名（ブラウザの上に表示されるタイトル） headを閉じる <body>〜</body>の中にコンテンツ これは見出しといって数字を変えることで挟んだ文字の大きさが変わる（タイトル・サブタイトルなど） bodyを閉じる htmlを閉じる |
上記のタグをコピー&ペーストで試して見て下さい。方法は windows ならスタートをクリック→すべてのプログラム→アクセサリ内のメモ帳かワードパッドを開いてペーストする。
または、デスクトップ画面の何もないところで右クリック→新規作成をクリック→メモ帳で！それを保存して拡張子を .txt から .html か .htm にかえたものをダブルクリックするとブラウザ（Internet Explorer など）が立ち上がりホームページを作ろう！という文字が表示されます。
このように<body>〜</body>の中にさまざまなタグを書き込むことでページを作っていきます。
注意点は対になっているタグは<★★>からはじまり、必ず</★★>で閉じること。閉じ忘れるとそれ以降のすべてのタグに適用されてしまうので注意！
※コピー&ペーストのやり方はコピーしたい文字の上でマウスの左ボタンをクリックしたままで、スライドさせると文字の色が反転します。
そこにカーソルを合わせて右クリックでコピーを選択。メモ帳かワードパッドの何もないところで右クリックして貼り付けを選択で OK。
拡張子の変え方はメモ帳かワードパッドで保存したファイルを右クリックで名前の変更を選択して index.html などとする。
拡張子が表示されていない場合はマイコンピュータをダブルクリックで
ツールを選択→フォルダオプションを選択→表示を選択して詳細設定内の
「すべてのファイルとフォルダを表示する」にチェック→「登録されている拡張子は表示しない」のチェックをはずす→「すべてのフォルダに適用」を選択→「適用」を選択で OK。
スタイルシートについて
スタイルシート（CSS）とは、ひとことで表現するなら「Webページのレイアウトを定義する技術」と言えるでしょう。
もともと表現方法を指定するためのものではなかったそうですが、Webの発展により色やフォントサイズの指定、レイアウトのためのテーブルの利用、文章の体裁やデザイン（見栄え）などを定義するようになっていったようです。
簡単に言うと、スタイルシートを使うことにより一つ一つタグで指示しなければならないところを部分的にかえたり、ページ全体に指定したり、全てのページに適用したりすることができるようになります。
例えば、季節ごとに壁紙を変えたり、文字の色や大きさを変えたりするのに、本来なら全てのページをタグなどで指定し直さなければならないのですが、スタイルシートではこれらを簡単に変更することができます。
ページ数が増えれば増えるほど、必要となるでしょう。方法はそのページだけに適用する場合は<head>〜</head>の中に記述したり、すべてのページに適用する場合は外部ファイルを作って読み込ませるなどの方法があります。
スタイルシート使用
| ■ タグ | ■ 解説 |
|
<html> <head> <title>お小遣いサイトを作ろう！</title> <style type="text/css"> <!-- h1 { color:blue; font-style:italic } --> </style> </head> <body> <h1>ホームページを作ろう！</h1> <h2>ホームページを作ろう！</h2> <p>このページにスタイルシートを適用。 </p> </body> </html> |
これはhtmlですよ <head>〜</head>の中にページの紹介文やキーワードを書き込む <title>〜</title>の中にホームページ名（ブラウザの上に表示されるタイトル） <style type="text/css">〜</style>これはスタイルシートです コメントアウト ここではh1を指定しています ここでは文字の色を指定してみました ここでは文字の形を指定してみました styleを閉じる headを閉じる <body>〜</body>の中にコンテンツ これは見出しなど bodyを閉じる htmlを閉じる |
上記のサンプルはそのページにのみスタイルシートを使用しています。
この場合<head>〜</head>に<style type="text/css"><!--スタイルの指定--></style>のように記述します。
外部ファイルの場合は<head>〜</head>の中に<LINK rel="stylesheet" href="半角アルファベットでお好きなファイル名.css" type="text/css">と記述します。
外部ファイルはメモ帳かワードパッドにスタイルの指定を書き込み、拡張子を .css と変えて下さい。
※タグやスタイルなどを全ておぼえて手書きで作成するのでは大変な作業となってしまいます。不良パパの場合は、メモ帳などにタグやスタイルを分けてそれぞれをコピーして保存しています。こうすれば使いたいときにコピー&ペーストですむので、とても簡単ですよ (*´∇｀*)
