OutlineとBox-Shadow
outlineとbox-shadowを使って、要素の周囲にフォーカスアウトラインと影の効果を追加します。
「OutlineとBox-Shadow」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
outline プロパティ
outlineはボーダーの外側に線を描画します。レイアウトには影響しないため、周囲の要素が移動することはありません。ショートハンドの形式はborderと同じで、width style colorの順です。
<button class="focus-demo">Focused Button</button>
outline-offset
outline-offsetは、ボーダーの端からアウトラインを離します。正の値を指定すると外側に移動し、負の値を指定すると内側に移動します（クリッピングのような効果になります）。
<button class="focus-demo">Keyboard-focused Button</button>
outline と border の違い
主な違いは次のとおりです。
- アウトラインはレイアウトフローに影響しません
- アウトラインは辺ごとに設定できません（outline-topはありません）
- アウトラインは長方形以外の形状にもできます（一部のブラウザーではフォーカスリングの形状に沿います）
- アウトラインは常にボーダーの外側に表示されます
:focus-visible と :focus
キーボードのフォーカスリングには:focus-visibleを優先して使用します。マウスクリックではなくキーボード操作でフォーカスを受け取った場合だけアウトラインを表示するため、ポインターを使うユーザーに不要な視覚的ノイズを与えず、アクセシビリティを維持できます。
<button class="focus-demo">Keyboard focus vs mouse click</button>
box-shadow の基本
box-shadowは要素の周囲に影の効果を追加します。ショートハンドは、offset-x offset-y blur-radius spread-radius colorの順です。
<div class="card">Card with soft shadow</div>
box-shadow の値の説明
box-shadowの各値は次のとおりです。
- offset-x：水平方向の移動量（負の値 = 左）
- offset-y：垂直方向の移動量（負の値 = 上）
- blur-radius：ぼかしの強さ（0 = くっきり）
- spread-radius：影のサイズの拡大・縮小
- color：影の色（RGBAを推奨）
<div class="raised">Raised</div>
<div class="deep">Deep</div>
inset ボックスシャドウ
insetキーワードを追加すると、要素の内側に影が描画され、押し込まれたような外観になります。
<input class="input focus-demo" type="text" value="Focused input" />
複数のボックスシャドウ
複数の影はカンマで区切ります。影は手前から奥の順に重なります。
<span class="badge">3</span>
box-shadow と filter: drop-shadow の違い
box-shadowはボックスの形状だけを考慮します。filter: drop-shadow()は透明部分を含む描画後の形状に沿うため、背景が透明なPNGアイコンに適しています。
<div class="icon">★</div>
box-shadow によるエレベーションシステム
Material Designなどのデザインシステムでは、視覚的な高さを表現するために複数の影のレベルを定義しています。CSS変数を影の値に対応付けます。
<div class="elevation-sm">sm</div>
<div class="elevation-md">md</div>
<div class="elevation-lg">lg</div>
box-shadow を効率的にアニメーションさせる
box-shadowをアニメーションさせると、フレームごとに再描画が発生します。パフォーマンスを高めるには、疑似要素で作った影のopacityをアニメーションさせるか、コンポジット処理が可能なfilter: drop-shadow()を使用します。
理解度チェック
影を要素の内側に描画するbox-shadowのキーワードはどれですか。
まとめ
outlineはレイアウトに影響を与えずにボーダーの外側へ描画されるため、フォーカスインジケーターに使用します。box-shadowは、移動量、ぼかし、拡散、色を指定して立体感のある影を追加します。内側の影にはinsetを使用します。複数の影はカンマで重ねることができます。
よくある質問
「OutlineとBox-Shadow」レッスンは無料ですか？
はい。「OutlineとBox-Shadow」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「OutlineとBox-Shadow」で何を学びますか？
outlineとbox-shadowを使って、要素の周囲にフォーカスアウトラインと影の効果を追加します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「OutlineとBox-Shadow」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。