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)」...
CSS

【入門編】 ::view-transition-old 擬似要素による遷移前状態 – CSS実践ガイド

こんにちは!フロントエンドの現場を長年歩んできた、あなたの「CSSの先輩」です。Webサイトを眺めていて、ページがパッと切り替わるんじゃなくて、スルスル〜っと滑らかに新しい画面に変わるモダンなサイトに出会ったこと、ありませんか? 「うわ、な...
CSS

【入門編】 ::view-transition-image-pair 擬似要素の役割 – CSS実践ガイド

こんにちは!フロントエンドの現場を長年フラフラと……もとい、最前線で走り抜けてきたチーフアーキテクトの私です。CSSの世界へようこそ! 日々、画面を彩るコードを書いていると、「もっと滑らかに、もっと魔法みたいにページが切り替わったらいいのに...
CSS

【入門編】 ::view-transition-group 擬似要素の階層構造 – CSS実践ガイド

こんにちは!フロントエンドの現場を渡り歩いているチーフアーキテクトの私です。CSSの世界へようこそ!毎日コードを書いていると、「うわ、これどうやって動いてるんだ…?」と頭を抱えたくなるような新しい機能に出会うこと、ありますよね。大丈夫ですよ...
スポンサーリンク