jQueryでCSSを変更しよう！【コピペ可・初心者向け】

web

皆さんこんばんわ！バジラですー！

今回はコーディングに慣れてくるとすごく便利に使えるようになるjqueryによるスタイル・cssの付与と除去についてご紹介させていただきます。

どういうときに使うのか？？

はい、僕がよく使うのはスクロールに追従してくるヘッダーであったりだとか、スマホのハンバーガーメニューを展開するときですね！アコーディオンメニューがある場合は、それを開くときにも使用したりしますね！

コーディングのレベルが上がれば上がるほど、当然のように使われる技術ですので是非覚えておきましょう！

またはこのブログをブックマーク！おじさん喜んじゃうぜ！！

サンプルはこちら！

ほげほげほげほげ！！

クラス付与ver.


スタイル付与ver.


今回は、「ほげほげほげほげ！」というテキスト（以下ほげほげ君）にクラスの付与・除去をするボタンと、スタイルの付与・除去をするボタンをサンプルとしました！

下記コードのコーナーでは、ベースとなったほげほげ君のソースコードも載せていますが、基本的に使用するのは、jsの方でしょうな！うまく活用してくださいね！

CSSの優先度について

htmlの性質上、スタイル付与のほうが優先的にスタイルが当たる(!important付きは例外)ので、基本は強制力の弱いクラス付与で行きたいところですが、
・作業を引き継いだんだけど階層が深くまで行き過ぎていてスタイルを書くのが面倒くさい！
・当てるプロパティが少ない
なんて場合は、スタイルを直接付与するほうがいいかもしれませんね！

ではコードだ！現物を見よ！

ほげほげ君

HTML

<p class="hogehoge">ほげほげほげほげ！！</p>

CSS

.hogehoge{
   width:50%;
   border:1px solid #000;
   padding:15px;
   transtion: all .4s ease-in-out;
}

ボタン

<!-- クラスの付与・除去ボタン -->
<button id="hoge">クラスが付くよ！！</button>
<button id="r_hoge">クラスを外すよ！！</button>

<!-- スタイルの付与・除去ボタン -->
<button id="hoge2">スタイルが当たるよ！！</button>
<button id="r_hoge2">スタイルを外すよ！！</button>

クラスの付与・除去

jQuery（付与）

(function($) {
  $('#hoge').click(function() {
      $(".hogehoge").addClass("addhoge");
  });
})(jQuery);

jQuery（除去）

  $('#r_hoge').click(function() {
      $(".hogehoge").removeClass("addhoge");
  });

一応解説としましては、「id=”hoge”」とついた要素をクリックしたら「.hogehoge」に.addClass()で「addhoge」というクラスが付与、「id=”r_hoge”」をクリックしたら、.removeClass()でクラスを除去って感じですね！！addhoge付与時スタイルは、事前にcssに追加しておきましょうね！

CSS（追加分）

.addhoge{
   background:#f00;
   color:#fff;
   width:100%;
}

スタイルを付与・除去

jQuery（付与）

(function($) {
  $('#hoge2').click(function() {
    $(".hogehoge").css({
      background:"#f00",
      color:"#fff",
      width:"100%"
　　});
  });
})(jQuery);

jQuery（除去）

(function($) {
  $('#r_hoge2').click(function() {
    $(".hogehoge").removeAttr("style");
  });
})(jQuery);

ちょーっと長くなっちゃいましたが、スタイルを付与するときは.css()を使用してプロパティを追加、除去するときはstyle属性ごと取っ払うって感じっすね！

まぁ全部まとめてもいいんですけども、長いコードって頭がパーンッってなる人いますからね！今回は別個での起債としておきます！

まとめ

このコードはhtml/cssが主戦場となるデザイナー寄りのwebデザイナーにとって、とても大きな武器なります。これを覚えるだけで、ブラウザによるアクションでの「動き」を簡単に作成することができますからね！

最近はjsもゴリゴリ書くwebデザイナーも増えてきているようですが、イラストレーターからwebに参入した人も多くいて、デザインを強みとしてこそ！って方もまだまだいますからね！

今回はわかりやすさを重視して、クリック（on.click）での変化を使用しましたが、ここはスクロール（on.scroll）でも問題ないですね！これこれスクロールしたらこのクラスを当てる。って具合に使えます！応用もたくさんできそうですし、ガシガシ使っていきましょう！

使いすぎはユーザーに疲労感をもたらしますが、適度に使えば、良いUXをもたらす一味違ったサイトが作成できるはずです！

はい、それでは今回はこの辺で終わりにしようと思います！それではー(^q^)ﾉｼ

タイトルとURLをコピーしました