Web制作の現場に足を踏み入れたばかりの皆さん、こんにちは！
HTMLの学習を進めていると必ずぶつかる壁、それが「テーブル（表）のレスポンシブ対応」です。PCの広い画面で見ると完璧なのに、スマホで開いた瞬間に文字が豆粒みたいに小さくなったり、画面からはみ出して横にガタガタ動いてしまったり……。「一体どうすればいいの！」と頭を抱えた経験、一度はありますよね。
大丈夫です。実は、プロの現場でも「テーブルはレスポンシブの鬼門」と言われるほど厄介な存在なんです。今日は、そんなテーブルをスマホでも綺麗に見せるための「3つの処方箋」を、身近な例えを交えてお話ししますね。
—
そもそも、なぜテーブルはレスポンシブが苦手なの？
テーブルは、言ってみれば「行儀よく並んだ座席表」のようなものです。「1列目には名前、2列目には年齢、3列目には住所……」と、それぞれの列が「ここにはこの情報が入る！」とガチガチに約束し合っています。
画面が狭くなったとき、この「列」というルールを崩さずに詰め込むのは、満員電車に無理やり全員を座らせるようなもの。だから、画面からはみ出したり、無理やり縮小されたりしてしまうんですね。
では、これを解決する代表的な3つのパターンを見ていきましょう。
—
パターン1：横スクロール（「窓からのぞき見」方式）
一番手っ取り早く、情報量を減らさずに対応する方法がこれです。テーブル全体を「枠」で囲んでしまい、スマホではその枠の中だけを指でスルスルとスクロールできるようにします。
「デパートのショーウィンドウ」をイメージしてください。窓枠（画面）は小さくても、中にある商品は左右に動かせば全部見えますよね。
実装のポイント
親要素（wrapper）に`overflow-x: auto;`を指定するのが魔法の呪文です。
| 商品名 | 価格 | 在庫状況 |
|---|---|---|
| 美味しいりんご | 200円 | あり |
—
パターン2：カード型変換（「名刺に変身」方式）
これは、スマホになった瞬間に「横並びの表」を「縦並びのカード形式」に作り変えてしまう方法です。最近のWebサイトで最もよく見かける、ユーザーに優しい手法ですね。
「表」として見るのではなく、一つひとつの行を「一枚の名刺」に見立てて、縦に積み上げていくイメージです。
実装のポイント
CSSのメディアクエリを使って、スマホの時だけ`display: block;`などを使い、テーブルの独特な表示ルールを解除してしまいます。
@media screen and (max-width: 600px) {
/ スマホの時だけ、セルを縦に積む /
table, thead, tbody, th, td, tr {
display: block;
}
/ ここで「項目名」を擬似要素で補うと、より親切になります /
td::before {
content: attr(data-label); / 各tdにdata-label属性で項目名を入れておく /
font-weight: bold;
display: block;
}
}
この方法は少し手間がかかりますが、ユーザーにとっては最も読みやすいので、こだわりのサイトを作るならぜひ挑戦してみてください！
—
パターン3：列の非表示（「必要なものだけピックアップ」方式）
最後は、スマホでは「どうしても必要な情報だけを残して、あとは隠してしまう」という大胆な方法です。
例えば、スペック表のようなデータで、スマホで全部見せる必要がない場合、一番大切な「商品名」と「価格」だけを残し、細かい仕様は隠してしまう。これも一つの「優しさ」です。
実装のポイント
`display: none;`を使って、不要な列をスッと消すだけ。シンプルですが、非常に強力です。
/ PCでは見せる列を、スマホで隠す /
@media screen and (max-width: 600px) {
.hide-on-mobile {
display: none;
}
}
—
最後に：どれを選ぶのが正解？
「結局どれがいいの？」と迷うかもしれません。答えはシンプルです。
- 情報量がとにかく多いなら → 「横スクロール」
- スマホでの読みやすさを最優先するなら → 「カード型変換」
- 重要な情報が絞り込めるなら → 「列の非表示」
どれも正解ですし、組み合わせてもOKです。大切なのは、「ユーザーがスマホで見たときに、情報を探すストレスがないかな？」と想像すること。
テーブルのデザインに正解はありませんが、皆さんの温かい配慮が、きっと使いやすいWebサイトを作るはずです。まずは小さなテーブルで、このパターンを試してみてくださいね。
また何か分からないことがあれば、いつでも聞きに来てください。一緒に一つずつ解決していきましょう！
コメント