【週末もコーディング】見出しタグで何でも囲んでごめんなさい…
最近は、自転車で出かけることもなくせっせとコーディングを進めています。元々グラフィックデザイナーで、まだまだコーディングの実務経験が浅いため、WEBのコーディングの案件が入るとどうしても時間がかかってしまい、朝から晩までコーディングをすることになってしまいます…。
しかし、そんな状態でも発注してくれる方がいるのと、実践が1番早く身に付きそうなので、週末も朝からコーディング三昧です。今回はレスポンシブやIEの旧バージョン対応も行って（IE8までですが…）、さぁ、大分できたかなぁというところで、ソースコードを確認してもらうと見出しタグの使い方でミスが…。バリデートをかけてもエラーだらけになっていました…。
見出しタグって何でも囲めると思っていました…。
どのようなミスをしていたのかというと、見出しの中にワンポイントの画像があったり、英語表記と日本語表記があったりする作りだったので、それらをブロック要素で囲んで、それをさらに見出しタグで囲んでしまっていました…。
<h1>
<p>画像</p>
<p>英語表記</p>
<p>日本語表記</p>
</h1>
という感じです。イメージ的に見出しタグって何でも囲んでも許されそうな安心感があったのですが（イメージで囲んではいけません！）、全然ダメだということでした。プレビューしても、この記述の仕方で表示されなかったり、崩れたりすることはないのですが、バリデートをかけてみるとエラーの嵐です…（見出しタグを1〜4までこの仕組みで作って、至る所で使っていたので）。
幸い、pタグにclassを振ってCSSを記述していたので、pをspanに変えるだけで作業は済みました。しかし、実務経験が少ないとこういう基礎的なところで凡ミスをしていることがありそうなので、チェックをちゃんとして確認しなければという戒めになりました。
世の中にはタグで囲めるタグをまとめてくれている人がいる
プレビューして、明らかにおかしとその時に気付きますが、そうでないとバリデートするまでは気付きません。同じようなミスを過去にしたこともあったので（ulの中にaタグを書いてliを記述していたりとか…）、なにか囲めるタグがまとまっているものはないのかなぁ！？と思っていたら、まさにドンピシャのものがありました！
タイトルからしてドンピシャです！まとめ方もわかりやすく、これだけ網羅されていると、迷った時にはここを見れば解決しそうです。作ってくれた方、本当にありがとうございます。
フリーランスこそ相談できる人は必要
フリーランスだからこそ、自分で一通りできなければならない反面、フリーランスだからこそ相談できる人がいるといないのとでは大違いだと、今回のことで感じました。自分のスキルもアップさせつつ、地元にもフリーランスのネットワークを作って、仕事のやり取りもできるくらいにしていきたいです。
でも、まずはとにかく自分のスキルアップが大事ですね！
