CSS 【入門編】 nth-last-of-type擬似クラスの仕組み – CSS実践ガイド
こんにちは！フロントエンドの現場で日々CSSと格闘しているエンジニアです。CSSを学び始めると、`class`や`id`で指定する基本にはすぐに慣れますよね。でも、「リストの最後から2番目だけデザインを変えたい」とか、「一番下の要素だけ余白...
基本セレクタと組み合わせ（タグ, クラス, ID, 子孫・子・隣接）
CSS CSS 【入門編】 only-child擬似クラスの適用条件 – CSS実践ガイド
やあ、こんにちは。CSSの世界へようこそ。コードを書いていると、時々「これ、一つしかないときだけ特別なデザインにしたいんだよな」なんて思うこと、あるよね。今日は、そんなあなたの痒いところに手が届く、CSSの隠れた名選手`:only-chil...
CSS 【入門編】 last-child擬似クラスの適用条件 – CSS実践ガイド
こんにちは。Webの世界へようこそ。CSSを触り始めたばかりの頃、誰もが一度は「あれ、なんで効かないの？」と頭を抱えるポイントがあります。その代表格が、今回紹介する `:last-child` です。「最後の子を選択する」という名前の通り、...
CSS 【入門編】 first-child擬似クラスの適用条件 – CSS実践ガイド
CSSの世界へようこそ！フロントエンドの最前線でコードを書き続けていると、「なぜかスタイルが当たらない！」という壁にぶつかることが何度もありますよね。特に、CSS初心者の方が最初に「おや？」と首をかしげがちなのが、今回解説する `:firs...
CSS 【入門編】 プロパティの継承と詳細度 – CSS実践ガイド
こんにちは。CSSの世界へようこそ。CSSを触り始めたばかりの頃、「あれ？なんでこの色は変わらないんだろう？」「さっき設定したはずなのに、また元に戻っちゃった！」なんて経験、一度はありますよね。大丈夫です。それはあなたがCSSの才能がないか...
CSS 【入門編】 カスケードの順序と競合解決 – CSS実践ガイド
CSSの世界へようこそ！フロントエンドの現場で長年戦ってきた身として、今日あなたにお話ししたいのは、多くの人が最初の壁としてぶつかる「CSSの優先順位（カスケード）」の、その中でも特に「最後の一押し」を決めるルールについてです。「書いたはず...
CSS 【入門編】 !importantの役割と優先度 – CSS実践ガイド
こんにちは。CSSの世界へようこそ。日々コードを書いていると、「あれ？ なんでこのスタイルが反映されないの！？」と、画面の前で頭を抱えたくなる夜が一度はありますよね。CSSには「詳細度（Specificity）」という、いわばスタイルの「強...
CSS 【入門編】 インラインスタイルの優先度 – CSS実践ガイド
こんにちは。CSSの世界へようこそ。日々、画面の中で思い通りに色が塗れなかったり、配置がズレたりして「CSS、なんて気難しいやつなんだ！」と頭を抱えていませんか？その気持ち、痛いほどよくわかります。私も駆け出しの頃は、CSSの優先順位という...
CSS 【入門編】 詳細度（Specificity）の計算ルール – CSS実践ガイド
こんにちは！CSSの世界へようこそ。フロントエンドの荒波を長年乗り越えてきた身として、今日はお話ししたいことがあります。CSSを書いていて、「あれ？ なんでこのスタイルが反映されないんだ？」と頭を抱えたことはありませんか？ まるで魔法のよう...
CSS 【入門編】 フォーカス可視擬似クラス :focus-visible – CSS実践ガイド
こんにちは。CSSという広大な森へようこそ。Webサイトを作っていると、ボタンや入力フォームを作った時に「あれ？なんか変な枠線が出てるな…」と邪魔に感じたことはありませんか？ まるで、せっかく綺麗にデザインしたお店の入り口に、突然ド派手な黄...