基本セレクタと組み合わせ（タグ, クラス, ID, 子孫・子・隣接）

クラスセレクタという「幻想」と、ブラウザが裏で泣いている現実CSSを書き始めて最初に習うのがクラスセレクタ (`.`) です。多くのエンジニアにとって、クラスは「スタイルのラベル」であり、再利用性の象徴でしょう。しかし、大規模なWebアプリ...

タイプセレクタの深淵：なぜ「最強の武器」が「諸刃の剣」となるのかフロントエンドの戦場において、最も原始的でありながら、最も軽視されがちな存在。それがタイプセレクタ（要素型セレクタ）だ。`div`, `p`, `h1`……。CSSを学び始めた...

ユニバーサルセレクタ `` を「思考停止」で使うな —— ブラウザエンジンの深層から紐解くCSS最適化の真実フロントエンドのアーキテクチャを語る際、``（ユニバーサルセレクタ）ほど、初心者には「便利」とされ、ベテランからは「諸刃の剣」として...

こんにちは。プロダクトのフロントエンドを支える君なら、フォームのUI設計で「プレースホルダーと入力済みテキストのスタイリング問題」に一度は頭を悩ませたことがあるはずだ。「プレースホルダーの色を薄くしたい」という要件に対して、かつては専用のベ...

おい、最近よくある「画面いっぱいにリッチなコンテンツを表示したい」っていう要件、君のプロジェクトでも実装したよな？ 動画プレイヤー、画像ギャラリー、あるいはダッシュボードのデータビジュアライゼーション。ユーザーが「全画面表示（フルスクリーン...

おい、調子はどうか。日々のCSS設計やパフォーマンスチューニングで頭を悩ませているところ申し訳ないが、今回はフロントエンドの表現力を一段階……いや、数段階引き上げる話をしよう。テーマは `::highlight` 擬似要素によるカスタムハイ...

こんにちは。君たち、日々のコーディングご苦労様。最近、アラビア語圏やヘブライ語圏といった、いわゆる「RTL（Right-to-Left：右から左へ流れる言語）」を含むグローバル案件を任されることが増えてきたんじゃないかな？「とりあえず `d...

お疲れ。ちょっといいか。最近のコードレビューをしていて、フォーム周りのスタイリングで「あ、これまだ昔の癖を引きずってるな」って思う実装をよく見かけるんだ。具体的に言うと、`input` や `.is-disabled` みたいなクラスをわざ...

フロントエンドの現場で日々フォームと格闘している君なら、JavaScriptでちまちま正規表現を書いて、`input`イベントのたびにエラー判定して……という泥臭い実装に、一度は嫌気が差したことがあるはずだ。「これ、本当にJSでやらなきゃい...

おい、調子はどうだい？最近、社内のデザインレビューやコードレビューをしていて「おっ」と感心させられることが増えた反面、フォーム周りの実装を見ると「あぁ、もったいないな……」と感じる場面にまだまだ遭遇するんだよね。例えば、入力必須のフィールド...