CSS 【入門編】 擬似クラス :read-only と :read-write – CSS実践ガイド
こんにちは！フロントエンド・アーキテクチャの世界へようこそ。日々、数え切れないほどのCSSと格闘している私ですが、今日はCSSのちょっとした、でも知っていると「おっ」と周りに差をつけられる便利な魔法についてお話ししますね。今回スポットを当て...
基本セレクタと組み合わせ（タグ, クラス, ID, 子孫・子・隣接）
CSS CSS 【入門編】 擬似クラス :valid と :invalid – CSS実践ガイド
こんにちは！Web制作やCSSの学習に一歩を踏み出したあなたへ。毎日コツコツとコードを書いていると、「あれ？思った通りに動かないな……」なんて壁にぶつかること、ありますよね。大丈夫ですよ、それは誰もが通るすごく大切な成長のステップです。さて...
CSS 【入門編】 擬似クラス :required と :optional – CSS実践ガイド
こんにちは！Web制作やCSSの勉強、毎日お疲れ様です。画面いっぱいにコードを書いて、「よし動いた！」と思った矢先、なぜかデザインが崩れたり、思い通りにスタイリングできなかったり……。CSSって、最初は本当に奥が深くて、心が折れそうになりま...
CSS 【入門編】 擬似クラス :disabled と :enabled – CSS実践ガイド
こんにちは！フロントエンド・アーキテクチャの現場を長年歩んできた私ですが、今日はCSSの「:disabled」と「:enabled」という、フォームの見た目を劇的に変えてくれる優れものコンビについてお話しさせてください。CSSを勉強し始めの...
CSS 【入門編】 擬似クラス :first-child と :last-child – CSS実践ガイド
こんにちは！フロントエンド・アーキテクチャの現場を長年歩んできた者です。日々のコーディング、本当にお疲れ様です。CSSって、最初は「お、思った通りに動いた！」と楽しくなる反面、少し複雑なレイアウトに入った途端、「あれ、なんでこの線が消えない...
CSS 【入門編】 ::cue-region 擬似要素による字幕領域の制御 – CSS実践ガイド
こんにちは！フロントエンドの現場を渡り歩いてきた、シニアアーキテクトの私です。CSSを触り始めたばかりの頃って、次から次へと出てくる新しいセレクタや擬似要素に、なんだかめまいがしちゃいますよね。「`::cue`ってなんだっけ？」「あれ、また...
CSS 【入門編】 ::cue 擬似要素による字幕のスタイリング – CSS実践ガイド
こんにちは！フロントエンド・アーキテクチャの世界へようこそ。日々、CSSと格闘していると、「えっ、こんなところまでスタイルできるの！？」というお宝のような機能に出会うことがありますよね。今回フォーカスするのは、動画の字幕をめちゃくちゃおしゃ...
CSS 【入門編】 ::slotted 擬似要素によるスロットコンテンツのスタイリング – CSS実践ガイド
こんにちは！Web制作やCSSの勉強、毎日お疲れ様です。CSSを少しずつ覚えて、「よし、自分でパーツを作ってみよう！」と意気込んでみたものの、最近のモダンな技術（Web ComponentsとかShadow DOMとか……）の名前を聞いただ...
CSS 【入門編】 ::part 擬似要素によるShadow DOMの外部スタイリング – CSS実践ガイド
こんにちは！フロントエンドの現場を長年歩んできた、いわば「CSSのお医者さん」のようなものです。日々のコーディングで、「あれ、なんでこのCSS、カプセル化されちゃって外から効かないの……？」と、画面の前で頭を抱えた経験はありませんか？ 特に...
CSS 【入門編】 ::view-transition-new 擬似要素による遷移後状態 – CSS実践ガイド
こんにちは！フロントエンドの現場を長年歩んできたチーフアーキテクトの私です。今日は、Web制作の世界に飛び込んだばかりのあなたへ、ちょっと未来のワクワクする技術「View Transitions API（ビュー・トランジションズ・API）」...