ホームページを作ろう（その２）【次のステップ】
ＳＥＯ対策ということで、色々なサイトを調べてみると、
○HTML上の論理構造をはっきりさせること
という文章をよく目にします。
そのことを頭において、自分のサイトのＨＴＭＬを眺めてみると、もともと『表（<table>タグ）』を、レイアウトを形成する為の基本として用いていたので、Ｗｅｂを視覚的に見た場合は、整っているように見えても、論理構造がほとんど構成されていなかったように思いました。
『論理構造』というと、いまいちピンと来ないかも知れませんが、簡単に言うと、
○ＨＴＭＬのソースを上から順番に眺めていった時に、秩序だっているかどうか
という事になると思います。
表（<table>）を多用したページは、視覚的には整って見えるのですが、HTMLのソースを見ると、文脈を感じさせないようなバラバラな配列になっていることは多いような気がします。
それと、<table><tr><td></td></tr></table>のようなタグを多く使わなければならないので、少し複雑なページを作ると、作成されたｈｔｍｌのファイルが大きくなってしまう傾向があります。
この問題をクリアする第一歩として、表を用いないページ作成に取り組みました。
このページで、大体のイメージがつかめたら、
詳細や正確なところは、ご自身でご確認下さい。
次のサイトは参考になると思います。
◆<div>タグを使ったレイアウトの構成
こんなイメージです
簡単に説明するとこんな感じです。<div>～</div>は、箱を作るとイメージすると良いと思います
。そして、その箱に新しい箱を、右に入れるとか、左に入れるとか考えながら入れ込んでいくのです。
（以下で使用する、idやclassの名称は、各自が任意に指定できます。）
【例１】
<div id="base">
|
| ＨＴＭＬの記述
<div id="base"> |
スタイルシート #base{幅や高さを記述;} |
※ 文章で言うと
○ボックスの「回り込み」をコントロールしている
という事になるようです。
もし、回り込みが、上手くいかないときは、回り込ませたくないボックスに関するスタイルシートの記述に「clear:both;」と加えれば良いかもしれません。ちなみに、この意味は、
○そのボックス以前で有効だった右の回り込みも、左の回り込みも無効にする
ということのようです。
なんせ、体で覚えてますので、このくらいのコメントが精一杯なのです・・・^_^;
【例２】
<div id="base">
</div> |
| ＨＴＭＬの記述
<div id="base"> |
スタイルシート #base{幅や高さを記述;}
#left{幅や高さを記述; |
スタイルシートは
ページのＨＴＭＬソースに記述することも出来ますが、外部ファイルにして、他のページも共通で使えるようにした方が良いと思います。
ファイル名は、「.css」で終わる名称にします。例えば、「test.css」といった感じです。
そして、そのスタイルシートを使うということを、HTMLソースの<head> ～</head>部分に記述します。
【例】
<link rel="stylesheet" href="test.css" type="text/css">
あとは、必要な項目をスタイルシートに記述するだけです。
【例】
/*----- 構成 -----*/
#base {
width: 600px;
height:800px
}
#left {
float : leftt;
width :200px;
height:100%;
}
#right {
float : right;
width : 400px;
height:100%;
}
#footer1 {
clear: both;
width : 600px;
}
※ちなみに、「/* */」で囲まれた内側にコメントを書くことが出来ます。
■スタイルシートの検証ツールがありますので、ご紹介しておきます。
◆注意点
複数のブラウザで表示を確認する
ブラウザの種類によって、見え方が大きく変わることがあります。最低、ＩＥとネスケでの表示は確認する方が良いと思います。
DIVの高さ（height）と幅（width）を常に意識すること
積み木が上手く積みあがらないように、幅や高さの合わないボックスも上手く納まってくれません。marginやpaddingのサイズも影響しますので、上手くいかないときは、その辺のサイズも替えたりして試してみて下さい。
※これが上手くいっているかは、ＩＥは自動的に調整してくれて上手く表示されてしまうので確認できません。ネスケやｍｏｚｉｌｌａなどで確認すると良いと思います。
※<hr>をたくさん使っていると、ネスケで見た時、他のブラウザと見え方がかなり違ってしまうことがあります。このことも、それも覚えておいた方がよいでしょう。
ページの基本構造は同じでも、内容のボリュームが違う時
ボックスから、文章や写真があふれてしまって、表示がグチャグチャになってしまうことがあります。この場合の対応方法として
①高さ（height）をスタイルシートのclassで指定して、ページごとに、指定するクラスを 変えてコントロールする
【例】
◇HTMLの記述
ページ１ <div id="main" class="height1"> </div>
ページ２ <div id="main" class="height2"> </div>
◇スタイルシートの記述
#base {width: 600px;height:800px;}
.height1{height:800px;}
.height2{height400px;}
※idは「#」、クラスは「.」で表現します。
※同一ページには、idは１つだけしか使用できません。classは複数指定できます。
何となくですが、構造はid、飾りはclassで指定するのが良いのかも・・・・と今は感じています
が、一般的にはどうなんでしょう？？？？（でも、同じような構造が繰り返されるときは、classなんでしょうね・・・）
②あふれた部分の扱いも、スタイルシートで指定しておく
◇スタイルシートの記述
次のように記述すると、ページごとの高さの変更をしなくても、オーバーフローした部分がスクロールして表示されるようになり、ページが崩れなくなります。
【例】
height2{
height400px;
overflow: auto;
}
ちなみに、このサイトの右側のこの部分は、これを使っています。
（インラインフレームではないのですよ(^o^)丿）
