CSS 【実務・中級編】 擬似クラス :dir() による方向性制御 – CSS実践ガイド
こんにちは。君たち、日々のコーディングご苦労様。最近、アラビア語圏やヘブライ語圏といった、いわゆる「RTL（Right-to-Left：右から左へ流れる言語）」を含むグローバル案件を任されることが増えてきたんじゃないかな？「とりあえず `d...
CSS
CSS CSS 【実務・中級編】 擬似クラス :read-only と :read-write – CSS実践ガイド
お疲れ。ちょっといいか。最近のコードレビューをしていて、フォーム周りのスタイリングで「あ、これまだ昔の癖を引きずってるな」って思う実装をよく見かけるんだ。具体的に言うと、`input` や `.is-disabled` みたいなクラスをわざ...
CSS 【実務・中級編】 擬似クラス :valid と :invalid – CSS実践ガイド
フロントエンドの現場で日々フォームと格闘している君なら、JavaScriptでちまちま正規表現を書いて、`input`イベントのたびにエラー判定して……という泥臭い実装に、一度は嫌気が差したことがあるはずだ。「これ、本当にJSでやらなきゃい...
CSS 【実務・中級編】 擬似クラス :required と :optional – CSS実践ガイド
おい、調子はどうだい？最近、社内のデザインレビューやコードレビューをしていて「おっ」と感心させられることが増えた反面、フォーム周りの実装を見ると「あぁ、もったいないな……」と感じる場面にまだまだ遭遇するんだよね。例えば、入力必須のフィールド...
CSS 【実務・中級編】 擬似クラス :disabled と :enabled – CSS実践ガイド
やあ。今日も今日とてCSSの沼にどっぷり浸かっているかい？フロントエンドをやっていると、避けて通れないのが「フォーム」だ。API連携、バリデーション、非同期送信……JavaScript側での状態管理に頭を悩ませている姿をよく見かける。だが、...
CSS 【実務・中級編】 擬似クラス :first-child と :last-child – CSS実践ガイド
おい、調子はどうだ？今日も元気にデザインカンプと睨めっこしながら、意図通りに動かないCSSに頭を悩ませているところか？痛いほど気持ちは分かる。フロントエンドの道を進んでいれば、誰もが一度は「なぜこの要素だけ余白が狂うんだ……」という泥沼にハ...
CSS 【実務・中級編】 ::cue-region 擬似要素による字幕領域の制御 – CSS実践ガイド
お疲れ。最近、動画配信周りの案件をやることが増えてきてさ、「なんだこのCSS、見たことねえぞ」って後輩が頭を抱えてる現場に遭遇したんだ。WebVTTを使った動画の字幕スタイリング、君はどこまで踏み込んだことがあるかい？大抵のエンジニアは `...
CSS 【実務・中級編】 ::cue 擬似要素による字幕のスタイリング – CSS実践ガイド
やあ。今日も今日とてCSSの沼にハマっているかい？フロントエンドをやっていると、「これ、デザインカンプ通りにブラウザがレンダリングしてくれないんだけど……」っていう絶望的な壁に何度もぶつかるよね。特に、メディア周り。``タグのカスタムなんて...
CSS 【実務・中級編】 ::slotted 擬似要素によるスロットコンテンツのスタイリング – CSS実践ガイド
やあ、お疲れ。Webコンポーネントの実装を進めているところかい？Shadow DOMの壁を前にして、「あれ、外から入れたはずのコンテンツにスタイルが当たらないぞ……？」と深夜のオフィスで頭を抱えている姿が目に浮かぶよ。安心してくれ、君がハマ...
CSS 【実務・中級編】 ::part 擬似要素によるShadow DOMの外部スタイリング – CSS実践ガイド
こんにちは。フロントエンドの現場で日々CSSの魔改造と格闘している君なら、一度はこんな絶望を味わったことがあるはずだ。「Web Components使ってカプセル化されたのはいいけど、中のボタンのホバー色ひとつ変えられないじゃん……！」そう...