CSS 【実務・中級編】 後方一致 [attr$=value] – CSS実践ガイド
お疲れ。少し手を止めて、ここに来てくれ。君もそろそろ「とりあえず `class` をベタベタ貼り付けるコーディング」から卒業し、CSSのセレクタの持つポテンシャルをフルに活かした、モダンでスッキリとしたマークアップを目指したい頃合いだと思う...
属性セレクタと疑似クラス（状態：hover, focus, active, disabled等）
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 【入門編】 :read-only と :read-write 疑似クラス – CSS実践ガイド
こんにちは！日々Webのコードと向き合っている皆さん、今日もお疲れ様です。CSSの世界へようこそ！Webサイトを作っていると、お問い合わせフォームやマイページなど「ユーザーに文字を入力してもらう場所」を作る機会がよくありますよね。そのとき、...
CSS 【入門編】 :autofill 自動入力疑似クラス – CSS実践ガイド
ようこそ、フロントエンドの世界へ！日々、コードと向き合っていると「なんでここだけ色が勝手に変わっちゃうの？」と、自分の思い通りにならない瞬間に出会うことがありますよね。でも安心してください。それはあなたが間違っているのではなく、ブラウザが「...
CSS 【入門編】 :picture-in-picture ピクチャーインピクチャー疑似クラス – CSS実践ガイド
やあ、こんにちは！CSSの世界へようこそ。私はこれまで数えきれないほどのウェブサイトを設計し、時に複雑すぎるコードと格闘してきたフロントエンド・アーキテクトです。今日は、初心者の方が「えっ、そんなことまでCSSで制御できるの？」と驚くような...
CSS 【入門編】 :modal モーダル疑似クラス – CSS実践ガイド
やあ、こんにちは！CSSの世界へようこそ。日々、コードと向き合って「なんで思った通りに動かないんだろう……」と頭を抱えていませんか？大丈夫、その悩みはあなたが成長している証拠です。かつての私も、同じように真っ白な画面と格闘していました。今日...