基本セレクタと組み合わせ（タグ, クラス, ID, 子孫・子・隣接）

こんにちは！フロントエンドの現場を長年フラフラと……もとい、渡り歩いてきたチーフアーキテクトの私です。CSSの仕様書って、時々すごく冷たく感じませんか？「〇〇を選択する擬似クラス」なんて一言で片付けられてしまうと、初心者さんは「で、それの何...

こんにちは！フロントエンドの現場を長年駆けずり回っているチーフアーキテクトの私ですが、今日はCSSのちょっとした便利機能、`:required（リクアド）`擬似クラスのお話をさせてください。Webサイトを作っていて、「この入力欄は絶対埋めて...

こんにちは！フロントエンドの現場で日々CSSと格闘しているエンジニアです。Webサイトを作っていると、「このボタン、今は押せないようにしたいな」とか「入力欄を触れる状態のときだけ、もっと分かりやすくしてあげたいな」と思うこと、ありますよね。...

こんにちは！フロントエンド・チーフアーキテクトの私です。日々、数々のCSSの泥臭いトラブルや、若手エンジニアの「なんでこれ効かないんですか！？」という叫びに向き合っています。さて、今回はCSSの基本セレクタの中でも、ちょっと特殊で、知れば知...

こんにちは！フロントエンドの現場を渡り歩いてきた、ちょっとCSSにうるさいおじさん…いや、チーフアーキテクトの私です。CSSを書き始めたばかりの頃って、次から次へと出てくる謎の記号や、見慣れない英単語に圧倒されちゃいますよね。「`.`（ドッ...

こんにちは！フロントエンドの現場を渡り歩いているチーフアーキテクトの私です。CSSを書き始めたばかりの頃って、「あ、このボタン、中のテキストが空っぽのときは非表示にしたいな」「フォームの入力欄に文字が入ったら、まわりの枠線の色を変えたいな」...

こんにちは。CSSの世界へようこそ。コードを書いていると、「これ以外のもの全部に色をつけたいんだけどな……」なんて思う瞬間、ありますよね。そんな時に登場するのが、今回紹介する `:not()` という、「否定」の魔法です。最初は少し難しく感...

CSSの世界へようこそ！フロントエンドの最前線でコードを書いていると、たまに「なんで思う通りに色がついてくれないんだ！」と頭を抱えたくなる夜もありますよね。でも大丈夫、CSSは一度コツを掴めば、まるで魔法のように意のままに操れる相棒になりま...

やあ。CSSの世界へようこそ。フロントエンドの深淵を覗き込み、日夜コードと格闘していると、時々「あれ、なんでこの指示通りに動いてくれないんだ？」と頭を抱えたくなる瞬間があるよね。大丈夫、その悩み、僕も数え切れないほど経験してきたから安心して...

こんにちは。CSSの世界へようこそ。フロントエンドの荒波を越えてきた身として、今日はお話ししたいことがあります。CSSを学び始めると、必ずと言っていいほど「あれ、効かないぞ？」という壁にぶつかるポイントがありますよね。その代表格が、今回お話...