HTMLファイルで表を作る時の為に<table>というタグがありますよね。

そしてホームページの画面を１つの大きな表に見立てて、ページのレイアウトを<table>タグで行なっているホームページが良く見られますが、私も最近までは、そのようにしてホームページを作っていました。でも、これではHTMLソースがどうにもこうにも複雑になってしまうようです。

今、目標としているホームページのレイアウトは比較的シンプルな構造ですが、それでもbodyの中にfield_spcをおいてその中に見出しのスペースやメインコンテンツのスペース、サブコンテンツのスペース等を配置しています。そしてその中に本来<table>タグを使って作る表を置くとしたら・・・<table>タグの中に<table>タグ、そしてその中に又<table>タグ・・・ソースを作っているうちに訳が分からなくなってしまいますよね。

やはり<table>タグは表を作る時に使って、ページのレイアウトには使わない方が良いでしょう。

CSSファイルでしっかりページのレイアウトを設定してHTMLファイルはホームページの内容を充実する為に作っていきましょう！

HTMLファイルには、ホームページの内容を、CSSファイルにはブラウザに表示させる時のレイアウトや文字の大きさ等の設定を書き込んでいくことや、両者の密接な関係はご理解いただけたと思います。ここで、このページ本文の一番下の（赤い字で「話題その１」「目次」等が表示されている）HTMLソースを見ていただきたいのです。

ここで、覚えておいていただきたいことは、それぞれの<div>で囲まれた「top_waku」「main_spc」「sub_spc」の順番がそのホームページの重要なコンテンツの順番であるということです。「top_waku」の部分は見出し部分なので、当然レイアウト的にも一番上に表示させたいしHTMLソースでも上の方にありますね。次に「main_spc」にはあなたのホームページのテーマの内容を書いていくわけですが、例えば「美味しいラーメンの作り方」をテーマとしたら「main_spc」に作り方やコツを書いていき、その内容があなたのホームページにとって一番重要となるわけです。次に「sub_spc」には、目次や例えば、ラーメンのお皿のことを書くとしましょう。目次やお皿の話は、（「美味しいラーメンの作り方」をテーマにしているとしたら）ラーメンの作り方の話よりは、重要度が落ちますよね。ブラウザに表示させる時は、「main_spc」と「sub_spc」は左右の位置関係ですが、HTMLソースを作る時にはどちらかを先に書いていかなくてはなりません。SEO的に言うと検索ロボットはHTMLソースの上に書いてあることほど、重要であると理解するそうです。なので、「sub_spc」の内容より、「main_spc」の内容を上に書いておいた方がいいのです。そのような関係で、今あなたが作りかかっているホームページでは、「main_spc」を右にfloatさせ、HTMLソースでは先(上）に表記しているのです。このホームページのHTMLソースも大体同じような順番で書かれています。

実は、HTMLにもCSSの役割と同じことが出来るタグは多数あるんです。例えば色を付ける<font>タグや文字を大きくする<big>タグ、太い文字にする<b>タグ等々・・・その気になれば、このホームページもHTMLだけで、表面上（見た目）同じに作ることは出来ると思います。でもなぜそうしないのか・・・ホームページを作るってことは、HTMLタグを打ち込んでいき、ソースを作っていく（004「HTMLファイルを作ろう」で少し作りましたよね！−−これをどんどん発展させていきましょうね！）ということは、ご理解いただけたと思いますが、HTMLファイルにスタイルシートの分までタグを打ち込んでいくとソースが物凄く複雑というか、見にくくなってしまうからです。

スタイルシートを使ったこのページのソースを見てもらっても分かるように、body部のタグは１０種類くらいしか使ってない
ので、比較的楽に作ることが出来るんです。例えば、このホームページの見出し（このページで言うと一番上の「ホームページの作り方(CSSファイルの役割)」）の部分は<h1>でくくってありますが、スタイルシートで、<h1>タグは、この色でこの大きさでアンダーラインを引いて・・と設定してるので、HTMLでは単に<h1>ホームページの作り方(CSSファイルの役割)」</h1>と記述するだけでいいんです。更にスタイルシートは他のページにも有効なので、ページごとにあーだこーだといろんな設定を繰り返す必要もないので、大変手間が省けます。

又、HTMLでは出来ない細かい設定もスタイルシートでは行えるので、CSSの分野はCSSに任せてしまったほうが分かりやすいと思います。SEO的にもスタイルシートを使ったほうが、良いそうです。そんなわけで、このホームページでは、本来スタイルシートの役割をするHTMLタグの話は出てきません。そのかわりHTMLとCSSを同時進行的に覚えていきましょう！

せっかくホームページを作ったら、「人に見てもらいたい」と思うのは人情ってもんです。ホームページを作っても誰も見に来てくれなかったらやっぱりサビシイですよね！ところで、もし「美味しいケーキの焼き方」をインターネットで調べようとしたらあなたならどうしますか？私はYaHoo! やGoogleのホームページの検索窓に「美味しいケーキの焼き方」と打ち込んで検索します。

この時、YaHoo! やGoogleは今打ち込んだ、「美味しいケーキの焼き方」というキーワードにマッチしたたくさんのホームページを教えてくれますね。こういう検索をしてくれるのを「検索エンジン」といいます。検索エンジンは「巡回ロボット」（別に歩いたり走ったりするわけじゃないけどこう呼ばれてます。）を使い常日頃から、あっちゃこっちゃのホームページを見て回って、データとして溜め込んでいます。

あなたの作っていくホームページもこの巡回ロボットに見てもらってデータとして溜め込んでもらえば、検索結果に載れるそうするといろんな人に見てもらえるということになります。その時に例えば、このホームページの内容はホームページの作り方なのですが、<title>や<h1>に囲まれた部分が「美味しいケーキの作り方」だったとすると検索エンジンは、「馬鹿にすんじゃねぇ！」とおこりはしませんが、私がほんとに見て欲しい「ホームページの作り方」というキーワードに対して、マッチしなくなってしまいます。検索エンジンに自分の思うようなキーワードに対して、上位に載せてもらうように努力することをSEO対策といいます。

SEO対策は、奥が深くこれが１００％という答えはなかなかないようですが、htmlファイルを正しく作って検索エンジンにも人にも理解されやすいようなホームページにしていくことが求められているんですねぇ！

実は、ホームページ関係のファイルの種類（言語の種類）はHTMLとCSSだけではく、HTMLが元になることは間違いないのですが、他にもJavaScript,pealなどの色々なものがあります。

でも、まずは初めにHTMLとCSSを覚えることが無難でしょう・・・というかこれらを覚えれば、結構楽しいホームページが作れると思います。実際、このホームページもカレンダーの部分以外は、HTMLとCSSだけで成り立っています。

カレンダーの部分はJavaScriptという言語で書かれているのですが、無料でプログラムを配布しているサイトがたくさんありますので、チェックしてみてはいかがでしょう？画像素材なども無料で配布しているホームページは探せばたくさんあります。色々な素材を頂く時には、ホームページごとにルールが違いますので必ずそのホームページの注意書きを読んで使用してくださいね！

pickup

2022/12/12 更新