今回はレスポンシブデザイン、テーブルを横スクロールさせたい!
こんな方に読んでほしい
- レスポンシブデザインを学び始めた方へ
- レスポンシブ講座Part04になります。
- 今回は「テーブルを横スクロールさせる」について解説しております。
レスポンシブデザインとは、表示領域の幅によって見え方が変わるデザイン(Webサイトの見た目)のことを示します。
前回は、画像にテキストを回り込ませたい!について解説しました。
レイアウトをする際で、パソコン(PC)の表示のときだけ、画像に対してテキストを回り込ませます。
タブレット端末、スマートフォン端末では、画像、テキストの流れにします。
下記の「画像にテキストを回り込ませたい!」に関する記事を理解してPart04にいきましょう。
画像にテキストを回り込ませたい!
今回は、パソコン、スマートフォン端末では、違うレイアウトを適用させます。
テーブルを横スクロールさせるについて
テーブルを作成した際に、項目が多くタブレット端末、スマートフォン端末で確認した際に、見えにくい事を感じたことはありませんか。
今回は、タブレット端末、スマートフォン端末では、横スクロールをさせ可能な限り見やすいテーブル(表)を作成させます。
イメージ図は下記のようになります。
上記のイメージ図のように、パソコン(PC)は通常に表示され、タブレット端末、スマートフォン端末では、横スクロールが表示されます。
今回は、overflow-x scroll
など使うのでしっかり覚えておきましょう。
書き方は以下のようになります。
テーブル横スクロール

<div class="table-area">
<table class="sp-table">
<tbody>
<tr>
<th>Aコース</th>
<td>Aコースはテキストが入ります。</td>
<td>Aコースはテキストが入ります。</td>
<td class="more-btn"><a href="#">詳細はこちら</a></td>
</tr>
<tr>
<th>Bコース</th>
<td>Bコースはテキストが入ります。</td>
<td>Bコースはテキストが入ります。</td>
<td class="more-btn"><a href="#">詳細はこちら</a></td>
</tr>
以下省略
</tbody>
</table>
</div>
/*--スマートフォン--*/
/*--メディアクエリの記述なし--*/
.table-area {
width: 90%;
margin: 0 auto;
overflow-x: scroll;
}
table.sp-table {
width: 100%;
min-width: 900px;
margin: 5em auto 2em;
}
/*--↓ 下記は装飾になります--*/
table.sp-table,
table.sp-table td,
table.sp-table th {
border: 1px solid #595959;
border-collapse: collapse;
}
table.sp-table td,
table.sp-table th {
font-size: .8rem;
padding: 1em;
box-sizing: border-box;
}
table.sp-table th {
color: #333;
background-color: #DEE1E6;
}
/*--↓ ボタン--*/
table.sp-table td.more-btn a {
color: #fff;
display: block;
width: 100%;
padding: 1em 0;
text-align: center;
background-color: #FD4E4F;
border-radius: 30px;
}
/*--PC--*/
@media screen and (min-width: 1025px){
.table-area {overflow-x: auto;}
table.sp-table {width: 60%;}
}
通常時(タブレット端末、スマートフォン端末)は、overflow-x: scroll
が適用されます。
1025ピクセル(PC)以上のときは、overflow-x: auto
が適用され、スクロールがなくなります。
通常時(タブレット端末、スマートフォン端末)は、min-width
(横幅)が適用されます。
「最少の幅」を指定するため、あまり小さい数値は指定しないようにしましょう。
目安としては、640以上にしましょう。
文字サイズ、文字色や幅(width)等は調整してください。
こちらにデモサイトを用意しました。
下記からご確認ください。
関連記事
overflowの使い方
overflow:hidden、scrollの使い方を分かりやすく解説しております。
まとめ
今回はこれで以上です。
- POINT
- ※
name="viewport"
の設定を忘れないように注意しましょう。 - こちらにデモサイトを用意しました。
スポンサーリンク

SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事