なぜか理解不能！～回答編～

4月に半ばになり、桜がもう若葉に入れ替えてきましたね。

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

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

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

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

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

なぜか理解不能！～回答編～

ある業者がWebページを作成した後に、なぜかトラブルでこっちに低価格でページレイアウトを変えてほしいという依頼がたまにあります！

ある業者のWebページの中身を見たところ、めっちゃ理解不能の独自でリセットスタイルが組み込まれてました…

昨日の問題について理解できたのでしょうか？

今から回答しますね！

.tablelist{
	border: 3px solid #666;
	border-collapse:collapse;
	display:block;
	margin:0 auto 60px;
	padding:0;
}

.tablelist th,
.tablelist td{
	border:1px solid #999;
	margin:0;
	padding: 10px;
	vertical-align:middle;
}

見てて何か気づいてない人がいると思いますが…

自分でコーディングしていくとすぐわかるかと思います。

.tablelist{
	border: 3px solid #666;
	border-collapse:collapse;/* これ設定する必要ある？ */
	display:block;/* これ設定する必要ある？ */
	margin:0 auto 60px;
	padding:0;
	/* width: 500px; 横幅サイズの設定がないんやけど？ */
}

.tablelist th,
.tablelist td{
	border:1px solid #999;
	margin:0;/* これ設定する必要ある？ */
	padding: 10px;
	vertical-align:middle;/* これは見た感じのメリハリの内容によりますが… */
}

これを見てておわかりでしたか？

リセットスタイルに

table{
	border-collapse:collapse;
	margin:0;
	padding:0;
}

table th,
table td{
	vertical-align:middle;
}

がしっかりと記述してあるので、ご回答はこちらの設定で十分なんです。

.tablelist{
	border: 3px solid #666;
	margin:0 auto 60px;
	padding:0;
	width:100%;/* 横幅サイズいっぱいに表示をしたいとき */
}

.tablelist th,
.tablelist td{
	border:1px solid #999;
	padding: 10px;
}

これが正しい記述方法になります。

プロとして恥ずかしくないようにしっかりと記述よろしくお願いしますね。

では、また！