マリンロードスタッフブログをご覧いただいている皆様、こんにちは。
フロントエンドエンジニアの虎澤です。

7月です。
先日誕生日を迎えました。
先日入社満2年目を迎えました。
変化といえば、最近お酒を飲む機会が皆無と言っていいほどなくなりました。
寂しいですが一人で飲んでも楽しくないので別にいいかなと思います。
あまり哀れみの目で私を見ないでください。
よろしくお願いします。

今回はコーディングにまだ不慣れな人が陥りやすいミスをご紹介したいと思います。

タイトルにもありますが、ulとliの間に余計なタグを入れてコーディングしていませんか？
htmlタグにはブロックレベル要素とインライン要素とがあり、特定のブロックレベル要素には、入れ子構造を作る際にちょっとしたルールがあるんです。

今回のお題でいうと、

というルールがあります。
ありがちなのは、ul,liでリストを作って、li全体にリンクを貼りたい→liをaタグで囲ってしまえ！！的なやつです。
これダメです。
W3Cチェックにかけるとエラーが返ってきちゃいます。
li全体にリンクを貼りたい場合は、li要素の直下にaタグを入れ、スタイルをdisplay:block;にしてあげるなどして調整する必要があります。

こういう細かいルールは他にもいろいろあります。
陥りやすいミスではありますが、コーディング時に必ずW3Cチェックをかけていれば避けられるミスです。
避けられるし、知識もつきます。

コーディングにまだ不慣れな人が陥りやすいと先に言いましたが、逆に「私コーディング得意！！」と思ってる人でも、こういうチェックを怠っていると、間違って覚えてる可能性、ありますよね。

表示上は問題なくても、中身（コード）も綺麗に作れなければ、一人前のフロントエンドとは呼べないと思っています。
フロントエンドの仕事は、ただ見た目を再現するだけではありません。
htmlコーディングの基礎ルール、CSS設計、リーダブルコード、メンテナンス性…色んなことに気を配りながら作業しなければならないんです。
適当に作らず、細かいところも常に注意を払って作っていけるといいですよね。

以上、虎澤でした。