CSS 【入門編】 リンク擬似クラス (:link, :visited) – CSS実践ガイド
こんにちは！フロントエンドの現場で長年CSSと格闘してきた、いわば「CSSの番人」のような者です。Web制作を始めたばかりの頃、誰もが一度は「あれ？リンクの色が変わらないぞ？」と首を傾げた経験があるはずです。今日は、そんな初学者の皆さんが必...
基本セレクタと組み合わせ（タグ, クラス, ID, 子孫・子・隣接）
CSS CSS 【入門編】 !important 規則 – CSS実践ガイド
こんにちは！フロントエンドの現場で長年CSSと格闘してきたアーキテクトです。CSSを学び始めると、誰もが一度は「あれ？なんでこのスタイルが効かないんだ……？」と頭を抱える夜を経験しますよね。そんな時、ネットの海で「とりあえず `!impor...
CSS 【入門編】 詳細度（Specificity）の計算概念 – CSS実践ガイド
こんにちは。CSSの世界へようこそ。CSSを書き始めて、「あれ？ なんでこのスタイルが反映されないんだ？」と頭を抱えたことはありませんか？ コードを書いても書いても、なぜか文字の色が変わらない。そんなとき、画面の向こう側でCSSの神様が「ま...
CSS 【入門編】 属性セレクタ ([attr|=value]) – CSS実践ガイド
こんにちは！Webの世界へようこそ。フロントエンドの現場で長年CSSと格闘してきた私から、今日は少しマニアックだけど、知っていると「おっ、デキるな」と思われる魔法のようなセレクタを紹介します。その名は属性セレクタ ``。「なんだか記号だらけ...
CSS 【入門編】 属性セレクタ ([attr~=value]) – CSS実践ガイド
やあ、こんにちは。CSSの世界へようこそ。フロントエンドの深淵を覗き込んでいる君に、今日はちょっとだけマニアックだけど、知っておくと「おっ、デキるな」と思われる、そんな奥義を授けようと思う。今回取り上げるのは、属性セレクタの``だ。「なんだ...
CSS 【入門編】 属性セレクタ ([attr$=value]) – CSS実践ガイド
CSSの世界へようこそ！フロントエンドの最前線でコードを書いていると、つい「どうやって複雑なUIを作るか」ばかり考えがちですが、実はCSSの面白さって、こういう「痒いところに手が届く」ような小さな道具をどれだけ使いこなせるかに詰まっているん...
CSS 【入門編】 属性セレクタ ([attr^=value]) – CSS実践ガイド
やあ、こんにちは。CSSの世界へようこそ。フロントエンドの深淵を覗き込んでいる君なら、きっと「クラス名（class）」や「ID」を使ってスタイルを当てることにはもう慣れているはずだね。でもね、現場でコードを書いていると、時々こんな悩みにぶつ...
CSS 【入門編】 属性セレクタ ([attr*=value]) – CSS実践ガイド
やあ！CSSの世界へようこそ。フロントエンドの迷宮を旅する皆さんのガイド役、チーフアーキテクトです。CSSを学び始めると、最初は「クラス名（`.btn`など）をつけてスタイルを当てる」という基本に忠実になるよね。それはとても素晴らしいことだ...
CSS 【入門編】 属性セレクタ ([attr=value]) – CSS実践ガイド
こんにちは！CSSの世界へようこそ。フロントエンドの現場で「CSSの魔法使い」なんて呼ばれることもある私ですが、実は私自身も、駆け出しの頃はセレクタの組み合わせに四苦八苦して、夜な夜なコードとにらめっこしていました。今日お話しするのは、「属...
CSS 【入門編】 属性セレクタ ([attr]) – CSS実践ガイド
CSSの世界へようこそ！フロントエンドの最前線で日々コードと格闘していると、「もっと早く知りたかった！」と後から気づく便利なテクニックがいくつかあります。その一つが、今日紹介する「属性セレクタ」です。「クラス名やID名だけで十分じゃないの？...