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

スポンサーリンク
CSS

【テクニカル・上級編】 クラスセレクタ (.) – CSS実践ガイド

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

【テクニカル・上級編】 タイプセレクタ (要素型セレクタ) – CSS実践ガイド

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

【テクニカル・上級編】 ユニバーサルセレクタ (*) – CSS実践ガイド

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

【実務・中級編】 :placeholder-shown 擬似クラス – CSS実践ガイド

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

【実務・中級編】 :fullscreen 擬似クラス – CSS実践ガイド

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

【実務・中級編】 ::highlight擬似要素によるカスタムハイライト – CSS実践ガイド

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

【実務・中級編】 擬似クラス :dir() による方向性制御 – CSS実践ガイド

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

【実務・中級編】 擬似クラス :read-only と :read-write – CSS実践ガイド

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

【実務・中級編】 擬似クラス :valid と :invalid – CSS実践ガイド

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

【実務・中級編】 擬似クラス :required と :optional – CSS実践ガイド

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