ひぃなも作り方を語れるほどホームページ作成について分かっているとはいえませんが・・。ここまで作成ソフトを使わずにホームページを独学？で作ってきて、ある程度得た知識を書いておきたいと思います。簡単なページを作れる程度の説明です。後はみなさんの頑張りとセンスでカバーということで。初歩の初歩ですが、これを見て「自分もうちのコのＨＰを作ってみようかな？」と思う方がいてくださったら、ひぃなは嬉しいのです（＾−＾）

１．スペースを借りる

ＨＰを作るには、ＨＰを置く場所が必要です。「無料ＨＰスペース」等で検索するとたくさん出てきます。自家サーバーを置く、という方法もあると思いますが初心者さんでいきなりサーバー買う人はいないでしょうし（笑）ひぃなもよくわかりません。（＾＾；）ＨＰスペースといってもたくさんあるので迷いそうですよね。ひぃなも迷いました・・。それぞれのＨＰスペースの特徴をよく読んで決めた方がいいと思います。実際に使っている方の声も探すと出てきますし。ひぃながインフォシークさんにしたのは・・まぁ有名だったからなんですけど。あ、でもそれだけじゃないですよ！容量が５０MBと結構多いってこととか・・まあ、いろいろ。
あと、ファイルマネージャーがあってネット上でタグを直接入力して更新できるところが簡単でいいんじゃないかと。ひぃなはこれでタグいじって作ってますので。CGIを置ける、置けないというのもありますがひぃなは今はレンタルCGIばかりなのであまり関係ないかな。借りてきたレンタル掲示板等をリンクするだけならどこでもできますから。
一応知っているところを一部載せておきますがちゃんと調べたわけじゃないので責任は負いかねます。（＞＜；）

２．ＨＰの基本

ＨＰはタグという半角英数の記号の羅列で出来ています。画像なんかの飾り、いわゆる素材を表示させるのも全てタグです。タグは必ず半角、そしてこういうかっこ⇒<>で囲まれていなければいけません。タグをちょっとでも間違えると正常に表示されないので注意です。間違えて一文字消しちゃったり追加しちゃったりするだけで全部チェックしてミスを探さなきゃいけなくなっちゃうのでタグをいじる時は気をつけましょう。（＾＾；）半角英数の羅列ってずっと見てると頭いたくなっちゃうんですよね・・。
あと、ＨＰに使うファイル名は全部半角英数でつけます。全角はだめです。半角カタカナもだめ。小文字大文字の区別はないみたいですが小文字を使うのが普通かと。メールアドレスのような感覚ですね。「_ 」も使えます。画像や音楽以外の、文書などのファイル、つまりページとして表示させるファイルには「.html」を最後につけないとだめです。あとＨＰの一番最初にくるページの名前は必ず「index.html」という名前にしなければなりません。理由は・・何故だったかな・・。うーん、とにかく決まりみたいです。（適当）他のページは自由につけて大丈夫です。（ここのページはＨＰの作り方なので「hp.html」にしてます。）ファイルはフォルダにしまって分けておくと分かりやすいですが難しければそのままでも。同じ名前のファイルはアップすると上書きされちゃうのでアップ前には同じ名前がないかチェックした方がいいかも。画像形式は写真ならjpg、イラストはgif・pngがおすすめ。500ピクセル以上の画像はかなり大きいので背景に使う以外はあまりおすすめできません。ページが重くなるし、スライドさせながら見るのも大変なので。ひぃなは多少ウィンドウを小さくしても崩れないぐらいのレイアウトが好きです。個人的意見ですけどね。（＾＾；ヾお気に入りは常に表示しっぱなしなので。音楽に関してはつけてないのでよくわかりません。MIDIファイルが一般的みたいですが。音楽素材で検索すると出てくるかも。

３．タグの基本

htmlファイルを作ったら、さっそく簡単なページを作ってみましょう。最低限必要なタグはこれだけです。（＾＾）

□　文字
さて、そうやってbodyに本文を書いていくと表示されるわけなんですが、このままでは延々と文字が続いてしまうだけなので。文を読みやすく並べる事が必要です。文字をいじるタグを入れましょう。
基本はこんな感じかな。ひぃながよく使っているタグです。↓

こんな風に表示されます↓このようにbodyタグの中に書いていきます

そうそう、色記号は「pink」「blue」などと直接色名を書く方法と「#000000」「#FFFFFF」などのように#と英数６字で書いていく方法。どちらでもいいのですが色名は知らないと書けないですよね・・。数字の方は自分で色を作ってみる！という事ができます。色々試してみた結果、#の横の最初の2文字は赤、真ん中2文字は緑、最後の2文字は青の濃さを表しているようです。 入れてよいのは0〜9までの数字とA〜Fまでの半角英字。色の濃さは⇒「薄…（00〜99、AA〜FF）…濃」こんな感じとみました。でも何故か#000000が黒で#FFFFFFが白くなるんですよね・・謎。全体的な色味を上げていくと薄くなって全体的に色味を下げていくと濃くなります。いろいろ試してみるのも面白いかも。色については一番最後のおまけでもう少し詳しく書いてます。

□　画像
これで文字はだいたい書けると思います。あと必要なのは画像ですね。画像は大事です！画像は背景として表示する場合とアイコンや作品として表示させる場合とでタグの書き方が違います。

背景として表示させる場合はこんな感じです。先に出てきたbodyタグの一部としてbodyタグの中に組み込みます。

アイコン・作品として表示させる場合はこんな感じです。

□　リンク
一ページで全てのコンテンツを作るわけにはいきません。重くなるし、わかりづらいし・・。そこでいくつかのhtmlファイルを作ってトップページにつなげる必要があります。URLさえ分かっていれば他のＨＰともつなげることが出来ます。ページとページをつなげることを、リンクと言います。だいたいつなげる先のページのタイトルなんかを書いて、それにリンクをはることが多いですね。画像にリンクをはることもできます。タグはこんなかんじです。

□　テーブル
簡単にいうと四角で囲むってことです。囲むことによって細かいレイアウトができます。たとえばこのページでは真ん中に文字が集まってきてますよね。それは幅400ピクセルの、縦に長ーい薄い水色の四角で文字を囲んでいるからなんです。そしてその中にさらにタグの例を書くために四角でくぎってます。灰色の線のやつ。これはテーブルの中にまたテーブルを入れているのです。四角で区切りたい時や、マスを作って表にしたい時、画像や文を好きなところに配置したい時に使えます。一つのテーブルはひとかたまりとして扱われるのでtebleタグ全体をcenterタグで囲むとテーブルとその中身を中心に配置できます。

それではまず簡単なテーブルのタグから。

これでとりあえず透明な四角で囲むことができます。簡単に説明すると、囲みたい文字・画像をtdタグではさみ、さらにtrタグではさみ、それをさらにtableタグではさむ形になります。うーん、ちょっと面倒ですが。tr、tdは何のためにあるかというと、縦横のマスを作るためのタグなのです。tr、tdタグをちょっといじってみましょう。

tdタグは横のマスを増やすタグです。１セット増やしてみました。太字が増やした部分。trの中にtdを増やしていけば横にマスを増やしていくことができます。tableタグに組み込んだborder="1"っていうのはワクの太さです。これを追加すると透明のテーブルにワクがついて見えるようになるので、分かりやすいように入れてみました。これは実際にはこのように表示されます↓

次にtrタグを増やして縦方向へマスを増やしてみます。この時横方向にマスを作らないからといってtdタグをはぶいちゃいけません。横に１マス、と考えてtdはtrの中に最低一個は入っていないとマスが成り立ちません。これ、最初ひぃなは勘違いしていて失敗しまくりでした・・。縦方向に一個マスを増やすとこんな感じ。↓

trが２セットできました。実際にページに表示されるとこう↓

これでだいたいマスが自由に作れると思いますが、さらにこんなこともできます。マスのくっつけ。横２マスをつなげたい時はtdタグにcolspan="2"を、縦２マスをつなげたい時はrowspan="2"を組み込みます。どういう事かというと・・。

実際にはこうなります↓

２マスだけでなく３マス４マスとつなげていくことが出来ます。全部の例を載せることはできないので（＾＾；）tdタグの調節は各自でお願いします。

テーブルの大きさは自由に決められます。大きさを決めるとウィンドウを縮めてもレイアウトは変らないし、文章も決められた範囲内で自動的に改行されます。スペースが余っていてもテーブルの大きさはかわらないので、幅を思いどうりに調整したり揃えたレイアウトができます。

他にこんなタグもテーブルタグに組み込めます。

□　その他
ここに紹介したタグでだいだいの事はできると思いますが、他にもスタイルシートやジャバスクリプト等でいろいろな効果が出せたりもします。がひぃなはそこまでわかってません（＾−＾；ヾいろいろなところからコピー、ペーストして借りてくることが多いです。最初はコピー、ペーストでうつしてそれを修正、でいいと思います。「ＨＰ作成講座」とか「ＨＰ小技」とかで検索してみるとたくさんでてきます。やりたいことで検索するのも手ですね。例えばひぃなはこのページを作る時に「タグを表示するには」で検索しました。タグは普通に書いたら表示されないので。ともかくひぃなが覚えたのはこんなところです。もし何か足りない、または変なところやご意見ご感想等ありましたらメールフォームよりご連絡いただけると嬉しいです。

ついでに知っているタグ講座を少し紹介します。ライコスのタグ講座が分かりやすかったのですがインフォシークに吸収されて無くなってしまいました。残念・・。（；＿；）

４．おまけ

●色について。
わかりやすい色やひぃなのよく使う色をいくつかあげておきます。ひぃなはダル、ペールっぽい色が好きです。優しい感じしますよね（＾＾）

色で検索してみたらColor'sさんが分かりやすくて充実してました。

●ライン・ワンポイント
ちょっとした線やワンポイントなら、フォントを活用してみましょう。文字や記号を並べて、色を変えて、大きさを変えればかわいい線になったりします。
例えば。。

●素材について。
今や無料配布の素材やさんサイトはかぞえきれないほどです。検索して探すなら単に「素材」で検索するよりもキーワードを追加して絞り込んだ方がいいと思います。「素材　ペット　動物」みたいに。でも素材はわりと簡単に自分で作ることができますよ。（＾＾）ひぃなもこのページに自作素材を置いています。ペイント等のグラフィックソフトや、ちょっとした画像加工ソフトは大抵のＰＣに入ってますから。簡単な素材ならそれで十分です。デジカメ画像や手描きの画像を拡大・縮小したり、画質調整で色を淡くしたり。ひぃなはペイントとお絵描き掲示板で作っています。お絵描き掲示板は画像をアップして続きを描けたりするので、写真なんかの画像に描き足したい時に便利です。

→ペイントを使った素材作り方講座ページを作ってみました☆コチラ←


以上、ひぃなのＨＰ初歩講座でした(/^-^)/゜･∵。：･゜∴`.☆