tableレイアウトで作成されたHTMLを、CSSだけでレスポンシブ化したい

昔々、CSS(スタイルシート)の自由度や実装度合いが低かった頃、複雑なレイアウトを作る方法といえば、下図のようにtable要素を駆使したテーブルレイアウトでした。その頃(2000年代初頭)のまま、大改修を経ずに今でもテーブルレイアウトを使い続けているウェブサイトもあることでしょう。

table要素やtd要素などを駆使して作ったテーブルレイアウトの例

table要素やtd要素などを駆使して作ったテーブルレイアウトの例


昨今、スマートフォンやタブレットなどの小型モバイル機器からのウェブ閲覧数が増えており、「PCで閲覧されることだけを前提にデザインされた既存サイト」を、モバイル端末でも問題なく閲覧できるように対応させたいケースも増しています。


 
様々なサイズのモバイル機器からの閲覧にも対応させたい

様々なサイズのモバイル機器からの閲覧にも対応させたい

うまくHTMLを記述しているウェブサイトであれば、レスポンシブWebデザインの方法を使って「モバイル向けのCSS」を追記するだけで、あまり労力を掛けることなくモバイル対応が可能です。しかし、そう簡単には対処できない場合もあります。


 
テーブルレイアウトだと、レスポンシブ化しにくい
特に問題になりやすいのが、テーブルレイアウト(=表組みを作るためのtable要素などを使ってページ全体をレイアウトする方法)を採用してウェブページが作成されている場合です。

table要素は表(テーブル)を作るための要素ですから、HTML側の記述だけでレイアウトがある程度は決まってしまいます。4行×4列の表を、画面の幅に応じて8行×2列に変更する……といったレスポンシブなレイアウトができる仕様にはなっていません。

テーブルでレイアウトされていると、レスポンシブ化するのは難しい

テーブルでレイアウトされていると、レスポンシブ化するのは難しい


上記の「HTML側でレイアウトが決まってしまう」という点が、テーブルレイアウトで作成されたウェブページをモバイル対応しにくい理由です。レスポンシブWebデザインを採用するためには、CSSでレイアウトが柔軟に変更できなければなりませんから。


 

CSSを使って、表を表でなくす(表を崩してセル単位で別々にレイアウト)

CSSを使って、「表」をセル単位でバラバラにして「表でなくす」方法がある

CSSを使って、「表」をセル単位でバラバラにして「表でなくす」方法がある

しかし、CSSを使って「表を表ではなくす」という装飾方法を使えば、テーブルレイアウトをCSS側で解消して、レイアウトを作り直すことができます。

かなり強引な方法ではありますが、HTML側の改修が不要なので、何らかの事情でHTMLソースを変更できない場合や、とにかく今すぐにモバイル対応したいという場合には有用です。


 
例1:複雑なテーブルレイアウトでも、セルを1つ1つ分解してブロック化できる
下図のように、複雑な配置の表をセル単位で分解して1つずつ独立したブロックにすれば、画面幅に合わせた表示が可能になります。HTMLソースを大改修しなくても、table要素のままCSSだけでこのような表の崩し方が可能です。

tableで複雑に配置されたレイアウトでも、CSSを使って「セル単位で1つずつ分解」することで、再レイアウトできる。

tableで複雑に配置されたレイアウトでも、CSSを使って「セル単位で1つずつ分解」することで、再レイアウトできる。


テーブルレイアウト(上図の左上)のままウインドウ幅を狭めると、青色矢印の先のように横スクロールが必要になってしまいます。しかし、CSSで表を崩せば、赤色矢印の先のようにセル単位で縦に並べるレイアウトに再構成できます。

例2:列数の多い表組みを、画面幅に合わせて列数が自動調整されるようにできる
下図のように「列数が多い表」も、狭い画面では横スクロールが必要になってしまいます。このように、(テーブルレイアウトというわけではなく)本当に表として利用している場合でも、レスポンシブ化しにくい場合があります。このような場合でも、CSSを使ってセル単位で分解することで、画面幅に合わせて列数(=横方向の並び)を自動調整させられます。

列数の多いtableでも、CSSを使って「セル単位で分解」すると、レスポンシブな列表示にできる。

列数の多いtableでも、CSSを使って「セル単位で分解」すると、レスポンシブな列表示にできる。


4行×4列の表(上図の左上)のままウインドウ幅を狭めると、青色矢印の先のように横スクロールが必要になってしまいます。しかし、CSSで表を崩せば、赤色矢印の先のように、「画面幅に収まるだけ横方向に並べる」というレイアウトに再構成できます。

今回は、上記の2例で示したように、「HTMLで作られた表組み」を「CSSを使って崩す(=表ではなくす)」方法をご紹介いたします。

望ましいのはHTMLの修正。でも、今すぐ何とかしたい場合には
もちろん、望ましいのはHTML自体を書き直すことです。「表組みではないのにtable要素を使う」のは、「マークアップ(HTMLの記述)とコンテンツの意味が合いたしていない」という理由で避けた方が望ましいですから。しかし、規模の大きなウェブサイトが既にテーブルレイアウトで作成されている場合、HTMLソースの大改修に時間と労力を割けない場合もあります。そのような場合の応急措置(苦肉の策)として、活用してみて下さい。

HTMLのテーブルをCSSで崩すポイントは、displayプロパティ

さて、table要素やtd要素などを使ったテーブル(表組み)を、どうすればCSSで崩せるでしょうか。そのポイントは、displayプロパティです。displayプロパティの仕様を知ると、テーブルではない要素をテーブルにしたり、逆に、テーブルをテーブルではなくしたり……といった装飾が、簡単にできます。

それでは次のページから、displayプロパティを使えば、表でない要素を表にしたり、表を表でなくしたりできる、というCSSの書き方をご紹介いたします。