現役エンジニアが解説！HTML、CSS、JavaScriptを使ったtextareaフォーカスデザイン
HTMLとCSSでtextareaのフォーカス時のボーダー色を変更する方法
HTML
まず、HTMLでtextarea要素を作成します。
<textarea id="my-textarea" rows="5" cols="30"></textarea>
この例では、id="my-textarea"というIDを持つtextarea要素を作成しています。
CSS
次に、CSSでtextareaのフォーカス時のボーダー色を変更します。
#my-textarea:focus {
border: 2px solid blue;
}
この例では、#my-textareaというIDを持つtextarea要素にフォーカスが当たったときに、ボーダーを2ピクセルの青い線に変更します。
内訳
#my-textarea: これは、CSSでスタイルを適用するtextarea要素を選択するセレクターです。:focus: これは、要素にフォーカスが当たっているときに適用される疑似クラスです。border: これは、要素のボーダーを設定するプロパティです。2px solid blue: これは、ボーダーの太さ、スタイル、色を定義する値です。
オプション
上記の基本的な例に加えて、ボーダーの太さ、スタイル、色を自由に設定することができます。
- 太さ:
border-widthプロパティを使用してボーダーの太さを設定できます。 - スタイル:
border-styleプロパティを使用してボーダーのスタイルを設定できます。利用可能なスタイルには、solid、dashed、dottedなどがあります。 - 色:
border-colorプロパティを使用してボーダーの色を設定できます。色の指定には、16色名のいずれか、RGB値、またはHEX値を使用できます。
例
#my-textarea:focus {
border: 4px dashed green;
}
デモ
以下のデモで、実際にtextareaのフォーカス時のボーダー色を変更する方法を確認できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Textarea Focus Border</title>
<style>
#my-textarea {
width: 300px;
height: 100px;
}
#my-textarea:focus {
border: 2px solid blue;
}
</style>
</head>
<body>
<textarea id="my-textarea" rows="5" cols="30"></textarea>
</body>
</html>
このデモでは、textareaにフォーカスを合わせると、ボーダー色が青色に変わります。
HTMLとCSSを使用して、textareaのフォーカス時のボーダー色を簡単に変更することができます。上記の説明と例を参考に、自分のニーズに合わせてボーダーをカスタマイズしてみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Textarea Focus Border</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<textarea id="my-textarea" rows="5" cols="30"></textarea>
</body>
</html>
#my-textarea {
width: 300px;
height: 100px;
}
#my-textarea:focus {
border: 2px solid blue;
}
説明
- このコードは、
index.htmlというHTMLファイルとstyle.cssというCSSファイルで構成されています。 index.htmlファイルは、textarea要素を含むシンプルなHTMLドキュメントです。style.cssファイルは、textareaのフォーカス時のボーダー色を変更するCSSルールを定義しています。- CSSルールでは、
#my-textareaというIDを持つtextarea要素を選択し、:focus疑似クラスを使用してフォーカス状態を指定しています。 - フォーカス状態では、
borderプロパティを使用してボーダーの太さ、スタイル、色を設定しています。
実行方法
- 上記のコードを
index.htmlとstyle.cssというファイルに保存します。 - Webブラウザで
index.htmlファイルを開きます。
カスタマイズ
このコードは、ニーズに合わせてカスタマイズすることができます。
- 要素のセレクター:
#my-textareaというセレクターを、クラス名や属性セレクターなど、他のセレクターに変更できます。
#my-textarea:focus {
border: 4px dashed green;
}
このコードをstyle.cssファイルに追加して、index.htmlファイルを再読み込みすると、textareaのフォーカス時のボーダーが緑色の破線になります。
このサンプルコードを参考に、様々なデザインのボーダーを作成してみてください。
textareaのフォーカス時のボーダー色を変更するその他の方法
JavaScriptを使用して、textareaにフォーカスが当たったときにボーダー色を変更することができます。
const textarea = document.getElementById('my-textarea');
textarea.addEventListener('focus', function() {
textarea.style.border = '2px solid blue';
});
textarea.addEventListener('blur', function() {
textarea.style.border = '';
});
ライブラリ
BootstrapやFoundationなどのCSSフレームワークを使用している場合は、これらのフレームワークが提供するユーティリティクラスを使用して、textareaのフォーカス時のボーダー色を簡単に変更することができます。
Bootstrapでは、.form-controlクラスを使用してtextareaをスタイル設定し、.form-control:focusクラスを使用してフォーカス時のスタイルを定義することができます。
<textarea class="form-control" id="my-textarea" rows="5" cols="30"></textarea>
<textarea class="form-group" id="my-textarea" rows="5" cols="30"></textarea>
注意
これらの方法は、HTMLとCSSのみを使用する方法よりも複雑になる場合があります。シンプルなデザインの場合は、HTMLとCSSのみを使用する方法がおすすめです。
textareaのフォーカス時のボーダー色を変更するには、HTMLとCSS、JavaScript、ライブラリなど、様々な方法があります。それぞれの方法にはメリットとデメリットがあるため、自分のニーズに合わせて最適な方法を選択してください。
html css
