要素にフォーカスしたときにCSSを変更する方法

インラインイベントハンドラを使用する方法: HTML要素に直接イベントハンドラを追加する方法です。以下の例では、onfocusイベントハンドラを使用してCSSを変更しています。
```
<input type="text" onfocus="this.style.backgroundColor = 'yellow';">
```
上記の例では、テキスト入力フィールドにフォーカスが当たると、背景色が黄色に変わります。
JavaScriptを使用する方法: JavaScriptを使ってイベントリスナーを登録し、要素にフォーカスが当たったときにCSSを変更する方法です。以下の例では、addEventListenerメソッドを使用してイベントリスナーを登録しています。
```
<input type="text" id="myInput">
<script>
 const inputElement = document.getElementById('myInput');
 inputElement.addEventListener('focus', function() {
   this.style.backgroundColor = 'yellow';
 });
</script>
```
上記の例では、同じくテキスト入力フィールドにフォーカスが当たると、背景色が黄色に変わります。JavaScriptを使用する場合、より高度な操作や複数の要素に対して同じ処理を行う場合に柔軟性があります。
CSSの:focus疑似クラスを使用する方法: CSSの:focus疑似クラスを使用することで、フォーカスが当たったときに要素のスタイルを変更することができます。以下の例では、テキスト入力フィールドにフォーカスが当たったときに背景色を変更しています。
```
<style>
 input[type="text"]:focus {
   background-color: yellow;
 }
</style>
<input type="text">
```
上記の例では、テキスト入力フィールドにフォーカスが当たると、背景色が黄色に変わります。この方法はJavaScriptを使用せずにCSSだけで処理するため、簡潔なコードが書けます。

これらは要素にフォーカスしたときにCSSを変更するいくつかの一般的な方法です。リアルタイムな応用や具体的な要件に応じて、適切な方法を選択してください。