Yamada Frontend Lab

初心者から現役まで、フロントエンドをもっと分かりやすく。

HTML / CSS / JavaScript / A11y / Web標準 / パフォーマンス / AI × Web制作など。

「どう書く？」だけでなく「なぜそうする？」まで。
Yamada Frontend Lab

[Yamada Frontend Lab @yamada_frontend]

Yamada Frontend Lab、始めます。

初心者には、できるだけ分かりやすく。
現役の人には、実務で使えるところまで。
HTML / CSS / JavaScriptをはじめ、アクセシビリティ、Web標準、パフォーマンス、AI × Web制作など、フロントエンドについて発信していきます。

大切にしたいのは、

「どう書く？」だけで終わらず、
「なぜそうする？」まで考えること。

新しい技術を追いかけるだけでも、
正解を丸暗記するだけでもなく、
実際のWeb制作ではどう判断するのか。

基礎・実務・最新トレンドを行き来しながら、一緒に考えられる場所にしていきます。
Yamada Frontend Lab
Code. Design. Thinking.

[Yamada Frontend Lab @yamada_frontend]

CSSのposition、5つを丸暗記する前にこれ。

・relative → flowに残る
・absolute → flowから外れる
・fixed → 通常はviewport基準
・sticky → flowに残って途中から追従

「flow」と「何を基準にする？」で見ると整理しやすいです。

https://t.co/IwdXo3EyZZ

#CSS #Web制作 #フロントエンド

[Yamada Frontend Lab @yamada_frontend]

CSS、全部暗記しなくてOKです。

大事なのは、
・基本の仕組みを理解する
・必要な情報を調べられる
・DevToolsで確認できる

「覚えてないから書けない」より、
「調べれば書ける」へ。

実案件で感じたことも含めてまとめました👇
https://t.co/s2qC8aJ0QJ

#CSS #Web制作 #フロントエンド

[Yamada Frontend Lab @yamada_frontend]

CSSのdisplay、最初は3つでOKです。

block → 新しい行でbox
inline → 文章の流れ
inline-block → 横に並びつつサイズも扱う
spanにwidthを書いて効かないとき、CSSが壊れたんじゃなくdisplayが理由かも。
詳しくはnote👇
https://t.co/4XnDbvK3xL

[Yamada Frontend Lab @yamada_frontend]

CSSが効かないとき、selectorを長くする前にDevTools。
Inspect
Stylesで上書き・警告・inactive
Computedで最終値
Box Modelで実寸
hover / focusを固定
ブラウザーの答えから逆算すると、デバッグがかなり楽です

詳しくはnote👇
https://t.co/Skn6tlMvhD

[Yamada Frontend Lab @yamada_frontend]

CSS変数、:rootに全部置けばOK…ではありません。まず分けるのはこれ。・全体共有 → :root
・Component固有 → 近くに置く
・型や継承を制御 → @propertyCustom Propertiesは「値の倉庫」より「変更できるポイント」と考えると整理しやすいです。

詳しくはnote👇
https://t.co/JmSFYnPMyt

[Yamada Frontend Lab @yamada_frontend]

CSSの優先順位、Specificityだけ見てませんか？
ブラウザはざっくり
適用対象
Origin / !important / Layer
Specificity
Scope proximity
Source order
の順で絞り込みます。
「IDなのに負けた」も、Cascadeから見ると整理しやすいです。
詳しくはnote👇
https://t.co/ufpASs6JHf

[Yamada Frontend Lab @yamada_frontend]

アクセシビリティ確認、最初の15分はこれでOK。
0–3分 Tabで移動
3–6分 Focusを見る
6–9分 Modalを開く
9–12分 Formを失敗させる
12–15分 Targetを見る
自動ツールだけでは見えない操作の問題を、まず手で触って確認します。

詳しくはnote👇
https://t.co/EGSkHvII3g

[Yamada Frontend Lab @yamada_frontend]

Webアクセシビリティ、最初からWCAGを全部覚えなくてOKです。

まず見るのは5つ。

・意味のあるHTML
・Keyboard + Focus
・Form Label
・画像のalt
・Contrast

「誰かが使えなくなってない？」を制作フローに。

詳しくはnote👇
https://t.co/gXJmbUJzjP

[Yamada Frontend Lab @yamada_frontend]

セマンティックHTML、最初はタグ暗記よりこれ。

ページの中心 → main
主要ナビ → nav
単体で成立 → article
テーマのまとまり → section
意味のない箱 → div

見た目ではなく「これは何？」で選ぶと整理しやすいです。

詳しくはnote👇
https://t.co/2qkqSsFv7c

[Yamada Frontend Lab @yamada_frontend]

レスポンシブ、端末名からブレークポイントを決める前にこれ。

ページ全体・利用環境 → Media Query
コンポーネントが置かれた幅 → Container Query

まず普通のCSSで柔軟にして、本当に崩れる場所だけ条件分岐すると整理しやすいです。

詳しくはnote👇
https://t.co/OkUiAL5kYR

[Yamada Frontend Lab @yamada_frontend]

CSS Grid、最初は3つでOKです。

display: grid
repeat(3, 1fr)
gap

Flexboxが「一方向」なら、Gridは「行＋列」。
カード一覧み��いな2次元レイアウトで使いやすいです。

詳しくはnoteで👇
https://t.co/6tHIf74Le6

[Yamada Frontend Lab @yamada_frontend]

Flexbox、最初から全部覚えなくてOKです。

まずはこの4つ。

display: flex
gap
justify-content
align-items

そして一番大事なのは、

「親が子要素の並び方を管理する」

と理解すること。

主軸・交差軸まで含めてnoteで図解しました👇
https://t.co/7ZcNStYvpI

[Yamada Frontend Lab @yamada_frontend]

marginとpadding、迷ったらまずこれ。

・自分の内側 → padding
・他の要素との距離 → margin
・同じ並びの要素同�� → gap

実務では「何px空ける？」より、
「その余白を誰が管理する？」まで考えるとCSSがかなり整理しやすくなります。

詳しくはnoteで👇
https://t.co/hcO5xTuc1n

[Yamada Frontend Lab @yamada_frontend]

HTMLとCSSの違い、最初はこれだけでもOK。

HTML → 内容・意味・構造
CSS → 見た目・レイアウト
「文字を大きくしたいからh1」ではなく、
「見出しだからh1」にする。

この考え方が、A11yやSEOにもつながります。
初心者向けにnoteでやさしくまとめました👇
https://t.co/2tDOTUgia9