Endless Dream!-超〜簡単ＨＰ作り ３．ＨＰの仕組み これが分かれば作り方も分かる？

このページではＨＰの仕組みについて書きます。仕組みを理解した方が作り方も覚えやすいので、このページを参考に、おおまかなHPの仕組みを理解しよう！

＜ページの仕組み＞

さあコンテンツが決まったら、次にページの仕組みを知ろう！どうやって作られてるか分からないことには、作り方も分からないからね。 　ＨＰは「文章」と「ＨＴＭＬタグ」（今後はタグと呼びます）によってできている。っていっても分かりにくかな？じゃあまず、このページがどうやってできてるかを見てみよう。（これをソースという。） 　Internet Explorer（IE）なら、一番上の「表示」→「ソース」と順にクリック。そうするとこのページのもとが見れる。 　ただし僕のページはフレーム（右と左に分かれているページ構成）を使っているので、まずはここをクリックして、出てきたページのソースを上の方法で見てみて。その方が分かりやすいと思う。 　ぱっと見ると分かるように、文字がたくさんあって、その所々に < と > で囲まれた半角の英語（と所々の数字）がたくさんあるはず。その半角英数の部分がタグ。このタグの役割というのは、「ここに書かれている文字の色や大きさを変えますよー！」とか、「ここをリンクや画像にしますよー！」とか、そのページをより見やすくするための命令のようなもの。これがないとずーっと同じ大きさの文字の羅列になっちゃうからね。 　そう、考え方としては、「文章が基本で、それをいじくるのがタグ」ということ。分かったかな？タグについてはこれから少しずつ学んでいくとして、ＨＰの簡単な仕組みと、何といっても重要なのは文章だということをまず理解しよう！

＜見やすく、軽く、簡単に！＞

前に僕のＨＰは簡単にできてるって言ったけど、それはソースを見ると一目瞭然。タグがほとんど無い！（笑）これには理由があって、まあ一番は技術が無いってことなんだけど、それ以外にも凝ったページを作ると時間がかかることや、見る側からもなかなか表示されなくてあきてしまうから。 　そう、とにかくＨＰはできるだけ見やすく、しかも軽い（表示に時間がかからない）ことが大事！あと作るのに時間がめちゃかかるのもばからしいっしょ？だからできるだけ簡単に、時間をかけずに作ろう！ 　Java Script（こんなのなんだかよく分からなくても大丈夫、僕もよく知らない。（笑））を起動していますとかで、ＰＣが動かなくなって「壊れたか？」って心配することよくない？あと写真が多いのはいいけど、なかなか表示されないので飽きて見るのをやめちゃうとか。それを避けるために、簡単なタグだけ使っても、十分いいＨＰが作れるはず。 　僕のページは軽さは大丈夫だと思うけど、もう少し見やすくするといいんだけどね。まあとりあえずはこれで十分でしょう。みんなにすごいねーって誉められるけど、実はこんな簡単なのだってことを知って欲しいのだ！ 　じゃあためしに、すごい凝ったＨＰのソースものぞいてみよう。Yahooの検索エンジンでも見てみようか？さっきと同じ方法で、ソースをのぞいてごらん？すごい文章と、大量のタグができてきたよね。あれくらいちゃんとした技術があれば、あんなにすばらしいＨＰが作れる。さすがYahoo！！（あれは作成ソフトを使ってるのかな？） 　だけど、初心者のみんながいきなりすごいのを作ろうとしても絶対挫折するので、まずは僕のＨＰくらいのレベルを目指して作ってみよう。だんだん勉強して知識と技術を身に付けたら、修正してかっこよくしていけばいいんだからね。（僕のＨＰも少しずつレイアウトも変更しているよ。）

＜ポイント＞

この、他の人のＨＰのソースを参考にするってのは、ちょっと反則かもしれないけど、超使える方法。文章をパクるのはもちろん反則だけど、ソースくらいはいただいちゃっても怒る人いないっしょ？ 　だからいろんな人のＨＰを見て、この作り方はどうなってるんだろうって気になったら、ソースを調べてみよう。そうするといろいろと勉強になる。 　その際 Netscape だと、ソースを切り張りができないから、ＩＥの方がおすすめ。メモ帳かノートパッドで開いてくれるから、自分のＨＰ作りのときにも使いやすい。 　もちろん僕のつたないＨＰでよければ、がんがんソースをパクっちゃってください！