先輩コーダーのソースは宝の山！

UPDATE：2024.1.12

CATEGORY

明けましておめでとうございます。
本年もよろしくお願いします。
元旦の能登半島地震で被災された皆さまに心よりお見舞い申し上げます。

さて本題ですが、アプリコットデザインにはコーダーが構築したサイトをチェックする「コーディングチェック」という作業があります。
エラーが出ていないか、間違ったマークアップをしていないか、ブラウザを変えても正しく表示されるかなど項目は多岐にわたります。

表からは同じ見え方でも、10人いればそれぞれ構築の仕方が異なります。
コーダーにとって、他の人が構築したサイトのソース（ファイル）を見ることってすごく勉強になるので、コーディングを勉強している皆さんはぜひ参考にしてみてくださいね。

僕が先日新しく学んだのはこちらです。
下記のような連番のマークアップの仕方について。

01.ダミーダミーダミー
02.ダミーダミーダミー
03.ダミーダミーダミー

コードペン上で3パターン用意しました。

①HTMLでHTMLでそのまま記述する
②CSS（疑似要素）で記述する　その1
③CSS（疑似要素）で記述する　その2

僕はいつも①か②で記述していたのですが、それぞれメリット・デメリットがあります。
①の場合は不要なHTMLタグが増え、可読性が下がります。代わりに、cssはシンプルで、項目が増える場合などはHTMLソースだけを変更すればOKです。
②の場合はHTMLはシンプルですが、cssの記述が長くなります。また、項目が増える場合などはHTML、CSSの両方を更新する必要があるので、①と比べて若干手間がかかります。また、HTML上では連番であることも分かりづらいです。

③は①②のいいとこ取りです！キモになっているのはCSSに記載のある「attr(data-num)」です。この「attr()」は対象のHTMLタグのdata属性のテキストを引っ張ってきてくれます。これなら変更時の更新はHTMLだけで済みますし、HTMLの可読性も下がらず、連番であることもわかりやすい！
ということで即採用！！！となりました！
コレ以外にも絞り込み検索や、アニメーションなど先輩コーダーのソースは宝の山！です。
まもなくコーダーになって3年。こうやって人からたくさん吸収しつつ、そろそろ自分の型を作っていきたいなぁと思う2024年です。

ちなみに今回はかず先生から学ばせていただきました！