ＨＰ作成超簡単基礎講座
ネットで小銭を手にしようとした時、自分のＨＰを持っているか持っていないかで収入に大きな差が生まれてきます。
ＨＰってどうも…と思っている人の為の基礎講座です。
このページに書いてある事、そしていくつかのリンク先を読めば、このＨＰくらいの物は作れるようになります（実際、私はそれだけで作ってます。継続さえできれば、誰でもＨＰの五つや六つ片手で作れるようになるでしょう、おそらく…）
ＨＴＭＬ
ＨＰを作る上での根幹となる物です。ほとんどの人が聞いたことがあると思います。ＨＴＭＬは、ハイパーテキスト何とかかんとかの頭文字ですが、特に覚える必要はありません。
<html> <head> <title></title> </head> <body> </body> </html>
ＨＴＭＬとは、基本的にはこれだけの物です。<html>から</html>の中に全てをおさめます。
<html>から</html>の中でも、<head></head>と<body></body>の二つに別れています。しかし、head部分のタグはtitleくらいなので、ほとんど説明は要らないでしょう(html言語では、と言う事です。javascriptなどのソースやページの定義などをこの部分に入れたりもします）。
<title>と</title>の間に入力した文字列が、ウィンドウの一番上に表示されます。また、お気に入りに追加する時など、この文字列が名前として表示されます。
さて、body部分ですが、これがブラウザに表示されるメインの部分です。この中に見だし（<h1>〜<h6>タグ）や表（<table>タグ）、そして文章（<p>タグ）、画像（<img>タグ）など思うままに詰め込みましょう。
この項目はこれで終わりです。えっ！？と思われるでしょうが、私がまずい説明をするよりも、良いＨＰがあるので、これ以上の事はそちらで勉強しましょう。
| とほほのＷＷＷ入門 | 入門の名の通り、１からわかりやすく書かれています。このＨＰを大まかにでも理解すれば、もうＨＴＭＬ初心者ではありません。 |
| 簡単ＨＴＭＬ講座 | このページも大変わかりやすい構成になっています。どちらかと言うと、「ここをこうしたいんだけど…」と思った時に見ると大概の問題は解決します。 |
スタイルシート/CSS
スタイルシート/ＣＳＳ（カスケーディングスタイルシート）とは、ＨＴＭＬの見映えを左右する重要な物です。
まず、このページを見てください。単にページが表示されましたね？
次は、このページを見てください。何とも殺風景なページが表示されました。これは、hajimeni.htmが参照しているスタイルシートを、参照しないように１行だけソースを書き換えた物です。
最後に、このページを見てください。このページは、違うスタイルシートを設定し、それを参照するようにしたものです。
このようにスタイルシートとは、要素の位置、余白の大きさ、それに色の組み合わせ等、見る人の印象に大きく影響する大事なものです。
さて、ページを見比べて気付いた方もいるかもしれませんが、太い赤文字で表示されている所（大幅な収入増）や、文中で太い黒文字で表示されている所（すべてチェックを入れる等、数ヶ所）がありますね？
これは<font>タグ（囲んだ中の文字の装飾を変えるタグ、ここでは色を赤に指定）や、<b>タグ（囲んだ中の文字を太文字で表示させるタグ）などをHTMLのソースに書きこんでいるからです。
このように、HTMLソースにデザイン指定要素を書きこむことで、スタイルシートを全く使わずにHPをデザインする事は可能です。しかし、余白を指定するmarginやpaddingを始めとしてスタイルシートを使わなければ出来ないことが数多くあります。それにどういう色使いが良いか、どのくらいの余白を取るか、などの細々とした微調整の必要な部分は、HTMLソースに書きこみ、確認するよりも、スタイルシート編集ツールを使って作業した方が断然効率が良いです。さらに同じデザインを繰り返す場合、やはりスタイルシートの方が便利です。
繰り返しの一例を挙げると、左のメニュー部分があります。このカテゴリ名の部分（背景が明るい緑になっている所）は、全て同じデザインです。HTMLソースの方にメニュー部分にクラス名を付けて、それをスタイルシートの方で指定すると、このようになります。
実例を挙げますと、
<div class="menu"> <ul> <li><p>MENU</p></li> <li><a href="../index.htm">ＴＯＰページ</a></li> <li><a href="jiko.htm">プロフィール</a></li> <li><p>副収入を得るために</p></li> </ul> </div> ※<div>と言うのは、それだけでは特に意味のないタグです。囲んだ部分にスタイルシート を適用させたい時などに用います。 ※<ul>は順序のないリスト。 ※<li>はリストアイテムの略でリストの各項目を記述する時に使います。
このようにclass="menu"と任意のクラス名を指定し、スタイルシートの方で、
.menu p{ (このように書くと、クラスmenuのpタグに適用させるスタイルを指定できます）
background-color: #78F4A2;;（背景色の指定）
padding: 7px 0px 7px 0px;（上下左右の余白の大きさ）
font-weight: bold;（中に書かれる文字のスタイルの指定）
}
※boldは<b>タグと同義
このように指定しているわけです。
前述のようにpaddingなどのデザイン要素は、スタイルシートを使わないと設定することが出来ません。みなさんもサイトを作る場合は、是非ともスタイルシートを使いましょう。
下で紹介するtopstyleを使えば、手軽にスタイルシートを使えこなせます。（私はこのツールがないとﾒﾝﾄﾞｳでやる気にもなりません）
スタイルシートの説明は、これで終わりです。クラス名を指定して、そのクラスをツールで弄り倒せば、すぐに出来るようになります。ここでも二つのサイトを紹介しますので、これらをじっくり読めばあなたもCSSマスターですね、はい。
| 超初心者のためのスタイルシート講座 | 見やすく、読みやすく、わかりやすくスタイルシートの事が書かれています。HTML編もあるので、合わせて読めば他のページは行かなくても良いかも？ |
| ストリクトなHTMLの基礎講座 | テーブルを多用して段組するなんてもってのほか！など書かれているサイトです。HTMLとCSSの本来の関係性などの体系的な説明がなされているサイトですので、より深くHTMLやCSSを理解したいと思っている人は是非行きましょう。 |
こづ研一押し作成ツール
| HTMLプロジェクト２ | このツールは、フリーのＨＴＭＬ作成ツールの中で、使いやすい部類に入ると思います。このホームページもこのツールで作っています。ぜひお勧めします。 |
| TopStyle Lite | スタイルシート編集ツールの決定版！といっても過言ではないでしょう。英語なのが難点ですが、下記のパッチを当てれば日本語で使えます。 |
| TopStyle Lite 日本語化パッチ | 上記のツールを日本語化します。日本語化できるのはバージョン３．１０の物だけです。 |
| 色取鳥i | ＨＰの色使いは印象を左右するものですが、その色を決める上で大変便利です。Ｗｅｂ上だけでなくデスクトップのどんな色でもＨＴＭＬで使用するカラーコードに変換できます。 |
| ｆｆｆｔｐ | ＦＴＰのソフトを使わなくても、ＨＰのアップはできますが、ＦＴＰソフトでやると全てにおいて快適です。有名所なので名前を聞いて人もいるかもしれませんが･･･ |
