スマホ版の表リストをどうかにしたい！～回答編～

4月に半ばになり、桜がもう若葉からそろそろ夏の風物詩に進化していってますね。

外の気温もだんだんと上昇してきましたね…

外に出かけるとほぼマスクをしてる人が多いんですね…

でも、外で外出するときはほぼマスクしていない人が何人か見かけるようになりました。

みんなが、マスクを脱却する日は数年後になるんじゃないかね？

さてと、話題に入りましょう！

スマホ版の表リストをどうかにしたい！～回答編～

さてと、昨日の問題について、ちゃんと答えられたかな？

CSSにメディアクエリを記述しておくだけではだめですよ！

ちゃんと最後まで書かないとダメですよ！

ここからは、回答を記載しておきますね。

table{
	border:1px solid #666;
	margin:0 auto;
	padding:0;
	width:100%;
}

table th,
table td{
	padding:10px;
	vertical-align:top;
}

ここまでは、PC版の表示ではきれいに表示のパターンですね。

次に、スマホ版に対応させるように記述をしておきますね。

table{
	border:1px solid #666;
	margin:0 auto;
	padding:0;
	width:100%;
}

table th,
table td{
	padding:10px;
	vertical-align:top;
}

@media screen and (max-width:480px) {
	table{
		overflow-x:scroll; /* 横スクロールを設定 */
		white-space: nowrap; /* Table セル内に改行を禁止をさせる */
		width:200%; /* 横幅サイズをいっぱい大きく設定 */
	}

	/* スクロールバー全体のデザインを指定 */
	table::-webkit-scrollbar{
		height:5px; /* 高さを設定 */
	}

	/* スクロールバーの両端にある矢印以外のデザインを指定 */
	table::-webkit-scrollbar-track{
		background:#EEE; /* 背景色を設定 */
	}

	/* スクロールバーの動く部分（スクロールボックス）のデザインを指定 */
	table::-webkit-scrollbar-thumb{
		background: #CCC; /* 背景色を設定 */
	}
}

これで設定完了です。

しかし、ユーザービリティがちょっとかけてるように感じてますね。

ユーザービリティを向上させるためにはどうしたらよいでしょうか？

今日もまた、一日試行錯誤をしてゆっくり考えてみてください。

では、また！