今更聞けないWebサイト構築〜脱テーブルレイアウト〜【前編】

SIの現場では、未だにテーブルでのレイアウトが多勢を占めてる気がします。フォントの色とかサイズとかも、CSS使わず書くことが多い気もしてます。

そんな訳で、少なくとも僕はモダンなHTMLやCSSがわかりません。で、お勉強しつつ、ここにアウトプットを残そうというのが今回の趣旨です。

HTMLの種類

昨今のメジャーどころでは、以下の様になるのかな　と。HTML5がすでに主流と言っても良い気がするので、お勉強もHTML5に則ってやっていこうと思ってます。

HTML4.01

ちょっと前までの主流。yahooはまだHTML4.01。Windows XP使い続けてるおじーちゃんおばーちゃんもターゲットだからなのかな？古いブラウザでも観れるように配慮するなら、このバージョンを選ぶことになる

XHTML

若干空気。古いブラウザでもそれなりに対応している。XMLのように厳格に書きましょ　という企画。利用しているサイトを調べてみたけど、W3Cくらいしか見つけられなかった。

HTML5

最近の主流 。2008年にドラフトが出て、実はまだ正式版として勧告されてなかったりする。Google、Facebook、Twitterと、最近のサイトは見た感じほとんどHTML5になってました。古いブラウザだとちゃんと見れなかったりするのが玉に瑕(IE6とか)。

悪しき習慣、テーブルレイアウトとは

その名の通り、表組みでWebサイトのレイアウトを整えちゃおうという悪しき習慣。

こういうtableタグで表組みして・・・

レイアウトにしちゃう！何年も前から「レイアウト変えずらいし、そもそもtableってそう使うもんじゃないよね？」と言われてますが、なぜかSIの現場(社内システムやBtoB)では主流です。（既存システムがそういう作りとか、技術者のレベルとか、技術は枯れているものほど好まれるとか、色んな理由があったりするのです）

本題：CSSでのレイアウト

 tableを使わずレイアウトするとなると、どうするか。CSSの登場です。HTMLではあくまで文書（ドキュメント）を定義し、CSSという別定義で見た目を整えてあげましょう　ということですね。イメージ的にはブログ書いてもスキン変えて見た目色々といじれるよね　みたいな。

お勉強の題材

雑な絵ですが、よく見るような構成でそれっぽいものを作ってみようかと思います。

ヘッダの作成(HTML)

HTML5から、headerという要素ができました。ただ、まだ<div id="header">みたいな感じでdivを使う人も多いみたいです。今回は、せっかくなのでこのheader要素を使ってみようと思います。

ヘッダの作成(CSS-レイアウト)

CSSで装飾していきます。どうせなので、レイアウトと装飾（色とか文字の大きさとか）を分離してみようと思います。まずはレイアウトから。

ここで出てきたスタイル

• display ＞ header要素は、セクショニングコンテンツ（範囲を定めるタグ）ではなかったりします。よって、表示上セクションの様に扱いたいのであれば、このようにblockと明示してあげる必要があります。
• width > このセクション(正確に言えばblock)の幅指定。
• padding ＞ 余白です。文字が枠ぴったりについても嫌なので、少し余白を開けています。
• position ＞ 配置場所の指定を、絶対にするか相対にするかの指定。ここで出てくるfixedは、絶対、かつ、スクロールしても位置が固定となります。
• top ＞上から何ピクセル(もしくはパーセント)の位置に配置するかの指定。
• left ＞ 左から何ピクセル(もしくはパーセント)の位置に配置するかの指定。

header要素の扱い(なぜdisplay: blockが必要か)については、以下のブログの説明がわかりやすかったです。

HTML5のheader要素とfooter要素はdiv要素の代わりではない | SEOモード

ここまで指定したところの見た目はこんな感じ。ちゃんとblockが効いていることがそのままではわからないので、firefoxの開発者モードを使ってみてみます。

ヘッダの作成(CSS-装飾)

背景色や文字色、文字の位置を決めていきます。

ここで出てきたスタイル

• background ＞ 背景の指定。色や画像が指定可能。
• font-size ＞ その名の通りフォントサイズ。
• border-bottom ＞ 下線。２重線や破線の指定も可能。

といった形にするとこんな感じになります。

意外とボリュームが増えてしまったので、ひとまず前編として別記事に続きます。

＞＞中編