SHU BLOG

NEW
お知らせ
NEW 2022.12.02 【CSS】marginの指定方法について TikTokにてショート動画公開中!!
お知らせ
NEW 2022.12.01 【WordPress】公開日と最終更新日を表示の方法を解説
お知らせ
2022.11.24 【WordPress】記事ページに表示する、しない条件分岐を解説

BLOG NEWS ブログ

TITLE

レスポンシブデザイン、テーブルを横スクロールさせる方法

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回はレスポンシブデザイン、テーブルを横スクロールさせたい!

こんな方に読んでほしい

  • レスポンシブデザインを学び始めた方へ
  • レスポンシブ講座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)等は調整してください。
こちらにデモサイトを用意しました。
下記からご確認ください。

関連記事

【STEP01】レスポンシブデザイン、viewportを設定しよう!
viewport(ビューポート)とは、「表示領域」のことを示します。
【STEP02】レスポンシブデザイン、メディアクエリを設定しよう!
Media Queries(メディアクエリ)とは、「各デバイスに適したCSSを適用させる」ことを示します。
【STEP03】レスポンシブデザイン、画像にテキストを回り込ませたい!
パソコン、タブレット端末、スマートフォン端末でのレイアウト変更について

overflowの使い方

overflow:hidden、scrollの使い方を分かりやすく解説しております。

まとめ

今回はこれで以上です。

POINT
  • name="viewport"の設定を忘れないように注意しましょう。
  • こちらにデモサイトを用意しました。
スポンサーリンク

SHU

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

最新記事

関連記事

オススメ記事

月別アーカイブ

HP

お助けコネクト

神奈川県を中心に不用品回収・粗大ゴミ回収・遺品整理・ゴミ屋敷片付け・家具の移動 など
なんでもやります!!お気軽にご相談ください。詳細はコチラから

page_top