アフィリエイト比較表のスマホ崩れはこれで解決！CSSで実装するレスポンシブ完璧表示

@media screen and (max-width: 768px) {
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute; / ヘッダーを非表示にするか、別途処理 /
top: -9999px;
left: -9999px;
}
td {
border: none;
border-bottom: 1px solid eee;
position: relative;
padding-left: 50%; / ラベル表示のために左側に余白 /
}
td::before {
/ data-label属性からラベルを生成 /
position: absolute;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
content: attr(data-label);
font-weight: bold;
}
}

HTML側では、各

@media screen and (max-width: 768px) {
table {
border-collapse: collapse;
width: 100%;
}
thead {
display: none; / ヘッダーを非表示 /
}
tbody, tr {
display: block; / tbodyとtrをブロック要素に /
margin-bottom: 1em; / 各行（カード）間に余白 /
border: 1px solid ccc;
}
td {
display: flex; / 各セルをFlexアイテムとして /
justify-content: space-between; / ラベルと内容を左右に配置 /
padding: 0.5em 1em;
border-bottom: 1px solid eee;
}
td:last-child {
border-bottom: none;
}
td::before {
content: attr(data-label);
font-weight: bold;
margin-right: 1em;
}
}

– Gridの活用:
Flexboxと同様に、モバイル時は各行を Grid コンテナとし、セルを Grid アイテムとして配置します。Gridは二次元レイアウトに優れているため、より複雑なモバイル向けレイアウトにも対応しやすいです。

@media screen and (max-width: 768px) {
table {
display: grid;
grid-template-columns: 1fr; / 各行を1列グリッドに /
gap: 1em; / 各行間のスペース /
}
thead {
display: none;
}
tbody {
display: contents; / tbody自体はレイアウトに影響しないように /
}
tr {
display: grid;
grid-template-columns: repeat(2, 1fr); / 2列のグリッドでラベルと内容を配置 /
border: 1px solid ccc;
padding: 1em;
}
th, td {
border: none;
padding: 0.5em;
}
th {
font-weight: bold;
}
/ 特定のセルを結合するなど、Gridならではのレイアウトも可能 /
}

– メリット:
– ユーザーが情報を縦方向にスクロールするだけで済むため、UXが大幅に向上する。
– 情報の視認性が高く、比較しやすい。
– レイアウトの自由度が高い。

– デメリット:
– HTMLのマークアップ変更（data-label属性の追加など）が必要な場合が多い。
– 実装にFlexboxやGridの知識が必要。
– 複雑なテーブル構造（colspan/rowspan）では実装が困難になることがある。

– 推奨シーン:
– 比較する情報が少なく、各商品がカードのように独立して表示される方が見やすい場合。
– ユーザー体験を最重視するアフィリエイトサイト。

2-3. テーブルのヘッダーを固定し、データをスクロールさせる方法

この手法は、PC表示のようにヘッダーを常に表示しつつ、データ部分のみを縦横にスクロールさせることで、大規模な比較表でも内容を把握しやすくするものです。CSSの position: sticky; や、より高度なJavaScriptを利用して実現します。

– 実装方法:
– CSSのみの場合:
position: sticky; を利用して、