CSS 【入門編】 only-child疑似クラスの条件 – CSS実践ガイド
こんにちは！フロントエンドの現場を渡り歩いてきた、シニアアーキテクトの私です。日々、CSSのコードレビューをしていると、レイアウトの微調整で悩んでいる初学者の方によく出会います。「あともうちょっとで理想の見た目になるのに、なぜか崩れちゃう…...
属性セレクタと疑似クラス（状態：hover, focus, active, disabled等）
CSS CSS 【入門編】 last-of-type疑似クラスの仕様 – CSS実践ガイド
こんにちは！フロントエンドの現場を渡り歩いてきたチーフアーキテクトの私ですが、今日はCSSを学び始めたばかりのあなたへ、そっと寄り添ってお話ししたいことがあります。CSSのセレクタって、最初は魔法みたいで面白いですよね。「よし、このボタンを...
CSS 【入門編】 first-of-type疑似クラスの仕様 – CSS実践ガイド
こんにちは！フロントエンドの現場を渡り歩いてきたチーフアーキテクトの私ですが、今日はCSSを学び始めたばかりのあなたに向けて、ちょっとした「CSSの魔法」をお話ししようと思います。CSSを書いていると、「あー、親御さん（親要素）の中にいる兄...
CSS 【入門編】 nth-last-of-type疑似クラスの活用 – CSS実践ガイド
こんにちは！フロントエンドの現場を渡り歩いてきた、シニアアーキテクトの私です。CSSを書き始めたばかりの頃って、セレクタの多さにめまいがしませんか？「あれもこれも指定したいのに、なぜか意図しないところまで色が変わっちゃう…」なんて泥沼にハマ...
CSS 【入門編】 nth-of-type疑似クラスと要素型の関係 – CSS実践ガイド
こんにちは！フロントエンドの現場を渡り歩いてきた、ちょっとCSSにうるさいおじさん…いや、あなたの専属チーフアーキテクトです。CSSを書き始めてしばらく経つと、誰もが一度はこんな壁にぶつかります。「あれっ？ 奇数番目の要素だけに色をつけたい...
CSS 【入門編】 nth-last-child疑似クラスによる逆順選択 – CSS実践ガイド
こんにちは！フロントエンドの現場を渡り歩いてきた、シニアアーキテクトの私です。CSSを書き始めたばかりの頃って、上から数える`nth-child`だけでも「うわ、なんか難しそう……」ってなりがちですよね。なのに今日は、さらにひねくれた（？）...
CSS 【入門編】 nth-child疑似クラスの数式構文 – CSS実践ガイド
こんにちは！フロントエンド・アーキテクチャの現場を長年歩んできた私ですが、CSSを学び始めたばかりの頃は、セレクタの呪文のような書き方に何度も頭を抱えたものです。特に、今日お話しする `:nth-child()` のような「数式」が出てくる...
CSS 【入門編】 last-child疑似クラスの活用 – CSS実践ガイド
こんにちは！フロントエンドの現場を渡り歩いてきた、ちょっとCSSにうるさいおじさん…いや、あなたの専属チーフアーキテクトです。Web制作を学び始めると、HTMLとCSSで綺麗なページを作ろうと意気込むものの、細かいところで「あれ？なんかデザ...
CSS 【入門編】 first-child疑似クラスの挙動と注意点 – CSS実践ガイド
こんにちは！CSSを学び始めて、「よし、すこしずつ思い通りにデザインできるようになってきたぞ！」というワクワク感に包まれている頃でしょうか。それとも、「あれ、思った通りに動いてくれない……」と、ちょっと画面の前で頭を抱えているところでしょう...
CSS 【入門編】 blank疑似クラス – CSS実践ガイド
こんにちは！フロントエンドの現場を渡り歩いてきた、ちょっとCSSにうるさいおじさん…いや、あなたの専属チーフアーキテクトです。日々、Webサイトを作っていて、「あぁ、ここをもう少しユーザーに優しくしたいのになぁ」ってもどかしく思う瞬間、あり...