■ テーブルとレイアウトについて 
レイアウト（配置）
ページを作る上で、どこに文を配置するとか、画像を配置するとか……そういうのは、どういうふうに指定するかは、大きく二つに分けられます。一つは table文で配置、もう一つはdiv文（レイヤー）配置です。厳密にいえば、画像などは、img タグで回り込みの設定をすれば、ある程度、配置設定も可能ですが……ここでは、二つに絞りたいと思います。
■ table タグ
一番簡単な配置方法です。文字サイズを変えてもレイアウト崩れが少ないし、テーブルの大きさをパーセント指定しておけば、どんな解像度でも、ある程度、意識したデザインの通り表示できます。簡単にデザインできるし、メンテもらくだし、レイアウトテーブルとして使うことが便利になっています。どんなブラウザだろうが、どんな解像度だろうが、ある程度対応できる優れものです。<table border="0">と指定すれば、枠線が未表示になります。
ただ問題点もあります。table文の特徴として、<table>〜</table>の間にあるものをすべて読み込んでから表示します。テーブルを使って区切りをつけると作りやすいんですが、大きなテーブルを作ってこまかく項目を分けると、それだけ読み込みが大変です。表示するページを一つのテーブルで囲むと、全部読み込むまで、そりゃあ長い時間がかかります。
もう一つの問題点としては、意義的な面です。そもそもtableタグは、表を表現するために作られたタグです。ページのデザインはCSSで行うのが前提なので、文法的というか意義的にいうと、使用目的が異なることになります。
■ div タグなど
俗に言う、「レイヤー」っていう奴です。厳密に言うと語弊がありますが……簡単に違いを表すなら、table タグが相対的な位置なら、divタグは絶対的な位置というノリでしょうか？ （レイヤーは相対的にも指定できるので、ある意味、語弊ありすぎだけど (^ ^；) ） デザイン重視で、ページ作成者が意図したとおり表示できないと嫌だという人がよく使う手法です……というか、デザイン重視だと、レイヤーを使わないと辛いです。（そのため、文字の大きさも変えられないように固定している人が多い。私は個人的にこの考えには反対です。誰でも見られるように、文字の大きさくらい可変にしないと、冗談じゃなく「読めない文字のページ」が多いので）
アクセシビリティを考えてレイアウトする場合は、レイヤーを使うのが正式なんだと思います。なお、divタグ自体に意味はなく、<div>〜</div>の間にあるものに対して、スタイルシートを適用させたり、左右に寄せたりするのに用います。
※似たようなタグに<span>というのもあります。<div>はブロック要素、<span>はインライン要素のときに使います。
これは、私の個人的な意見ですが、ホームページビルダーの「どこでも配置」機能は、使わないほうが無難です。レイアウトが崩れる可能性があります。 レイヤーで配置するなら、そういう機能を使うのではなく、ちゃんとHTML文法を理解した上で、適切なタグで配置したほうが、レイヤーの意味はあると思います。（といっても、私もそこまでちゃんとしたレイヤーが組めないで悩んでますけど （T_T））
回り込みって何？
例として、右側にパソコンの絵を表示してみました。解像度（ブラウザ画面の大きさね）がちがっても、ちゃんと絵は右側に固定されていますよね？ ちゃんと文字が絵の回りに回りこんでいるのがわかると思います。こういう感じに表示させる機能を「回り込み」といいます。とにかく、解像度（というか、画面の大きさ）がころころ変わっても、絵は右側に固定されて、残りのスペースに文章を配置する、空間の有効利用が可能な機能と覚えてください。
table文で、文章エリアと絵のエリアを分けて表示すると、解像度がかわったときにスペースの無駄が生じます。どんな感じかは例を出さなくてもわかると思うんですが、今見ているように文字が回りこまないので、解像度によっては、へんに空間が空いた……まぬけな感じになってしまうという感じです。
■ 回り込みの設定と解除
img タグで、align 属性で指定します。align="right" や align="left" で、文章が画像の周りを回りこんで表示するようになります。
回り込みを解除するには <br clear=all> を使います。clear 属性が「all」だと、左右どちらに回り込んでいる場合にも有効です。ちなみに、左右それぞれを指定して解除することも可能です。その場合は、右なら <br clear="right"> 、左なら <br clear="left"> になります。 ちなみに、br タグは、「改行」のためのタグです。
フレームについて
表示画面を分割する機能です。どのページでも共通的に表示されている項目があると思うんですが、そういうものを一つのファイルに共通化して、管理の手間を省いたりできるので、便利な機能です。早い話し、一つの画面内に複数のHTMLページを表示する機能と思ってください。
左右分割、上下分割、ありとあらゆる分割が可能です。フレーム間の境界線を表示したりしなかったり、スクロールバーを表示したりしなかったり、さらにはフレームの幅や大きさを固定にしたり変更できるようにしたり、自在に設定できます。けっこう便利な機能です。
■ HTML文法
▼ ドキュメント宣言
HTMLでは、ドキュメント宣言というのをしなくちゃいけないことになっています。一番最初の行に、<!DOCTYPE HTML PUBLIC "〜">で宣言します。これはタグじゃなく必須項目なんですが、意味もわからずただ書いていても意味ないので、文法どおり記述してるなら絶対記入しなくちゃいけないけど、文法違反をしてるなら……省略してもいいのかなー？ という微妙なところです。（詳しくは仕様書を読んで、自己判断してください）
で、だいたいは、規則がゆるやかな「HTML 4.01 Transitinal」を使っていると思うんですが、フレーム使用の場合は「HTML 4.01 Framset」と宣言してください。フレーム内に挿入するページは、「HTML 4.01 Transitinal」でいいんですけどね。
▼ フレーム記述
ファイル名 C
|
フレームで表現するためには、例えば、二分割表示したい場合は、HTMLファイルを三つ作る必要があります。フレーム内に挿入するページ、「A」と「B」は、「HTML 4.01 Transitinal」でいつも通り作ればOK。問題は、分割されたように表示させるための、「C」をどう作ればいいかです。
「HTML 4.01 Framset」で記述するわけですが、ここで使用するのは、<frameset><frame><noframes>タグです。<frameset>で縦横のどこの位置かを決め、<frame>でフレーム内に挿入するページを指定します。<noframes>は、フレームに未対応のブラウザのための文章を記述するために用います。
注意事項
ホームページ作成ソフトを使えば、文法がわからなくてもフレーム付きのページが簡単に作成できます。初心者が間違いやすいのは、ターゲット指定だと思います。フレームで表示する場合は、フレーム名をつけるんですが、これをちゃんと理解していないと、リンクするたび新しいウィンドウが開くという、はた迷惑なフレームページが出来上がってしまうからです。
target 属性で、リンク先とかフォームの結果をどこに表示するかを指定できます。ここで、自分で決めたフレーム名を指定したり、文法的に決まった指定（「_blank：新規にウィンドウを開く」「_self：自分自身のウィンドウ（フレーム）に表示」「_top：フレーム分割されているときは、分割を解除して表示」「_parent：フレーム分割されているときは、1段だけ分割を解除して、親フレームに表示」）をしてください。
※特に、自分が作ったページ以外のページにリンクする場合は気をつけてください。ターゲット指定を間違えると、「フレーム内リンク」という、非常識なリンクを張ることになります。絶対やめましょう。外部リンクのときは、ターゲット指定を、「_blank」か「_top」にしてください。
■ フレームが嫌われる理由
フレーム未対応のブラウザが存在し、そうなると、せっかくフレームにしてもページを見ることができません。ノン・フレームでもストレスなく作っていればいいですが、そうじゃないと、古いブラウザを使っているという理由だけで、門前払いを受けてしまいます。……といっても、現在、フレーム未対応ブラウザのシェアは、かなり小数だと思いますので、そこまで敏感になる必要もないと思いますが。
あとは、使い勝手の意味で嫌う人がいます。HTMLの勉強のために、ソースを見たいときに、フレーム使用のページだと、二度手間をかけないとページの保存ができないんです。メインページを表示する領域も狭くなるし、ウィンドウの大きさも、作者の意図に合わせているから、自分の環境にあっていなかったときは悲惨だし（リサイズできないときもある （^ ^；） ）。
――フレームを使うときは、一応、こういうことを頭において作ったほうがいいんじゃないかと思います。