お金を稼ぐホームページを作成するには、HTMLとCSSの知識が必要になります。その基本的な部分を学びましょう。
ホーム ＞
上級レベル ＞
HTMLとCSSを学ぼう
また、その手入力するべき、ホームページを表示するためのHTML言語も学ぶ必要があります。
では、その前に準備するものがあります。
手入力するためのテキスト文字編集ソフトです。 Windowsにあるメモ帳でも構いませんが、 使い勝手が悪いので、サクラエディタ（無料）をおすすめします。
サクラエディタは、無料なのに高機能です。 HTMLのタグも色分けしてくれ、非常に見やすく使いやすいです。 ぜひ、利用してください。リンク先から入手可能です。
これさえあれば、あとは何もいりません。
勉強あるのみです。
まず、言っておきますが、HTMLは非常に簡単です。
誰でもすぐに理解できると思います。
早速ですが、ご説明します。
ホームページは、タグと呼ばれる要素で構成されています。
タグとは、「<h1>文章</h1>」（見出しタグ）のように、 「<」と「>」で括られたものです。
タグは開始タグ「<h1>」と 終了タグ「</h1>」のセットで使用するものと、 開始タグ「<br>」（改行タグ）のみで使用するものがあります。
そして、このタグを使用して１ページを構成します。
＜１つのHTMLファイルの中身＞
これが１ページの全体像です。
各ページでヘッダー情報と本文情報を作成することにより、ホームページ全体を構成します。
このような形で、HTMLのタグを使用して、ホームページを作成していきます。
HTML言語は詳しく説明しようとすると、それだけで分厚い参考書ができるぐらい情報があるため、 当サイトでは、最初のさわり程度のご紹介とさせていただきますが、 以下のサイトなどは、詳しく情報が整理されていて、やりたいことがすぐに調べられるので、参考にしてみては如何でしょうか。
誰でもすぐに理解できると思います。
早速ですが、ご説明します。
ホームページは、タグと呼ばれる要素で構成されています。
タグとは、「<h1>文章</h1>」（見出しタグ）のように、 「<」と「>」で括られたものです。
タグは開始タグ「<h1>」と 終了タグ「</h1>」のセットで使用するものと、 開始タグ「<br>」（改行タグ）のみで使用するものがあります。
そして、このタグを使用して１ページを構成します。
＜１つのHTMLファイルの中身＞
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
↑ ドキュメント宣言と呼ばれるものです。必ず全ページの先頭に挿入します。
<html>
<head>
← この部分にページのヘッダー情報を挿入します。
ページのタイトル、概要、キーワードなど
</head>
<body>
← この部分にページの本文情報を挿入します。
ユーザーが閲覧するページの記事内容
</body>
</html>
↑ ドキュメント宣言と呼ばれるものです。必ず全ページの先頭に挿入します。
<html>
<head>
← この部分にページのヘッダー情報を挿入します。
ページのタイトル、概要、キーワードなど
</head>
<body>
← この部分にページの本文情報を挿入します。
ユーザーが閲覧するページの記事内容
</body>
</html>
これが１ページの全体像です。
各ページでヘッダー情報と本文情報を作成することにより、ホームページ全体を構成します。
- ヘッダー情報に挿入するタグ
metaタグ（文章に関する情報（キーワード、概要））、 linkタグ（参照、関連文章との関係）、 titleタグ（文章のタイトル）をこの要素内に挿入します。
- 本文情報に挿入するタグ
ブラウザの画面上に表示されるタグを挿入していきます。
主に、文章の枠組みとなるブロックレベル要素である h1タグ（見出し）、 pタグ（段落） などをこの要素内に挿入します。 そして、修飾（表示）やリンク、画像などのインライン要素である aタグ（リンク）、 imgタグ（画像）、 bタグ（強調＝太字）、 brタグ（改行） などをこの要素内に挿入します。
このような形で、HTMLのタグを使用して、ホームページを作成していきます。
HTML言語は詳しく説明しようとすると、それだけで分厚い参考書ができるぐらい情報があるため、 当サイトでは、最初のさわり程度のご紹介とさせていただきますが、 以下のサイトなどは、詳しく情報が整理されていて、やりたいことがすぐに調べられるので、参考にしてみては如何でしょうか。
- 【HTMLタグの簡単検索】TAG index
HTMLタグ・CSS・テンプレート - Web制作のインデックスサイト
- HTMLタグリファレンス（ABC順）
HTMLタグ・スタイルシート・特殊文字等の早見表
まず、CSS（Cascading Style Sheets）とは、
ページのスタイルを指定するためのプログラム言語です。
簡単に言うと、文章の見栄えを良くする指示言語です。
CSSのメリットは、HTMLファイルと分離できることと、 複数ページに適用ができるという点です。
すなわち、共通化が可能ということです。
各HTMLファイルを修正することなく、ページの修飾（表示）を変更できるので、メンテナンスが楽になります。
また、CSSを使い、HTMLから切り離して共通化すると、各ページのHTMLファイルの記述少なくなり、 ファイルサイズが減少、ページが軽くなるという利点もあります。
早速、具体例でご説明します。
pタグ（段落）の文字色を赤に設定する場合、CSSの記述方法は以下の通りです。
＜CSSの中身＞
＜HTMLの中身＞
すると、以下のような表示となります。
「p」部分をセレクタ（Selector）、 「{ }」で囲まれた部分を宣言（Declaration）と言います。 宣言の中には、プロパティと値を「:」（コロン）で区切って記述します。
セレクタは適用したいタグ要素を、 プロパティは定義するスタイルの内容（色、サイズ、形など）を指示します。 プロパティと値は「;」（セミコロン）で区切ることで、以下のように複数のスタイルを指示できます。
＜CSSの中身＞
すると、以下のような表示となります。
でも、これではすべてのpタグ（段落）が赤文字になってしまいます。
セレクタはクラス名を付けることにより、限定したタグだけを変更可能です。
＜CSSの中身＞
＜HTMLの中身＞
すると、以下のような表示となります。
HTML言語と同様、CSSもかなりの情報量なので概要のみとします。
CSSは大変便利なので、ぜひ活用してください。以下のサイトが大変参考になりますのでご覧ください。
次ページ ＞ アフィリエイトの始め方と実践方法
CSSのメリットは、HTMLファイルと分離できることと、 複数ページに適用ができるという点です。
すなわち、共通化が可能ということです。
各HTMLファイルを修正することなく、ページの修飾（表示）を変更できるので、メンテナンスが楽になります。
また、CSSを使い、HTMLから切り離して共通化すると、各ページのHTMLファイルの記述少なくなり、 ファイルサイズが減少、ページが軽くなるという利点もあります。
早速、具体例でご説明します。
pタグ（段落）の文字色を赤に設定する場合、CSSの記述方法は以下の通りです。
＜CSSの中身＞
p {
color: red;
}
color: red;
}
＜HTMLの中身＞
<p>こんにちは</p>
すると、以下のような表示となります。
こんにちは
「p」部分をセレクタ（Selector）、 「{ }」で囲まれた部分を宣言（Declaration）と言います。 宣言の中には、プロパティと値を「:」（コロン）で区切って記述します。
セレクタは適用したいタグ要素を、 プロパティは定義するスタイルの内容（色、サイズ、形など）を指示します。 プロパティと値は「;」（セミコロン）で区切ることで、以下のように複数のスタイルを指示できます。
＜CSSの中身＞
p {
color: red;
font-size: 20px;
font-weight: bold;
}
color: red;
font-size: 20px;
font-weight: bold;
}
すると、以下のような表示となります。
こんにちは
でも、これではすべてのpタグ（段落）が赤文字になってしまいます。
セレクタはクラス名を付けることにより、限定したタグだけを変更可能です。
＜CSSの中身＞
p.red {
color: red;
}
color: red;
}
＜HTMLの中身＞
<p class="red">こんにちは</p>
<p>Ｈｅｌｌｏ</p>
<p>Ｈｅｌｌｏ</p>
すると、以下のような表示となります。
こんにちは
Ｈｅｌｌｏ
Ｈｅｌｌｏ
HTML言語と同様、CSSもかなりの情報量なので概要のみとします。
CSSは大変便利なので、ぜひ活用してください。以下のサイトが大変参考になりますのでご覧ください。
- CSSリファレンス(CSS入門)
とほほのＷＷＷ入門
- スタイルシートリファレンス（ABC順）
HTMLタグ・スタイルシート・特殊文字等の早見表
次ページ ＞ アフィリエイトの始め方と実践方法
