HTMLコーディングするとき、イラっとしたこと～CSS編 其の漆～
2022年7月16日
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のコードを見ると笑えました！
同じものが連続して使われているのはどうかと思います。
見た感じが同じであれば、省略しても問題ないのに！
ただレスポンシブでデザインが変わる場合の時だけ記述すればいいだけの話です。
ではまた！
- Leonardo
- 今日は愛車の点検！ 2024年12月22日
- マーケティングについて考えること 2024年12月21日
- 冬になると手がカサカサになる… 2024年12月20日
- 転職したほうがいい？～Part.2～ 2024年12月19日
- 転職したほうがいい？ 2024年12月18日