CSS 【入門編】 ::marker 擬似要素 – CSS実践ガイド
こんにちは！フロントエンドの現場で長年CSSと格闘してきたアーキテクトです。CSSを学び始めたばかりの頃、「リストの『・（黒丸）』や『1. 2. 3.』、これをもっとオシャレに、あるいは自分の好きな色に変えたいのに、なぜかいうことを聞いてく...
基本セレクタと組み合わせ（タグ, クラス, ID, 子孫・子・隣接）
CSS 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を学び始めたばかりの頃、誰しもが一度は「あれ？ なんで思った通りに色が塗られないんだ？」と頭を抱える瞬間がありますよね。特に、順番を指定するセレクタは「なぜか無視される...
CSS 【入門編】 :first-child, :last-child, :only-child – CSS実践ガイド
やあ、CSSの世界へようこそ。フロントエンドの深淵を覗き込んでいるキミへ、まずは歓迎の握手を。CSSを学び始めたばかりの頃って、まるで「魔法の呪文」を覚えるみたいでワクワクするよね。でも、いざコードを書こうとすると「あれ？ どうしてこの要素...
CSS 【入門編】 :nth-last-child() 擬似クラス – CSS実践ガイド
CSSの世界へようこそ！フロントエンドの現場で長年コードを書いてきましたが、今日はCSSの中でも少しだけ「ひねくれ者」だけど、知ると最高に頼りになるやつ、`:nth-last-child()` についてお話ししますね。「前から数える」のは簡...
CSS 【入門編】 :nth-child() 擬似クラスの構文と数式 – CSS実践ガイド
CSSの世界へようこそ。フロントエンドの現場で長年戦ってきた身から言わせてもらうと、CSSは時に「気難しい友人」のように感じることがあるかもしれません。でも、一度そのロジックさえ掴んでしまえば、これほど頼もしい相棒はいません。今日は、多くの...
CSS 【入門編】 ユーザーアクション擬似クラス (:hover, :active, :focus) – CSS実践ガイド
ようこそ、CSSの世界へ。フロントエンドの現場で長年コードを書き続けてきた私から、これからCSSを学ぶあなたへ、一番大切な「対話」の話をさせてください。CSSって、ただ色を塗ったり形を作ったりするだけの道具だと思っていませんか？ 実は、ウェ...