例に挙げたcssの組み方は雑なのか

質問

webデザイナーです。

CMSで、管理画面上で登録した文章がhtmlとしてテキストで排出される、と言ったシステムを作っています。その骨組みになるhtml、cssを作っているのですが、

・position:absoluteで文章位置を調整する
・画像とテキストを横並びにしたら高さが揃わなかったからテキストにmargin-topを付けた
・見た目は問題ないが検証ツールで見ると要素がpaddingをはみ出ている

と言ったような、ちょっと力技のcssの組み方を上司が嫌い、毎回組み直しさせられます。

いつもそういう組み方ではないですが、修正・注文が多く、叶えているうちにその調整方法じゃないと厳しい、となり、上記のような組み方をしてしまいます。納期も短いので毎回残業で組みなおしです。

Mac、Win全ブラウザ問題なく表示されていますし、他人が見て全くわからない！というようなcssでもないと思います。というか上記の何が問題かわかっていないです。上司に聞いても雑なコーディングだから、素人っぽいからの一点張りなんですが上記は雑なコーディングなのですか？何が問題なのでしょうか？

回答No.2

pringlez · ベストアンサー

codepenのコードを見ました。
その修正前と修正後を比べて、あなたは何も感じないのでしょうか？

少なくとも私には、修正後の方がずっとよく見えます。それが判断できないということだと、あなたはまだこの仕事の経験が浅いのではないかと思います。

指摘されてやり直して残業して、結果として修正できるということは、単にあなたがいいコードを書く力が足りないだけですよね。

「上司」だったら、見た目が要件通りならクソコードでもOKを出す会社・チームも少なくないと思います。あなたはコードの部分も見てもらえ、指摘してもらえているのです。上司がコードを読み、内容を理解し、指摘してくれる職場はあまりありません。あなたはとても恵まれた環境にあるのです。

ダメ出しを食らい続け、残業が続く日々も、あなたのコーディング力を向上させ続けているはずです。そして、いつかあなたがもっと力をつけ、今書いているコードが客に出すのが恥ずかしいと感じることができるようになった頃には、あなたもその上司に感謝するようになると思います。なので今は反抗せずに黙ってその上司の言うとおりに修正していくのがいいと思いますよ。

クソみたいなコードでも何も言わずOKを出す職場を望むのなら転職をするのもいいでしょう。でもそれはあなたのためにはならないと思いますよ。

お礼

ありがとうございます。
おっしゃる通り新人でコーディングは勉強途中です。

修正後の方が圧倒的に良いコードであると思うのですが、時間に余裕があればまだしも、納期が迫っているのに既に出来上がったものを修正する程ではないのでは？と今だに思ってしまいます。

でも結局は自分の力不足ですね…最初からflexの様なコードを書けば修正もなかったでしょうし、多少時間がかかっても綺麗なコードづくりを心がけるべきですね。
チェックしたり、プロパティを調べながらでまだまだ時間がかかってしまうので、急ぎで仕様にボタンが一番下にというリスト作成…よしabsoluteとbottomを使おう、あとは適当に調整しよう。となってしまってます。早くコーダーとして成長したいです。

細かい人だなあと上司を邪険にしてましたが、指摘されることがなければ歳を取った時そもそもflexが使えなかったかもしれません。
何事も考え様ですね。
綺麗なコーディングができた時は嬉しいので、残業せずとも素早くコーディングのできる人間を目指したいと思います。

回答No.1

muuming2001

>>ちょっと力技のcssの組み方を上司が嫌い、毎回組み直しさせられます。

どう組み直しさせられるのか提示したほうが皆さん回答し易いと思います。

今までの例を提示してみてはいかがでしょうか？どちらが良いか判断できると思います。

補足

回答ありがとうございます。
実際の例を簡単ですがcodepenで挙げました。ここの下記にソースも書いておきます。
▼codepen
https://codepen.io/mmm-mimo/pen/ddQvyB

最初に私が組んだのが.wrapで、組みなおしたものが.wrap02です。

●仕様
・リストの一番下にボタンが行くように
・テキストははみ出る部分が…になるように
・テキストは2行。テキスト同士は適度な余白が開くように

●.wrapを組んで、受けた指摘
・ボタンがposition:absolutedで指定されていて、要素で見ると.inner_rightをはみ出しているからダメ
・2行目との行間がmargin-top:20pxで指定されているのが雑に感じる

上記のように指摘され、flexboxに差し替えました。

1点だけならいいんですが、こういう修正が色んなcssで指摘されます。
自分の慣れもあるのですが、flexは意図せずバグが起きたり、ベンダープレフィックス面で記述も多くなったりであまり使いたくないです。

指摘前のcssも工数をかけて修正するようなcssではないと思っています。いかがでしょうか？

```css

/*共通css*/
a{
display:block;
}
p{
margin:0;
}
.img{
height:133px;
}
.inner_right p{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
a.btn{
display:block;
text-decoration:none;
background:#c6cdff;
padding:8px;
}

/*修正前デザインcss*/
.wrap{
display:block;
clear:both;
width:400px;
margin-bottom: 20px;
padding: 8px;
border: 1px solid;
overflow: hidden;
position: relative;
}
.wrap .inner_right{
margin-left: auto;
width: calc(100% - 120px);
}
.wrap .inner_right p + p{
margin-top:20px;
}
.wrap .img{
float:left;
}
.wrap a.btn{
position: absolute;
bottom: 8px;
width: 263px;
}

/*修正後デザインcss*/
.wrap02{
display:flex;
width:400px;
margin-bottom: 20px;
padding: 8px;
border: 1px solid;
}
.wrap02 .inner_right{
margin-left:20px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
}

```

```html

<div class="wrap">
<div class="img">
<a href="/">
<img src="https://placehold.jp/100x133.png" alt="ダミー">
</a>
</div>
<div class="inner_right">
<p>
修正前デザインテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
<p>
修正後デザインストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<a class="btn" href="">ボタン</a>
</div>
</div>

<div class="wrap02">
<div class="img">
<a href="/">
<img src="https://placehold.jp/100x133.png" alt="ダミー">
</a>
</div>
<div class="inner_right">
<p>
修正後デザインストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p>
修正後デザインストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<a class="btn" href="">ボタン</a>
</div>
</div>

```