ホームページ制作MATSUTE BLOG

この記事は「2020年11月19日」に書かれた記事です

<table>をサイトのフレームとして使う「テーブルコーディング」

私が仕事を始めた頃は、<table>タグをホームページの枠組みとして使うコーディング方法が一般的でした。２カラムのホームページを作るときは、<td>を２列にして配置するような形です。

たとえば、左ナビゲーションのホームページの場合、下記のようなコードになります。
※現状横幅の指定をしていませんが実際にはサイズの指定が必要です。

シンプルなホームページならよいですが、とにかく、横並びにするときには<table>タグを使わなければならないため、ショッピングサイトなどの場合、<table>タグの中に<table>タグがあり、そのまた中に＜table>タグがあるという、鬼のようなテーブルの入れ子になることがありました。

しかし、その後、数年もたたないうちにCSSコーディングという時代がやってきました。

第一次、CSSコーディング

テーブルコーディングの時代も一部CSSは使っていましたが、全体の枠組みがCSSコーディングになった制作に頭を切り替えるのは大変でした。私はこういった概念を覚えるのが苦手なのですが、人が作ったものを見て覚えたり、人が作ったものに手を加えるというのが苦手です。（今でもwordpressの既存テーマを改修するのは苦手です）。

会社でいよいよCSSコーディングをしなければならなくなったとき

これ見て覚えて

と先輩スタッフに渡されたサンプルサイトは全く覚えられないどころか、見てうんざりするほど何が書いてあるかわかりませんでした。

だめだ・・・

と泣きを入れてもどうにもならないため、当時、出版されていたCSSコーディングの本を購入し、休みの日にはCSSコーディングを学ぶという日々が続きました。

大変だったのは、当時CSSコーディングと同時にCMSの技術を習得しなければならなかったことです。これはきっと今の人も同じですよね。特にやっかいだったのは、CGIで動作するMovableTypeと、その頃出てきたPHPで動かすWordpressを、同時に習得しなければならなかったことです。どちらも同じようなタグの使い方をするのですが、CGIとPHPのため使用する言語が異なります。

これは同時に覚えられない

と観念した私はCSSコーディングを覚える傍ら、まずは自分がわかりやすかったMobableTypeの習得かはじめ、Wordpressについてはコピペで何とかしていました。（これ本当はやるべきではないです。この後コピペ後遺症でものすごい苦しみます。基礎を叩きこまなかったので今でもよくわらない構文が山積みです）

• それでも何度か作っているうちに、タグの意味が分かってくるもので、
• 少しわかってきたところで、さらに本を購入して内容を見直す

ということを繰り返しました。私の場合、

1. まずは触って
2. そのあと基本を覚える

という流れのため、基礎を１から覚えていくタイプの人は本当にすごい！　と思っています。（ま、こんな私のやり方でもなんとか仕事を続けていけるので安心して頑張りましょう！苦笑）

変化し続けるCSSコーディング

すこし話がそれました。それからはCSSコーディングの時代が続いています。何度か仕様が変わり、現在のhtml5のマークアップの形になる前も何度かタグの意味が変わりました。一昔前まではJQueryを使わなければならなかった動作も、今はCSSだけでできてしまうという技もたくさんあります。

ホームページ制作をしているとリニューアルなどで過去の自分のコードを振り返るときがありますが、振り返っては「これはひどい」「これはなんだ」の繰り返しです。（もちろん動作はしますし、ホームページの表示自体に支障はありません。が、記述としては美しくない。苦笑）今でも軌道修正しながらの毎日です。

今はもうtableコーディングのサイトを見かけることはありませんが、ガチガチで組みにくかったtableコーディングは覚えることは少なく、なんて楽だったんだろうかと。この世界の変化のスピードは驚くほど速い。だからこそホームページを制作する技術者が必要なのかもしれません。