CSS 【実務・中級編】 後方一致 [attr$=value] – CSS実践ガイド
お疲れ。少し手を止めて、ここに来てくれ。君もそろそろ「とりあえず `class` をベタベタ貼り付けるコーディング」から卒業し、CSSのセレクタの持つポテンシャルをフルに活かした、モダンでスッキリとしたマークアップを目指したい頃合いだと思う...
CSS
CSS CSS 【実務・中級編】 前方一致 [attr^=value] – CSS実践ガイド
お疲れ様です。今日のコードレビュー、なかなか熱いプルリクエストが上がってきてましたね。「ファイルの種類ごとにアイコンを自動で切り替えたい」「外部ドメインのリンクだけに、こっそりアイコンを付与したい」君も一度はそんな要件に直面し、クラス名を無...
CSS 【実務・中級編】 ハイフン区切りプレフィックス [attr|=value] – CSS実践ガイド
やあ。今日も今日とてCSSの沼にハマっているかい？フロントエンドの現場にいると、毎日何かしらのセレクタと格闘することになるよな。「クラスを余分に増やしたくない」「もっとセマンティックで堅牢なスタイリングをしたい」——そんな悩みを抱えた中級エ...
CSS 【実務・中級編】 空白区切りリストの包含 [attr~=value] – CSS実践ガイド
おい、調子はどうだい？最近、CSSのセレクタ周りで「おっ」と唸るようなコードに出会ったかい？実務をバリバリこなす中級への階段を登っている君なら、`class`属性を複数付与してスタイリングを分岐させるなんて日常茶飯事だよな。`` みたいに、...
CSS 【実務・中級編】 属性値の完全一致 [attr=value] – CSS実践ガイド
やあ、お疲れ。今日もバリバリコード書いてるかい？突然だけど、君はCSSのセレクタを書くとき、何でもかんでも`.class`や`#id`をつけて回ってないかい？ もちろん、それが悪いわけじゃない。でも、実務で大規模なアプリケーションやデザイン...
CSS 【実務・中級編】 属性セレクタの基本構文 [attr] – CSS実践ガイド
やあ。今日も今日とてCSSの海に溺れかけているかい？フロントエンドの現場にいると、クラス名やID名だけでスタイリングを完結させようとして、気がつけばHTML側が魔改造されたクラスのツリーハウスになり果てている……なんて光景によく直面するよね...
CSS 【実務・中級編】 :placeholder-shown 擬似クラス – CSS実践ガイド
こんにちは。プロダクトのフロントエンドを支える君なら、フォームのUI設計で「プレースホルダーと入力済みテキストのスタイリング問題」に一度は頭を悩ませたことがあるはずだ。「プレースホルダーの色を薄くしたい」という要件に対して、かつては専用のベ...
CSS 【実務・中級編】 :fullscreen 擬似クラス – CSS実践ガイド
おい、最近よくある「画面いっぱいにリッチなコンテンツを表示したい」っていう要件、君のプロジェクトでも実装したよな？ 動画プレイヤー、画像ギャラリー、あるいはダッシュボードのデータビジュアライゼーション。ユーザーが「全画面表示（フルスクリーン...
CSS 【実務・中級編】 ::highlight擬似要素によるカスタムハイライト – CSS実践ガイド
おい、調子はどうか。日々のCSS設計やパフォーマンスチューニングで頭を悩ませているところ申し訳ないが、今回はフロントエンドの表現力を一段階……いや、数段階引き上げる話をしよう。テーマは `::highlight` 擬似要素によるカスタムハイ...
CSS 【実務・中級編】 擬似クラス :dir() による方向性制御 – CSS実践ガイド
こんにちは。君たち、日々のコーディングご苦労様。最近、アラビア語圏やヘブライ語圏といった、いわゆる「RTL（Right-to-Left：右から左へ流れる言語）」を含むグローバル案件を任されることが増えてきたんじゃないかな？「とりあえず `d...