レスポンシブのメディアクエリがめちゃくちゃ！

もう11月半ばになりましたね。

COVID-19はなかなか終わりの見込みがないみたいですね。

そろそろインフルエンザも流行の季節になってきてるので、気を付けてください。

これからどんどん寒い季節になりますが、風邪をひかずに体調に気を付けてくださいね！

いつになったらマスク生活から脱却できるんやろ？

マスクを購入する費用が本当に年間に1万円以上かかってんやから、政府の補助金でもせめて出してくれ！

「政府がマスク着用をってお願いしてるんやったら一人に1万円ぐらいは補助金を出してくれよー！」って言いたいぐらいです。（笑）

さてと本題に入りましょう。

レスポンシブのメディアクエリがめちゃくちゃ！

ある業者がこっちに移管してこっちがコーディングするとき、ホンマに情けないぐらいド素人でした。

一部を抜粋しておきますね！

あなたはそれを見てどう思いますか？

適当に書き込んでお客様のお金をぼったくりますか？

.block{display:block;margin:0 auto 30px;padding:0;}
.block .box{border:1px solid #ccc;display:block;margin:0 auto 30px;padding:19px;}
.block .box:last-of-type{margin:0 auto;}
@media screen and (max-width:480px){
	.block{display:block;margin:0 auto 30px;padding:0;}
	.block .box{border:1px solid #ccc;display:block;margin:0 auto 30px;padding:9px;}
	.block .box:last-of-type{margin:0 auto;}
}
.list{display:block;margin:0 auto 30px;padding:0;}
.list li{list-style-type:disc;margin:0 0 0 20px;padding:0;}
.list li .title{font-size:130%;font-weight:700;margin:0 auto 10px;padding:0;}
@media screen and (max-width:480px){
	.list{display:block;margin:0 auto 30px;padding:0;}
	.list li{list-style-type:disc;margin:0 0 0 20px;padding:0;}
	.list li .title{font-size:130%;font-weight:700;margin:0 auto 10px;padding:0;}
}

上のコードを見て何か感じましたか？

プロのコーダーはこういう方法で記述して当たり前なのかな？

デザインを読み込ませるのにタイムロスになって先方のクレームが半端なく来るんじゃないかな？

.block{display:block;margin:0 auto 30px;padding:0;}
.block .box{border:1px solid #ccc;display:block;margin:0 auto 30px;padding:19px;}
.block .box:last-of-type{margin:0 auto;}
.list{display:block;margin:0 auto 30px;padding:0;}
.list li{list-style-type:disc;margin:0 0 0 20px;padding:0;}
.list li .title{font-size:130%;font-weight:700;margin:0 auto 10px;padding:0;}
@media screen and (max-width:480px){
	.block .box{padding:9px;}
	.list li .title{font-size:130%;}
}

こっちのほうがシンプルで同じコードがかぶってないものは省略してますよね。

レスポンシブデザインするときは同じコードがかぶってもちゃんと表示されますので、PCと違うコードを記述するときはメディアクエリの部分の中に変更箇所を入れるだけで十分です。

お客様をぼったくるのやめましょうね！

同じ技術者としてホンマに恥ずかしいのでやめてくださいね！

ではまた！