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

スポンサーリンク
CSS

【実務・中級編】 属性セレクタ ([attr|=value]) – CSS実践ガイド

現場の最前線でコードを叩いている君なら、一度はこんな経験があるはずだ。「なぜか特定の命名規則に従った要素だけスタイルを当てたいのに、クラス名が長すぎて管理しきれない…」。そんな時、多くのエンジニアは安易にクラスを量産しがちだが、CSSのポテ...
CSS

【実務・中級編】 属性セレクタ ([attr~=value]) – CSS実践ガイド

現場の最前線でコードを叩いていると、ついつい「クラス名さえあれば何でもできる」と錯覚しがちだよな。わかるよ、俺も昔はそうだった。でも、CSSはクラス名だけで書くものじゃない。ブラウザが何を理解しようとしているのか、その「意味」を汲み取ってあ...
CSS

【実務・中級編】 属性セレクタ ([attr$=value]) – CSS実践ガイド

属性セレクタの「いぶし銀」な活用術:`` を使いこなす現場の知恵やあ、フロントエンド開発の現場で日々コードと格闘している諸君。今日はCSSのセレクタの中でも、少しだけ玄人好みな「属性セレクタ」の話をしよう。特に ``、つまり「値が指定した文...
CSS

【実務・中級編】 属性セレクタ ([attr^=value]) – CSS実践ガイド

属性セレクタ `` が、なぜ「CSSの職人芸」と呼ばれるのかこんにちは。現場でCSSと格闘し続けていると、必ずぶち当たる壁があります。「クラス名だけで管理しようとして、CSSがスパゲッティ化する」という問題です。そんな時、僕が新人エンジニア...
CSS

【実務・中級編】 属性セレクタ ([attr*=value]) – CSS実践ガイド

属性セレクタ `` は「魔法の杖」か、それとも「パンドラの箱」か?やあ。今日もコンポーネントのスタイリングで頭を悩ませているかい?CSSセレクタの基礎といえば、クラスやIDを思い浮かべるだろう。だが、中級者から一歩先へ進むためには、「DOM...
CSS

【実務・中級編】 属性セレクタ ([attr=value]) – CSS実践ガイド

なぜ今さら「属性セレクタ」なのか?――現場で差がつく、CSSの「静かなる革命」やあ。コードレビューをしていて、たまに君たちの書くCSSに「あ、ここはもっとスマートに書けるよ」と思う瞬間があるんだ。特に、クラス名を無駄に増やしてDOMを汚染し...
CSS

【実務・中級編】 属性セレクタ ([attr]) – CSS実践ガイド

属性セレクタの「真の力」:なぜ今、クラス名だけで消耗しているのか?フロントエンドの現場で長くコードを書いていると、どうしても「クラス名地獄」に陥ることがある。`btn-primary-large-active` のような、もはや何が何だか分...
CSS

【実務・中級編】 セレクタグループ化 (,) – CSS実践ガイド

CSSセレクタのグループ化:なぜ「カンマ」で書くことが、単なる省略以上の意味を持つのか現場でコードレビューをしていると、CSSのセレクタをただ羅列しているだけのコードによく出くわします。「動けばいい」という考え方から一歩踏み出し、CSSの「...
CSS

【実務・中級編】 一般兄弟結合子 (~) – CSS実践ガイド

CSSの「一般兄弟結合子(~)」を使いこなす:DOMの依存関係を最小化する設計術現場でコードをレビューしていると、不必要に「クラス付け」を乱発しているケースをよく見かけます。特に兄弟要素に対してスタイルを当てる際、JSでクラスを付け替えたり...
CSS

【実務・中級編】 隣接兄弟結合子 (+) – CSS実践ガイド

CSSの「隣接兄弟結合子(+)」を使いこなす:現場で差がつく余白管理の極意やあ。日々のコーディング、お疲れ様。CSSを書いていて「この要素、前の要素と隣り合っている時だけ余白を詰めたいんだけど、いちいちクラスを当てるのは面倒だな」と感じたこ...
スポンサーリンク