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

スポンサーリンク
CSS

【入門編】 リンク擬似クラス (:link, :visited) – CSS実践ガイド

こんにちは!フロントエンドの現場で長年CSSと格闘してきた、いわば「CSSの番人」のような者です。Web制作を始めたばかりの頃、誰もが一度は「あれ?リンクの色が変わらないぞ?」と首を傾げた経験があるはずです。今日は、そんな初学者の皆さんが必...
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名だけで十分じゃないの?...
スポンサーリンク