AboutデジタルIT・インターネットホームページ作成tableレイアウトをCSSだけでレスポンシブ化する方法ホームページ作成tableレイアウトをCSSだけでレスポンシブ化する方法(4ページ目)table要素で作られたテーブルレイアウトなウェブページを、CSSだけでレスポンシブ化する簡単な方法を解説。表のセルを作るtd要素に対してdisplayプロパティを使えば、HTMLソース上では表組みのまま、各セルを分離して再配置できます。画面サイズに応じて表の列数を2列や3列などに自動変化させる方法を、サンプルページと共にご紹介。次に、下図のような4行×4列の表(テーブル)が組まれている場合を考えます。HTMLのテーブル(table要素など)で作られた4行×4列の表組みHTMLソースは下記の通りです(全部を掲載すると長くなるので途中を省略しています)。表を作る要素としては、table要素・tr要素・td要素の3種類だけを使っている平凡な表組みです。各セル内には、画像と文字列が1つずつ含まれています。</tr></table>描画領域の横幅が広ければ何の問題もありません。横幅を狭めると収まりきらなくなり、横スクロールバーが出てしまいます。描画領域の幅が狭いと横スクロールが必要になってしまうこのままでは、スマートフォンなどの小型画面にも対応したレスポンシブWebデザインにするのは困難でしょう。■表を表でなくすことで、レスポンシブ化するためのCSSソース:ここに、以下のようなCSSを加えます。8px;}ここでは、表を構成するtable要素・tr要素・td要素に対して、以下のように装飾しています。(ブロックレベル要素のように描画しつつ、インライン要素のように配置)枠線を消したり(border:none)、下側に余白を設けている(margin-bottom:8px)のは、表示上の微調整です。書かなくても構いません。上記のCSSを追加すると、表示は下図の右側のように変化します。表のセルがバラバラに分解され、レスポンシブに配置できるようになる上図で示したように、表(テーブル)が表ではなくなりました。すると、セル単位に改行可能なので、「横幅に入るだけ入り、改行される」ことになり、レスポンシブ化できます。inline;」を指定しているのは、この指定がないとtr要素の切れ目で行が変わってしまうためです。これで、元々は4列×4行だった表が、レスポンシブになります。1行に3ブロックまでしか入らないほど狭い画面では、3列×6行で表示されますし、1行に2ブロックまでしか入らないほど狭ければ、2列×8行で表示されます。逆に、もっと幅の広い画面なら、8列×2行になることもできます。HTML側を改修することなく(※)、レスポンシブWebデザインにできました。実際にブラウザを使って表示確認してみたい場合は、サンプルページ2をご覧下さい。※くどいようですが、望ましいのはHTMLソースを修正することです。今回ご紹介した方法は、何らかの事情でHTMLの修正ができない場合などに、CSSだけで対処する方法です。※このページでご紹介したデザインであれば、HTMLでは(table要素は使わずに)ul要素とli要素を使った「リスト」の形で記述して、CSSで箱形に装飾して並べる方法などが望ましいでしょう。tableレイアウトで作成されたHTMLを、CSSだけでレスポンシブ化したい今回は、table要素を駆使して作られたテーブルレイアウトなウェブページを、CSSだけを使ってレスポンシブ化する方法として、displayプロパティを使って「表を崩す」(=表を表ではないように見せる)方法をご紹介いたしました。テーブルレイアウトで作成されているウェブページを、強引ではありますがなんとか少ない労力でモバイル端末などの狭い画面に対応させたい場合には、試してみて下さい。4※記事内容は執筆時点のものです。最新の内容をご確認ください。異なる可能性があります。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。