CSS

スポンサーリンク
CSS

【入門編】 :where() 擬似クラス – CSS実践ガイド

こんにちは!フロントエンドの現場で長年コードを書き続けていると、たまに「なんでこんなにCSSが効かないんだ……」と頭を抱えたくなる夜がありますよね。特に、せっかく書いたスタイルが、別の場所で書いた「詳細度(Specificity)の高いセレ...
CSS

【入門編】 :is() 擬似クラス – CSS実践ガイド

CSSという迷宮へようこそ。フロントエンドの現場に立つと、「もっと効率的に、もっと楽に書ける方法はないか?」と頭を抱える夜が必ず訪れます。そんなとき、救世主のように現れるのが `:is()` 擬似クラスです。「CSSのセレクタが長すぎて、コ...
CSS

【入門編】 ::backdrop 擬似要素 – CSS実践ガイド

やあ、こんにちは。CSSの世界へようこそ。Webの画面を作っていると、時に「画面の主役」を際立たせるために、ちょっとした「演出」が必要になることがありますよね。例えば、Webサイトで大事な確認ボタンを押したとき、画面全体を少し暗くして、その...
CSS

【入門編】 ::placeholder 擬似要素 – CSS実践ガイド

こんにちは!フロントエンドの現場で長年CSSと格闘してきた、いわば「CSSの番人」のような者です。Webサイトを作っていると、入力フォームの「お名前を入力してください」といった薄い文字、あれを目にすることありますよね。あれを「プレースホルダ...
CSS

【入門編】 ::marker 擬似要素 – CSS実践ガイド

こんにちは!フロントエンドの現場で長年CSSと格闘してきたアーキテクトです。CSSを学び始めたばかりの頃、「リストの『・(黒丸)』や『1. 2. 3.』、これをもっとオシャレに、あるいは自分の好きな色に変えたいのに、なぜかいうことを聞いてく...
CSS

【入門編】 ::selection 擬似要素 – CSS実践ガイド

やあ、こんにちは。Webの世界へようこそ。CSSを学び始めると、最初は「文字の色を変える」「レイアウトを組む」といった大きな機能に目が行きがちですよね。でもね、一流のフロントエンドエンジニアは、実は「誰も気に留めないような細かい部分」にこそ...
CSS

【入門編】 ::first-letter と ::first-line – CSS実践ガイド

やあ、こんにちは。CSSの世界へようこそ。コードを書いていると、「新聞の書き出しみたいに、最初の1文字だけ大きくしたいな」とか「段落の最初の行だけ、ちょっと特別感を出したいな」なんて思うこと、あるよね。今日はそんな、「ちょっとしたこだわり」...
CSS

【入門編】 ::before と ::after 擬似要素 – CSS実践ガイド

魔法の「あと付け」テクニック!CSS擬似要素「::before」と「::after」の世界へようこそこんにちは!CSSの世界へようこそ。コードを書いていると、「ここにちょっとだけアイコンを置きたいな」「見出しの横に飾り線をつけたいな」と思う...
CSS

【入門編】 :first-of-type, :last-of-type, :only-of-type – CSS実践ガイド

こんにちは!フロントエンドの現場で日々CSSと格闘しているエンジニアです。CSSを学び始めると、最初は「色を変える」「配置を変える」といった基本的な操作が楽しくてたまらないですよね。でも、いざページを作り込んでいくと、「リストの最初の項目だ...
CSS

【入門編】 :nth-of-type() と :nth-last-of-type() – CSS実践ガイド

こんにちは。フロントエンドの現場で長年CSSと格闘してきた者です。CSSを学び始めたばかりの頃、誰しもが一度は「あれ? なんで思った通りに色が塗られないんだ?」と頭を抱える瞬間がありますよね。特に、順番を指定するセレクタは「なぜか無視される...
スポンサーリンク