カンタン操作でバッチリ！jQueryでテキストの色を変更するチュートリアル
jQueryでテキストの色を変更する方法
ここでは、jQueryでテキストの色を簡単に変更する方法を、3つのステップに分けて解説します。
ステップ1：必要なライブラリを準備する
まず、jQueryライブラリをプロジェクトに読み込む必要があります。以下の2つの方法があります。
CDNから読み込む
以下のコードを
<head>タグ内に追加します。<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
ステップ2：ターゲット要素を選択する
jQueryでスタイルを変更するには、まずターゲット要素を選択する必要があります。要素を選択するには、CSSセレクタを使用します。
例えば、id が "my-text" である要素のテキスト色を変更したい場合は、以下のコードを使用します。
$(document).ready(function(){
$("#my-text").css("color", "red");
});
このコードは、DOMが読み込まれた時点で実行されます ($(document).ready(function(){}))。そして、$("#my-text") セレクタを使って id が "my-text" である要素を選択します。最後に、.css("color", "red") メソッドを使って、要素のcolor プロパティを "red" に設定します。
ステップ3：テキストの色を変更する
ターゲット要素を選択したら、.css() メソッドを使って、color プロパティに新しい色を文字列で指定します。
色の指定方法
- 16進数表記:
#rrggbb形式で指定します。例えば、赤は#ff0000、青は#0000ffとなります。 - キーワード:
red,green,blueなどの色名で指定することもできます。 - RGB関数:
rgb(red, green, blue)形式で指定できます。それぞれの値は0～255の範囲で指定します。 - RGBA関数:
rgba(red, green, blue, alpha)形式で指定できます。rgb()関数に加えて、透明度 (alpha) を0～1の範囲で指定できます。
例
以下のコードは、id が "my-text" である要素のテキスト色を 青色 に変更します。
$(document).ready(function(){
$("#my-text").css("color", "#0000ff");
});
補足
- 上記のコードは、ページが読み込まれた直後に実行されます。要素が動的に生成される場合は、適切なタイミングでコードを実行する必要があります。
- 複数の要素のテキスト色を変更したい場合は、ループ処理などを利用することができます。
- jQueryには、要素のスタイルを操作するための様々なメソッドが用意されています。詳しくは、jQueryの公式ドキュメントを参照してください。
- ボタンをクリックすると、ランダムな色が生成されます。
- 生成された色は、#color-display 要素の背景色とテキスト色に設定されます。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryでテキストの色を変更</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>jQueryでテキストの色を変更</h1>
<button id="change-color-button">色を変更</button>
<div id="color-display">
この要素の色が変わります
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS
body {
font-family: sans-serif;
}
.container {
text-align: center;
margin: 0 auto;
width: 50%;
}
#change-color-button {
padding: 10px 20px;
background-color: #000;
color: #fff;
border: none;
cursor: pointer;
}
#color-display {
padding: 20px;
width: 200px;
height: 100px;
margin: 20px auto;
border: 1px solid #ccc;
text-align: center;
}
JavaScript
$(document).ready(function(){
$("#change-color-button").click(function(){
var randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
$("#color-display").css("background-color", randomColor);
$("#color-display").css("color", randomColor);
});
});
説明
<div class="container">: コンテナ要素<h1>: 見出し<button id="change-color-button">: 色変更ボタン<div id="color-display">: 色を表示する要素
body: 基本的なスタイル.container: コンテナ要素のスタイル#change-color-button: ボタンのスタイル#color-display: 色表示要素のスタイル
$(document).ready(function(){}): DOMが読み込まれた時点で実行されるコード$("#change-color-button").click(function(){}): ボタンがクリックされた時の処理Math.random(): ランダムな数値を生成Math.floor(): 小数点以下の部分を切り捨てるtoString(16): 10進数を16進数に変換$("#color-display").css("background-color", randomColor): 要素の背景色をランダムな色に設定
このサンプルコードはあくまでも基本的な例です。ご自身のニーズに合わせて、自由にカスタマイズしてください。
jQueryでテキストの色を変更するその他の方法
クラスを使用する
あらかじめCSSでスタイルを定義しておき、JavaScriptで要素にクラスを追加・削除することで、テキストの色を変更することができます。
<p id="my-text">この要素の色を変更します</p>
.red-text {
color: red;
}
.blue-text {
color: blue;
}
$(document).ready(function(){
$("#change-color-button").click(function(){
$("#my-text").toggleClass("red-text blue-text");
});
});
toggleClass(): クラスの追加・削除を切り替えるメソッド- 上記のコードでは、ボタンをクリックするたびに、
#my-text要素にred-textクラスとblue-textクラスを交互に切り替えます。
アニメーションを使用する
jQueryには、アニメーションを簡単に作成できる機能が用意されています。この機能を利用して、テキストの色を滑らかに変化させることができます。
<p id="my-text">この要素の色をアニメーションで変更します</p>
#my-text {
color: #000;
}
$(document).ready(function(){
$("#change-color-button").click(function(){
$("#my-text").animate({
color: "#ff0000"
}, 1000);
});
});
animate(): アニメーションを作成するメソッド- 上記のコードでは、ボタンをクリックすると、
#my-text要素の色を1秒かけて赤色に変化させます。
ファードを使用する
jQueryには、要素を徐々に表示・非表示する fadeIn() / fadeOut() メソッド and 要素の色を徐々に変化させる fadeTo() メソッドが用意されています。
<p id="my-text">この要素の色をフェードで変更します</p>
#my-text {
color: #000;
}
$(document).ready(function(){
$("#change-color-button").click(function(){
$("#my-text").fadeTo(1000, 1, "#ff0000");
});
});
fadeTo(): 要素の色を徐々に変化させるメソッド
上記以外にも、様々な方法でテキストの色を変更することができます。ご自身のニーズに合った方法を選択してください。
javascript jquery css
