かつて、2000年代中盤のサイト作りではテーブルタグ(表)でサイトをつくることが主流でした。しかし、記述が面倒なうえにレスポンス対応も難しく、読み込みにも時間がかかるなど不都合も多いのです。今はCSSでレイアウトを組むことが基本です。

なぜtableを使ったのか

 tableを否定する前に、そもそもなぜtableタグを使ってきたのかを簡単に説明します。

HTMLだけではレイアウトが作れない

 ホームページを作っていくと、写真の横に記事を書いたり、サイドバーをつけて2カラムにしたりとレイアウトを工夫したくなってきますよね。ところが、HTMLだけでそれをやろうとすると困ったことが起こるのです。

コンテンツを配置する枠を作るためだった

 そこで以前主に使われていたやり方がこのtableを使って枠をつくり、そこにコンテンツを配置していくというやり方です。枠の線は透明にして見えないようにします。枠の中に枠を埋め込むというようなやり方で作っていました。強いて言えば、Excelで文章をつくることに似ています。

なぜやめた方がいいのか

 私もつい最近まではtableでサイトを作っていたこともあり、大きな声では言えないような気がするのですが、逆に最近分かったからこそ、やめた方がよい理由も述べられるような気がします。今更tableタグでレイアウトをするような話をするサイトも少ないのではないでしょうか。

 さて、tableタグを止めるべき理由は大きく3つあります。

① 融通が利かない。

 エクセルに似ていてセルの結合を上手にしないと思うようなレイアウトにでません。縦と横のマスは揃えなければいけないので、微妙な段組みは難しいです。しかも、列や行の数を間違えて結合するとレイアウトが崩れます。慣れれば結構分かってくるのですが、CSSを覚えると実に無駄な作業だったように感じます。

② 記述が多い

 tableはいちいち囲まなくてはならないので、 といったセルを表す記述の嵐で、下手をすると、発信したいコンテンツの内容に匹敵するくらいtable関係の記述が並んだりします。人の目には見えていませんが、それが多くなれば相対的にページの中での大切な言葉の割合は低下してきますよね。検索に影響があるかどうかはわかりませんが、無駄だと思います。

③ レスポンシブに向かない

 最後に、レスポンシブ対応に向かないということがあります。枠のサイズを%で指定すれば画面のサイズに合わせて伸縮しますが、セルの中が折り返しまくって見づらくなります。逆にpxで指定したら思いっきり縮小されて小さくなるか、画面のサイズを気にせず飛び出していくかどちらかです。googleの広告を設置したいときなどは思わぬ規約違反に当たる可能性がありますので要注意です。

▶ スポンサードリンク


CSSを使えばよい

 では、どうすればよいのか。それはCSSを使えばいいのです。また出たなCSSという感じですね。レスポンシブ化もそうですが、HTMLとCSSはセットだと思っておいてください。

CSSなら1行で済む。

 細かい説明はしません。例えば2カラムの枠を作りたかったとします。今まではどうやっていたのかといいますと・・・

tableで書いた場合

<table width="640">
<tbody>
<tr>
<td width="324" height="83">左側のコンテンツ</td>
<td width="316" height="83">右側のコンテンツ</td>
</tr>
</tbody>
</table>

<>はあえて全角に変えています。

 こんな感じに書いていました。しかも、左側のコンテンツの中で、文字のサイズや色を変更する時はタグで囲みます。余白や背景の設定などもここで記述していく必要があります。ところが、CSSを使うとこうなります。

CSSで書いた場合

<div class="l">右側のコンテンツ</div>
<div class="r">右側のコンテンツ</div>
<>はあえて全角に変えています。

 CSSシートで"l"の時どうするかという命令を決めておけば、文字列だろうが画像だろうが右側に配置してくれます。横幅などはもちろんのこと、余白、色、縁、影、透明度なども全て決められます。画面のどの位置にするかとか、回り込みをするのかどうかとか、スマホの時はどうするのかなどもそこで決めておけばよいのです。ページの読み込む速度も向上し、ユーザーの利便性もアップします。

簡単にできるの?

 またCSSかよ・・・。と思われた方もいらっしゃるのではないでしょうか。普通にホームページを作られている方は、cssを書けばできます。HTMLを学んでこられた方なら簡単です。しかも、すでに使っているんですよ。ホームページビルダーなどでも、スタイルを使っていますよね。ただ意識していないだけで・・・。もったいないです。

 そして、出たEマーク。そうなんです。Elementorを使えばCSSの知識がなくても自在にやってくれるのです。もちろん、裏でCSSは使っているんですよ。自分で書かなくてよいというだけです。このEマーク。記事の右側40%の範囲で表示するように命令をだしています。Elementorではこんな感じです。

 何が起こった?という感じですよね。詳しくは実践編で紹介しますが、画像を挿入し、このCSSクラスのところにrと打ち込んだだけです。そして、この説明の部分はCSSクラスの部分に”l”を使っています。???だと思いますが、大丈夫です。実践編でひとつずつやっていけばわかります。ここで伝えたいことは、もうtableの時代ではないよということです。