表やリストをスマホで見やすく表示する方法！レスポンシブWebデザイン完全ガイド

表やリストをスマホで見やすく表示する工夫

先生と生徒の会話形式で理解しよう

生徒

「ホームページに表を作ったのですが、スマホで見ると横にはみ出して崩れてしまいます。」

先生

「それはスマホの画面が細長いからですね。表（テーブル）やリストは、画面サイズに合わせて工夫する必要があります。」

生徒

「初心者でも簡単に、スマホで綺麗に見えるようにする方法はありますか？」

先生

「もちろんです！横スクロールをさせたり、縦並びに変えたりするテクニックを一緒に学んでいきましょう。」

1. なぜスマホで表やリストが崩れてしまうのか？

Webサイトを制作する際、情報を整理するのに便利なのが「表（テーブル）」や「リスト」です。しかし、これらはパソコンの大きな画面で見ること前提で作ると、スマートフォンのような横幅が狭い端末では大きな問題を引き起こします。

パソコンは横に広いため、たくさんの列がある表も綺麗に収まります。ところがスマホでは画面幅が限られているため、表が画面の外へ突き抜けてしまい、ページ全体が左右にガタガタ動く「横揺れ」の原因になります。これでは読んでいる人が疲れてしまいますね。これを防ぐためには、画面サイズに応じて見た目を調整する「レスポンシブデザイン」という考え方が不可欠です。プログラミング未経験の方でも、いくつかの基本的なルールを覚えるだけで、スマホユーザーに優しいサイトを作ることができます。

2. 表を横にスクロールさせて解決する方法

一番簡単で効果的な方法が「横スクロール」の導入です。表を無理に小さく縮めるのではなく、表全体を一つの「透明な箱」に入れ、その箱の中でだけ左右に指で動かせるようにします。これなら、文字が潰れて読めなくなる心配もありません。

この仕組みを作るには、CSSの「overflow-x: auto;（オーバーフロー・エックス：オート）」という命令を使います。これは「もし中身が箱からはみ出したら、自動的にスクロールできるようにしてね」という指示です。パソコンを触ったことがない方でも、スマホのアプリで画面を左右にスワイプして動かす感覚をイメージすれば分かりやすいでしょう。以下のコードで実際にその動きを確認してみましょう。


<style>
    .scroll-table-box {
        overflow-x: auto; /* 横方向にはみ出したらスクロールさせる */
        border: 1px solid #ddd;
        margin-bottom: 20px;
    }
    table {
        width: 100%;
        min-width: 600px; /* あえて画面より大きくしてスクロールを確認 */
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #ccc;
        padding: 10px;
        text-align: center;
    }
    th {
        background-color: #f8f9fa;
    }
</style>

<div class="scroll-table-box">
    <table>
        <tr>
            <th>メニュー名</th>
            <th>カロリー</th>
            <th>価格（税込）</th>
            <th>おすすめ度</th>
        </tr>
        <tr>
            <td>特製ハンバーグ</td>
            <td>850kcal</td>
            <td>1,200円</td>
            <td>★★★★★</td>
        </tr>
    </table>
</div>
<p>上の表を左右にスワイプして動かしてみてください。</p>

ブラウザ表示

3. リストをスマホでは縦に並べる工夫

箇条書きなどのリスト形式も、工夫が必要です。パソコンでは横に3つ並べていたパーツを、スマホでは「縦に1つずつ」並べるのが基本のテクニックです。これを実現するために、以前学習した「フレックスボックス」を組み合わせて使います。

スマホで見るときは縦一列に並んでいれば、ユーザーは上下にスクロールするだけで全ての情報を確認できます。指一本でスムーズに読み進められるレイアウトこそが、スマホで見やすいデザインの第一歩です。複雑な設定は後回しにして、まずは「狭くなったら縦に逃がす」という感覚を大切にしてください。


<style>
    .responsive-list {
        display: flex;
        flex-wrap: wrap; /* 画面幅が足りなくなったら改行する */
        gap: 10px;
        list-style: none;
        padding: 0;
    }
    .responsive-list li {
        background-color: #e3f2fd;
        border: 1px solid #2196f3;
        padding: 15px;
        flex: 1;
        min-width: 200px; /* この幅より狭くなると自動で縦並びになる */
        text-align: center;
    }
</style>

<ul class="responsive-list">
    <li>特徴1：使いやすさ</li>
    <li>特徴2：安心のサポート</li>
    <li>特徴3：低価格</li>
</ul>

ブラウザ表示

4. 表の「見出し」をスマホで見やすくするコツ

表において、一番上の行（見出し）は情報の種類を示す重要な役割を持っています。スクロールさせて見せる場合、今見ているデータが何の項目なのか分からなくなってしまうことがあります。そこで役立つのが「見出しの固定」です。

CSSの「position: sticky;（ポジション：スティッキー）」という命令を使えば、画面をスクロールしても見出しの部分だけを画面の上部にピタッと貼り付けておくことができます。これなら、長い表でも迷わずに読み進めることができますね。ちょっとした気遣いですが、これが「使いやすいサイト」と「使いにくいサイト」の大きな差になります。プログラミングの呪文は、こうした優しさを実現するためにあります。

5. 小さな文字を避けて「タップしやすさ」を意識しよう

パソコンではマウスで細かい部分をクリックできますが、スマホでは自分の「指」で操作します。表やリストの中にあるリンクやボタンが小さすぎると、隣の項目を押し間違えてしまう「誤タップ」が発生します。これを防ぐために、表のセル（一マス）の余白（パディング）は十分にとりましょう。

最低でも指の腹で触れるサイズ（約44ピクセル四方以上）を意識して余白を設定するのがWebデザインのセオリーです。「文字を詰め込む」のではなく「適度な空間を作る」ことを心がけるだけで、スマホでの快適さが格段に向上します。余白（padding）の設定を工夫して、ストレスのないリストを作りましょう。


<style>
    .tap-safe-list {
        list-style: none;
        padding: 0;
    }
    .tap-safe-list li {
        border-bottom: 1px solid #ccc;
    }
    .tap-safe-list a {
        display: block; /* リンクをボタンのように広げる */
        padding: 20px; /* 指で押しやすい広い余白 */
        text-decoration: none;
        color: #333;
    }
    .tap-safe-list a:hover {
        background-color: #f0f0f0;
    }
</style>

<ul class="tap-safe-list">
    <li><a href="#">よくある質問はこちら</a></li>
    <li><a href="#">お問い合わせはこちら</a></li>
    <li><a href="#">会社概要はこちら</a></li>
</ul>

ブラウザ表示

6. 複雑な表はあえて「カード形式」に変換する

もし表の列数がとても多く、スクロールさせても見づらい場合は、スマホの時だけ「表」を「カード」のような見た目に作り変えるという高度な技もあります。表の一行分を一つのまとまったカードとして、縦に並べて表示する方法です。

この方法のメリットは、スマホの縦長画面を最大限に活用できることです。CSSの「display: block;」を使って、表のパーツを一つずつ独立したブロックに変えることで実現できます。初心者の方には少しパズルのように感じるかもしれませんが、これができるようになると「プロのレスポンシブ対応」に一歩近づきます。最初は簡単な表から挑戦して、徐々に複雑な構造に慣れていきましょう。

7. 画像を使ったリストのレスポンシブ表示

リストの中に画像が含まれる場合、画像の大きさが画面を突き破らないように注意が必要です。画像の横幅を「width: 100%;」に設定しておけば、リストの幅に合わせて自動で縮んでくれます。これに加えて「max-width（最大幅）」を設定しておけば、パソコンの大きな画面で画像がぼやけるほど巨大化するのも防げます。

画像とテキストが並ぶリストは、ブログの「新着記事一覧」などでよく使われます。スマホでは画像と文字を縦に並べ、パソコンでは横に並べる。この切り替えができるようになると、サイトの見た目が一気に本格的になります。以下のサンプルで、画像がどのように振る舞うか見てみましょう。


<style>
    .image-list-item {
        display: flex;
        flex-direction: column; /* スマホでは縦並び */
        border: 1px solid #ddd;
        margin-bottom: 15px;
    }
    .image-list-item img {
        width: 100%;
        height: auto;
    }
    .item-content {
        padding: 10px;
    }
    @media (min-width: 600px) {
        .image-list-item {
            flex-direction: row; /* パソコンでは横並び */
        }
        .image-list-item img {
            width: 150px;
        }
    }
</style>

<div class="image-list-item">
    <img src="/img/sample150-100.jpg" alt="記事の画像">
    <div class="item-content">
        <h3>記事のタイトル</h3>
        <p>ここに記事の短い説明文が入ります。スマホでは下に、PCでは横に表示されます。</p>
    </div>
</div>

ブラウザ表示

8. ブラウザの検証ツールでスマホ表示をチェック！

自分が作った表やリストが、本当にスマホで綺麗に見えているか確認する方法があります。それは、ブラウザの「検証ツール」を使うことです。キーボードの特定のキー（F12など）を押すか、右クリックして「検証」を選ぶと、パソコンの画面上でスマホでの見え方を擬似的に再現できます。

色々なスマホの機種を選んで表示を確認しながら、文字が小さすぎないか、表がちゃんとはみ出さずにスクロールできているかを細かくチェックしましょう。プロのエンジニアも、このツールを使いながら何度も修正を繰り返してサイトを完成させています。最初はエラーや崩れに驚くかもしれませんが、一つずつ直していくプロセスこそが上達の近道です。自信を持って、レスポンシブなサイト作りに挑戦してみてください！

2026年最新スキルアップ・実践セミナー