疑似要素による装飾パターン
追加のHTMLを使わず、::beforeと::afterで装飾的な図形、区切り線、オーバーレイを作成します。
「疑似要素による装飾パターン」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
CSSだけで装飾する考え方
擬似要素を使うと、余分なHTMLなしで豊かな装飾効果を実現できます。目標は、装飾用のdivをゼロにし、すべての視覚的な装飾をCSSに任せることです。
CSS三角形
透明な境界線を持つサイズ0の要素を使って三角形を作成します。
<div class="triangle"></div>ツールチップの矢印
::beforeを使ったツールチップの矢印です。
<div class="tooltip" style="position:relative;display:inline-block;background:#333;color:#fff;padding:6px 12px;border-radius:4px;margin-top:16px;">Tooltip text</div>斜めのセクション区切り
::afterにskewまたはclip-pathを適用して、斜めのセクション区切りを作成します。
<div class="section" style="background:linear-gradient(135deg,#4f8cff,#7ee787);height:120px;position:relative;"></div>装飾的な下線
::afterを使ったアニメーション付きの下線効果です。
<a href="#">Hover me (underline animates in on :hover)</a>::afterによるバッジ
余分なHTML要素を追加せずに、通知バッジを重ねて表示します。
<span class="nav-icon" data-count="3" style="position:relative;display:inline-block;font-size:1.5rem;margin:16px;">🔔</span>画像のグラデーションオーバーレイ
テキストを読みやすくするために、画像の上に暗いグラデーションを重ねます。
<div class="card-image" style="width:100%;height:160px;background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>::beforeによるチェックマーク
CSSの境界線で描画するカスタムチェックボックスのチェックマークです。
<div class="custom-check" style="width:20px;height:20px;background:#34c759;border-radius:4px;padding:2px;"></div>リボンバナー
負の位置指定で::beforeを使い、カードにリボン効果を加えます。
<div class="card featured" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;width:200px;">Featured product</div>シマー読み込み効果
JavaScriptを使わない、CSSによるスケルトン読み込みのシマー効果です。
<div class="skeleton" style="width:100%;height:60px;border-radius:6px;"></div>確認問題
上向きの三角形をCSSだけで作成するプロパティの組み合わせは何ですか？
まとめ
擬似要素を使うと、余分なHTMLなしで、矢印、オーバーレイ、アニメーション付きの下線、バッジ、リボン、シマー効果など、豊かな装飾パターンを実現できます。いずれもcontent: ""、position: absolute、そして境界線、clip-path、transformを工夫して組み合わせることで実現します。
よくある質問
「疑似要素による装飾パターン」レッスンは無料ですか？
はい。「疑似要素による装飾パターン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「疑似要素による装飾パターン」で何を学びますか？
追加のHTMLを使わず、::beforeと::afterで装飾的な図形、区切り線、オーバーレイを作成します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「疑似要素による装飾パターン」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。