HTMLコーディングするとき、イラっとしたこと～CSS編其の漆～

7月の中盤に入りましたね。

だんだん気温が高くなり、一部の地域では40℃超えが出てきてますね。

そろそろ水際対策の規制が緩和され、海外に旅行する人が増えてますね。

また、第7波が来てるみたいですが…

その前に、COVID-19が終息することを願うばかりです！

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

HTMLコーディングするとき、イラっとしたこと～CSS編其の漆～

ある制作会社がトラブルで費用がかさむとなった時、引継ぎでこちらで依頼することがほとんど多いです。

引継ぎはの中身の内容によりますが…

話を取り戻して…

HTMLのページをコーディングするときに、中身（プログラム）を見るとド素人っぽくイラっとしました。

これで外注した費用が数百万をかけて中身が適当で情けなく感じました。

Web制作会社はどこまでぼったくるんやろって…

（ここまでの前置き（笑））

レスポンシブ対応のコーディング方法がめっちゃ笑えました！

CSSを読み込むのにどれぐらい負担をかけるのが楽しいのかわかりませんが…

レスポンシブのCSS記述方法は割愛させていただきます！

サルでも優しい使い方を教えましょう。

NGな部分

.box{
	border:1px solid #ccc;
	display:block;
	margin:0 auto 10px;
	padding:9px;
}
.box .title{
	font-size:24px;
}
.box .text{
	line-height:2;
}
/* 横幅サイズが1024pxの場合 */
@media screen and (max-width:1024px) {
.box{
	border:1px solid #ccc;
	display:block;
	margin:0 auto 10px;
	padding:9px;
}
.box .title{
	font-size:24px;
}
.box .text{
	line-height:2;
}}
/* 横幅サイズが768pxの場合 */
@media screen and (max-width:768px) {
.box{
	border:1px solid #ccc;
	display:block;
	margin:0 auto 10px;
	padding:9px;
}
.box .title{
	font-size:24px;
}
.box .text{
	line-height:2;
}}
/* 横幅サイズが480pxの場合 */
@media screen and (max-width:480px) {
.box{
	border:1px solid #ccc;
	display:block;
	margin:0 auto 10px;
	padding:9px;
}
.box .title{
	font-size:24px;
}
.box .text{
	line-height:2;
}}

CSSのコードを見ると笑えました！

同じものが連続して使われているのはどうかと思います。

見た感じが同じであれば、省略しても問題ないのに！

ただレスポンシブでデザインが変わる場合の時だけ記述すればいいだけの話です。

ではまた！