はじめに
お久しぶり？です、筆者です。
最近お仕事で「デザイン経験10年程の方のレビュー付き」HTMLとCSSを組む機会がありまして。
※こちらの記事でもちょっと書いたやつですね
前回の記事では「レビュー自体にフォーカスを当てた話」をしましたが…。
「レビューを経て学んだ事」についても書き留めておきたいなと思いまして。
というか、HTMLとCSSを独学で学び、「見栄え自体はそこそこなコードが組める」筆者にとっては目から鱗な知識がいーっぱい学べましてね…。
記憶が新しいうちに、こうしてブログにしたためておきたいなと思った次第です。
それではいきましょう。
学んだことその1: div依存症からの脱却
レビューを受ける前の筆者は、HTMLについては最低限のタグの知識しか持っておらず…。
sectionタグやarticleタグを使わず、要素の塊は全てdivタグで定義しておりました。
まぁもちろんダメ出しを食らうわけで。
「divdivしい」と形容されたそのコードは、たくさんのdivタグで埋まっていました…。
ただ、筆者はdivタグをどう使うのかが良いHTMLなのかわからず…。
レビュー担当者の方に聞いてみたところ、「divタグは何かをグルーピングするときに使う」と言ってくれました。
「それなら要素の塊もグルーピングじゃん」と思いましたが…。
「要素の塊を定義する時はsectionやarticleタグを使おう」と言われてなるほどと感じました。
これらの様な「要素の塊を定義できるタグ」は他にもいくつかある様で。
代表的なものだと下記の6つですかね:
- section: 汎用的なセクション(文書やアプリケーションの一部分となる、意味や機能のひとまとまりの)に対して用いる
- article: 記事に対して用いる
- aside: 補足情報(余談や補足情報など)に対して用いる
- nav: ナビゲーションのまとまりに対して用いる
- header: ヘッダー部分に対して用いる
- footer: フッター部分に対して用いる
これらのタグにももちろん意味があり、その意図どおりに使った方がもちろんいいです。
ちなみにこうしてタグを使い分けるのが何故いいのかというと「ブラウザ側、つまり計算機側が要素を適切に理解してくれる様になるから」とのこと。
全てがdivタグで埋め尽くされたHTMLでは、「どの要素がページ内の題目部分なのか」「どこから何処までがヘッダー部分orフッター部分なのか」計算機が読み取るのは不可能です。
しかし丁寧にマークアップされたHTMLなら、「どこから何処までがどんな意味を持つ要素なのか」が、計算機でもわかる様になります。
これはそのままSEO対策にも繋がるとのこと。
筆者の勝手な推察ですが…適切なマークアップのおかげで「このページがどの様な情報を持つのか」が分かりやすくなるから、ですかね？
ちなみに…。
もし自分の組んでいるHTMLに自信がなくなってきた場合は、CSSを外してHTMLを表示させるといいとのこと。
「CSSを外して自分の意図通りの内容がきちんと伝われば」、HTMLとしてはまず問題ない様です。
学んだことその2: 拡張性に富むコードを組むという概念
これまで筆者はJavaScriptやC#などよ「プログラムのソースコード」については「保守性や拡張性に富んだ作りにしよう」と考えていましたが…。
その考えをHTMLやCSSに当てはめた事がなく。
HTMLやCSSがその後改修されメンテナンスされていく事を意識したことなどありませんでした。
レビュー者から「後での改修が容易になるようなコードを組むと色んな方が助かる」と言われたのは衝撃的なことでした。
…しかし思えば、保守開発フェーズにいる筆者も何度も「構造が分かりにくいHTML」に悩まされたなと。
「ここの部分をちょっと間隔開けたい…」となっても該当箇所にclass属性が付与されてなかったり、既存のCSSの影響からpタグで囲った要素が大きく表示されたりと、非常に苦労する日々を過ごしました…。
この様な悲劇を生まないためにも、拡張性に富むコードを最初から組んでおくのは重要な事だと改めて気づきました。
余談ですが…。
「HTMLの組み方は人それぞれで個性が出る」とレビュー者がよく言われてました。
確かに自分の作成したHTML構造と、自分が関わるプロダクトのHTML構造はかなり違います…。
今絶賛保守開発中のHTMLを触るにあたり、「どうしてこの様なHTML構造になっているのだろう？」となる時も多々あり。
そう言う時は、コードを作った本人に聞くしかないですが…。
…コードを作った当人が、プロジェクトから抜けたと言うか、もううちの会社にいないんですよね。
もしそうやって抜けられたとしても、分かりやすいコードを書くためにも、分かりやすいHTML構造を作るのは大事だなと感じました。
学んだことその3: コーダーの方の凄さ
今回のコード作成を通し、「コーダーの方の凄さ」を理解できたなぁと。
今回学んだものの中で、最も重要だなぁと思った事がこれです。
美しいコードを作るには、HTMLやCSSの知識だけでなく「様々なレイアウトパターンを理解し、その状況状況にあった最適なレイアウトパターンを利用しないとだめ」な事が分かり。
それこそ、2カラムレイアウトを組む方法だけでも:
- flexを使うパターン
- floatを使うパターン
- gridを使うパターン
の3パターンがあり。
どんなデザインを組むか、どういうデバイスに対応させるかでどのパターンが最適か変わってきます。
CSSは色んな書き方や解釈があるが、重要なのは「どの書き方がどの様な特性を持っているのか理解すること」。
その理解を踏まえた上で、この「状況に応じた最適なパターンを選びコード化する」…。
これは非常に難しいことなんじゃないかなと思います。
HTMLやCSSの基礎知識の他にも、たっくさんのデザインパターンを頭に入れないといけないですからね…。
一朝一夕では身につかないものでしょう。
また、この学んだことから:
- 優秀なコーダーがいかに鍛錬を積んできた人材であるか
- HTML/CSSコーディングの大変さ
- HTMLとCSSコーディングにどれだけ作業工数がかかるかの把握
- 今後HTML/CSSの上達には様々なレイアウトパターンを理解し吸収していく事が肝要
…であることが分かりました。
上記知識は「今後行うHTML/CSS組み」作業中に非常に活かせる経験だと感じますし、今後コーダーの方と一緒にお仕事をする上でも覚えておきたい知識だなと感じます。
おわりに
今回はコーダー経験を通し感じた事についてまとめてみました。
今回感じたことは、今後お仕事をする上での大きな糧になるだろうなと確信しています。
おまけにたった2週間のコーダー経験で、ここまでの所感を得れたことも大きいなと。
こうした濃密な経験をしていくと、いい成長を産めそうですね( ˘ω˘ )
それでは|дﾟ)