jQuery【CSS】colorとfontを変更するサンプル

CSS と同様にセレクタを使用する jQuery は、CSS の設定をスムーズに行うことができます。
今回は、jQuery を使用して 背景色やフォントに関する CSS を変更する際のサンプルについて、解説いたします。

jQuery を使用した CSS の設定方法等については、以下のページもご参照下さい。
jQuery【 CSS 】スタイルを動的に変更する
jQuery【 CSS 】colorとfontを変更するサンプル（本ページ）
jQuery【 CSS 】addClass、removeClass を使ってCSSを変更するサンプル
jQuery【 CSS 】toggleClass を使ってCSSの切り替えを行うサンプル
jQuery【 CSS 】プロパティの値を取得するサンプル
jQuery【 CSS 】!important で優先度を変更するサンプル
jQuery【 CSS 】hover でカーソルが当たった時の処理を実現するサンプル
jQuery【 CSS 】display を使用した表示・非表示に関するサンプル

1. background color

　
jQuery を使用して ボックスの背景色を変更します。
各ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  // ブルー
  $("#bgBtn1").click(function() {
    // cssで背景色をブルーに変更
    $("#bgBox").css("background-color","skyblue");
  });
  // ピンク
  $("#bgBtn2").click(function() {
    // cssで背景色をピンクに変更
    $("#bgBox").css("background-color","pink");
  });
  // リセット
  $("#bgBtn3").click(function() {
    // cssで背景色をデフォルトに変更
    $("#bgBox").css("background-color","#CCC");
  });
});
//-->
</script>

<div id="bgBox" style="background-color : #CCC; padding : 20px;">
  <input type="button" id="bgBtn1" value="ブルー">
  <input type="button" id="bgBtn2" value="ピンク">
  <input type="button" id="bgBtn3" value="リセット">
</div>

▲目次へ戻る

2. color

　
jQuery を使用して テキストの文字色を変更します。
各ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  // 赤
  $("#fcBtn1").click(function() {
    // cssで文字色を赤に変更
    $("#fcBox").css("color","red");
  });
  // 青
  $("#fcBtn2").click(function() {
    // cssで文字色を青に変更
    $("#fcBox").css("color","blue");
  });
  // リセット
  $("#fcBtn3").click(function() {
    // cssで文字色をデフォルトに変更
    $("#fcBox").css("color","black");
  });
});
//-->
</script>

<div id="fcBox" style="background-color : #CCC; padding : 20px;">
  jQuery で文字色を変更！
  <input type="button" id="fcBtn1" value="　赤　">
  <input type="button" id="fcBtn2" value="　青　">
  <input type="button" id="fcBtn3" value="リセット">
</div>

▲目次へ戻る

3. font-size

　
jQuery を使用して テキストの文字の大きさを変更します。
各ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  // 150%
  $("#fsBtn1").click(function() {
    // cssで文字サイズを150%に変更
    $("#fsBox").css("font-size","150%");
  });
  // 70%
  $("#fsBtn2").click(function() {
    // cssで文字サイズを70%に変更
    $("#fsBox").css("font-size","70%");
  });
  // リセット
  $("#fsBtn3").click(function() {
    // cssで文字色をデフォルトに変更
    $("#fsBox").css("font-size","100%");
  });
});
//-->
</script>

<div id="fsBox" style="background-color : #CCC; padding : 20px;">
  jQuery で文字サイズを変更！
  <input type="button" id="fsBtn1" value="　150%　">
  <input type="button" id="fsBtn2" value="　 70%　">
  <input type="button" id="fsBtn3" value="リセット">
</div>

▲目次へ戻る

4. まとめ

jQuery でcolorやfontを変更するサンプルについて、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る