システム開発の際、デザインとHTMLコーディングは別会社で!
受け取ったHTMLの組み込みはお願いします!
ということが結構あるのですが、その時もらったHTMLを見て、ここはやめてほしいという点をまとめて書いていこうと思います。
インデントがバラバラ
プログラム書くときもそうですが、インデントがバラバラだと見づらいです。
※弊社ではHTML/CSSともにインデントはスペース2つです。
タブ/スペースが混じっている
インデントが崩れているときは大体、タブ/スペースが混じってますね。見づらいです。
※弊社ではタブは使わないようにしています。
JSが意図した動作になっていない/動かない
JSまで対応となっているにもかかわらず、動かないというのは論外ですね。
「JSが意図した動作になっていない」これも結構ありました。
例
- 全選択/全解除というところをチェックすると、下にある項目が全部選択されるところが選択されていた箇所はチェックがはずれ、選択されていなかったところがチェックされるという謎挙動。
-
Firefoxでは動かないというJSを埋め込まれたこともありました。
-
Ajaxでコンテンツを切り替える個所で、切替後にJSが動かなくなる（これよくある）。
スペースやbrタグで余白の調整をする
これは、HTML組み込み云々以前の話だと思うのですが、
スペースやbrタグが連続して書いてあると見づらいし、そもそも、CSSにmarginというものがあるので、そちらを使ってください。
個数が変動する可能性があるところを個数固定前提にしている
個数が変動するかどうかという判断は難しいのかもしれないですが、少しでも疑問に思ったのであれば、確認してほしいです。
td:nth-child(1){}
td:nth-child(2){}
td:nth-child(3){}
↑こういうのとか3個前提なんですが、4つになったり2つになったりすることあったりします。
実際に、個数が変わって、個数を増やしたり減らしたりしたらデザインが崩れたということがありました。
クリックして画面遷移するようなパーツがaタグで作られていない
仕様とかあまり気にされない感じなのでしょうか。
本来クリックして画面遷移するような箇所がaタグ以外のタグで書かれていることが結構あります。
onClickで無理やりやることもできますが、やはりよろしくないので、aタグでお願いします。
valueにPlaceholderの値が入っている
HTML5にplaceholder属性があるので、それで問題なければ、それを使ってくれればよいのですが、
何やら頑張ってくれたようで、valueにPlaceholderの値が入っています。
submitボタンを押したときにvalueの値を消してくれればまだいいのですが、
その処理が入っていなくてPlaceholderの値が送信されるということがしばしば。。。
formタグが入っていない
テキストボックスや送信ボタンをinputで作っているのにformタグがない。
formタグがないだけであれば、追加すればいいだけの話なのですが、
追加したらデザイン崩れるとかになるとさすがに困ります。
活性/非活性のコーディングができていない
特定の条件下でボタンが無効になる場合や有効になる場合でデザインが違っていたりするのですが、
大体どちらかができていないということが多いです。
たぶん、もらったPSDをそのままHTMLにしているので、表示されていない部分に関しては気がまわらない感じでしょうか。
特にページャの部分が多いです。
↓こんなの
前へ 1 2 3 4 5 ... 次へ
1ページ目では、「前へ」は押せない状態で、2ページ目以降で押せるようなデザインにするところがそのデザインがないとか。
活性/非活性のON/OFFについてはclass付で切り替えられるようになっていると大変便利です
↓こんな感じ
<span class="prev">無効</span>
<span class="prev on">有効</span>
見た目よければ良しという考え
嫌な書きかたしましたが、要するに
「コードの中身や仕様も気にしてください」
ということです。
デザイナーがHTMLコーディングを担当することが多いのか見た目はできてるってのが多い印象です。
おわりに
私もHTMLコーディングをするのですが、PSDだけ渡されて後はよろしくお願いします、
みたいな頼まれ方をされることも少なくはありません。
そういうこともあるので、HTMLコーダーさんが悪いということではないのですが、
やはり、仕様の把握漏れや文化の違い等でやりづらいと感じることはあります。
一度、開発始める前にちゃんとこの辺りが話し合えればもう少しうまくいくのかなとか思いつつ、いろいろ模索しています。
現在、弊社では、上記のようにHTML作成者とHTMLを組み込む側が困らないように新人の研修を行っています。