Zenn
🎃

エンジニアがHTML/CSSに関わる場合のアプローチを考えてみた

2024/04/24に公開
CSS
HTML
Scss
初心者向け
CSS設計
idea

エンジニアがHTML/CSSに触れる機会は意外と多いものです。
話しの流れで開発するものだと思ってたけど、実はマークアップする案件だったり。
バックエンド（サーバーサイド）エンジニアメインの会社で働いていた場合、誰かに聞くこと、教えてもらうこと、コードレビューを受けることが難しい場合があったり。
何かしらのアクシデントや環境から、ちょっとだけ勉強しておけばよかったな…と思ったり、学習がスムーズに進まないこともあるかもしれません。

この記事では、そんな境遇の方の学習の手助けになること、解像度が上げてもらうこと、など
課題を調べるときの足がかりを増やしてもらうことを目指しています。

対象読者

目標はどうあれ、HTML/CSS勉強してみよっかな…
で、なにすんの？🤔という人向けです。
（冒頭でストーリーを入れたかった為）エンジニア向けな雰囲気が出ていますが、マークアップ、フロントエンド始めたての人にも参考になるところがあるかもしれません。

以下の温度感（熱意）に当てはめて話しを進めていきます。
「どうなりたいか、何を目指すか」によって必要になる知識が変わってきます。

やる気次第で温度感をステップとして捉えても良いかもしれません。

温度感1

  • 最低限でなんとかしたい人
  • 触りたくないけど触らざるを得ない人

温度感2

  • マークアップを理解することで開発の視野を広げたい人
  • ちょっと出来るって言いたい人
  • フルスタックを目指している人

温度感3

  • 数ある選択肢から何故この記述を選んだかをちゃんと説明出来るようにしたい人
  • もうちょい踏み込んだフルスタックを目指している人
  • フロントエンドロードマップのマークアップ関連をもうちょい深堀りたい人

という感じで、温度感毎に詳細を挙げていこうと思います🙋‍♂️

おことわり

  • 身を置いている環境（帰属する会社、取引先、レビュワー）次第で当てはまらない事もありそうです🙇‍♂️
  • 今をときめく技術には触れていません🙅‍♂️
  • モデルとする会社はありますが、体制や人を批判する意図はありません🙇‍♂️

HTML

温度感1　とにかく無難に…

  • 新しく何かを作る場合は入れ子のルールをはみ出したり、タグの使い方を間違うよりはdivで済ませた方が良さそう（無難）です
  • 既存に合わせてさらっとやり過ごす。コピペはコピー元のソースが信用出来るかだけでも気をつけてみる（大事）

温度感2　文章構造の意識

  • 作るページを章に見立ててhタグでレベル分けしてみる
  • 合わせてsectionタグも取り入れてみる
  • タグがブロックかインラインかだけでも分かるとスタイリングしやすいので気にしてみる
  • imgタグに使うaltを空にすることを恐れない

温度感3　いち要素の濃度、凝縮度を高める

  • もっと適切なタグが使えないか、普段のタグ組みを見直してみる。適切なタグが使えると可読性が上がり、目に留まる確率も高まりそう。
    • ulではなくolの方が適切な場合とか…
    • dl, dt, ddが適切な場合とか…
    • アイコンフォントにiタグが使われていたりとか…
  • lazy、decoding属性を付けたりして高速化を狙ってみる

参考URL

CSS

温度感1　とにかく無難に…

  • 既存に合わせてさらっとやり過ごす。コピペはコピー元のソースが信用出来るかだけでも気をつける（大事）
  • 上書き出来ないからと言ってidを使うのはちょっと待ってみる
    • その後の人がimportantを使う可能性が高くなるので、出来るだけclassで指定する
    • タグにスタイルを付けないで最初からclassを付ける
  • 激し目の記述は避ける
    • z-index: 50000とか
    • importantを付けまくらないようにするとか

温度感2　理由付けを始める

  • よく使う色やサイズを変数にしてみる
  • flexなどを使って要素の配置を操れるようにする
  • モバイルファースト（モバイルオンリー）ということでメディアクエリはmin-widthを使う（既存がmax-widthなら既存合わせ）
    • イメージしやすい理由からか、バックエンドの方はmax-widthを使う人が多い印象
      • @media (min-width: 768px)と @media (max-width: 768px)が混じるとカオス

温度感3　対応出来る武器を増やす

  • CSSフレームワークの知識
    • Tailwind.cssを使ってみる
  • CSS設計
    • 改修時にルールが在るか無いかが分かる（まずはここの切り分けから始まるはず）
  • SASS（SCSS）
    • 既存で導入されている事も多いと思うので、さわれるに越したことは無さそう
  • CSSフレームワーク、CSS設計、SASSなどCSS全般
  • 現代のIEと呼ばれているsafariと戯れる

参考URL

その他関連知識や開発環境について

温度感のカテゴライズが難しかったので気が向いたときに取り組みたいこと

作業効率

  • HTML/CSSを効率的に書くためにEmmetの書き方を少しずつ取り入れてみる
  • エディタのプラグインを漁ってみる

Chrome

  • Chromeの拡張機能を入れてみる
  • devtoolを使う
    • CSSファイルに書いてからリロードするのではなく、一度devtoolのelement.styleで試して問題無ければファイルを更新する
    • エレメント選択はもちろん、computedで当たっているスタイルの確認を覚えるともっと良さそう🙆‍♂️

開発環境

  • Viteで環境を作ってみる
    • 余裕があればpnpm, Bun, corepackなども触ってみる。勿論npmだけでも🙆‍♂️
    • フォーマッターも入れてみる

デザインの知識

  • まずはデザイン4原則から触れてみる

参考URL

最後に

HTML/CSSに向き合う事になったエンジニアに向けて書いてみました。
SQLと同じ様に長期間にわたって利用できる技術として、HTML/CSSに取り組むことはコスパが良いかもしれません。
学び直しも含めて、これからHTML/CSSに取り組む方に何かしらプラスになれば幸いです。
最後まで読んでくれてありがとうございました🙇‍♂️

Discussion