↑本格的に習ってみるのもいいかも!↑

Endless Dream!-超〜簡単HP作り
3.HPの仕組み
これが分かれば作り方も分かる?

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


<ページの仕組み>

 さあコンテンツが決まったら、次にページの仕組みを知ろう!どうやって作られてるか分からないことには、作り方も分からないからね。

 HPは「文章」「HTMLタグ」(今後はタグと呼びます)によってできている。っていっても分かりにくかな?じゃあまず、このページがどうやってできてるかを見てみよう。(これをソースという。)

 Internet Explorer(IE)なら、一番上の「表示」「ソース」と順にクリック。そうするとこのページのもとが見れる。

 ただし僕のページはフレーム(右と左に分かれているページ構成)を使っているので、まずはここをクリックして、出てきたページのソースを上の方法で見てみて。その方が分かりやすいと思う。

 ぱっと見ると分かるように、文字がたくさんあって、その所々に <> で囲まれた半角の英語(と所々の数字)がたくさんあるはず。その半角英数の部分がタグ。このタグの役割というのは、「ここに書かれている文字の色や大きさを変えますよー!」とか、「ここをリンクや画像にしますよー!」とか、そのページをより見やすくするための命令のようなもの。これがないとずーっと同じ大きさの文字の羅列になっちゃうからね。

 そう、考え方としては、「文章が基本で、それをいじくるのがタグ」ということ。分かったかな?タグについてはこれから少しずつ学んでいくとして、HPの簡単な仕組みと、何といっても重要なのは文章だということをまず理解しよう!


<見やすく、軽く、簡単に!>

 前に僕のHPは簡単にできてるって言ったけど、それはソースを見ると一目瞭然。タグがほとんど無い!(笑)これには理由があって、まあ一番は技術が無いってことなんだけど、それ以外にも凝ったページを作ると時間がかかることや、見る側からもなかなか表示されなくてあきてしまうから。

 そう、とにかくHPはできるだけ見やすく、しかも軽い(表示に時間がかからない)ことが大事!あと作るのに時間がめちゃかかるのもばからしいっしょ?だからできるだけ簡単に、時間をかけずに作ろう!

 Java Script(こんなのなんだかよく分からなくても大丈夫、僕もよく知らない。(笑))を起動していますとかで、PCが動かなくなって「壊れたか?」って心配することよくない?あと写真が多いのはいいけど、なかなか表示されないので飽きて見るのをやめちゃうとか。それを避けるために、簡単なタグだけ使っても、十分いいHPが作れるはず。

 僕のページは軽さは大丈夫だと思うけど、もう少し見やすくするといいんだけどね。まあとりあえずはこれで十分でしょう。みんなにすごいねーって誉められるけど、実はこんな簡単なのだってことを知って欲しいのだ!

 じゃあためしに、すごい凝ったHPのソースものぞいてみよう。Yahooの検索エンジンでも見てみようか?さっきと同じ方法で、ソースをのぞいてごらん?すごい文章と、大量のタグができてきたよね。あれくらいちゃんとした技術があれば、あんなにすばらしいHPが作れる。さすがYahoo!!(あれは作成ソフトを使ってるのかな?)

 だけど、初心者のみんながいきなりすごいのを作ろうとしても絶対挫折するので、まずは僕のHPくらいのレベルを目指して作ってみよう。だんだん勉強して知識と技術を身に付けたら、修正してかっこよくしていけばいいんだからね。(僕のHPも少しずつレイアウトも変更しているよ。)


<ポイント>

 この、他の人のHPのソースを参考にするってのは、ちょっと反則かもしれないけど、超使える方法。文章をパクるのはもちろん反則だけど、ソースくらいはいただいちゃっても怒る人いないっしょ?

 だからいろんな人のHPを見て、この作り方はどうなってるんだろうって気になったら、ソースを調べてみよう。そうするといろいろと勉強になる。

 その際 Netscape だと、ソースを切り張りができないから、IEの方がおすすめ。メモ帳かノートパッドで開いてくれるから、自分のHP作りのときにも使いやすい。

 もちろん僕のつたないHPでよければ、がんがんソースをパクっちゃってください!