jQueryによるスタイリング
jQueryによるスタイリング
「jQueryによるスタイリング」はCoddyKit上の無料jQuery Academyレッスンです。 これはレッスン1/1です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはjQuery Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 jQuery Academyコースには全1レッスンが含まれています。
概要
こんにちは。
これまでのすべての例で、HTML DOMオブジェクトを扱ってきました。
jQueryを使うと、HTML要素のスタイルも操作できます。
JQueryには、そのためのメソッドが用意されています。
クラス
最初の例では、JQueryでクラスを使う方法を見ていきます。
以下の例では、JQueryライブラリをHTMLに読み込み、テキストをピンクと黄色にするpinkクラスとyellowクラスを定義しています。
始めましょう🚀
例
<p>要素を<body>タグの間に追加しました。
現在、この要素にはまだクラスがありません。
<style>
.pink{
color:pink;
}
.yellow{
color: yellow;
}
</style>
<p>lorem ipsum </p>例2
次に、addClass()メソッドを使って段落要素にpinkクラスを追加しましょう。
プレビュー画面では、Lorem ipsumテキストの色がピンクに変わることを確認できます。
<style>
.pink{
color:pink;
}
</style>
<p>lorem ipsum</p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
//adding pink class to p element
$('p').addClass('pink');
});
</script>removeClass
removeClass()メソッド
HTML要素からクラスを削除する場合は、removeClass()メソッドを使用します。
以下の例を変更し、HTML要素に最初からpinkクラスを定義しました。DOMが読み込まれると、p要素のpinkクラスが削除されます。
<style>
.pink{color:pink;}
</style>
<p class="pink">lorem ipsum </p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
//removing pink class to p element
$('p').removeClass('pink');
});
</script>toggle Class
toggleClass()メソッド
名前からもわかるように、このメソッドを使うと、
対象要素にクラスが存在する場合は削除し、存在しない場合は追加します。
<style>
.pink{color:pink;}
</style>
<p class="pink">lorem ipsum</p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
/*
Since p element has pink class,
pink class will be removed.
*/
$('p').toggleClass('pink');
/*
Since p element hasn't pink class,
pink class will be added.
*/
$('p').toggleClass('pink');
/*
Since p element has pink class,
pink class will be removed.
*/
$('p').toggleClass('pink');
});
</script>Cssメソッド
css()メソッド
クラスの追加と削除を行うメソッドについて学びました。
次に、HTMLノードにインラインスタイルを定義するためのCSSメソッドについて学びましょう。
CSSメソッドは2つのパラメーターを受け取ります。
- 1つ目のパラメーターは、設定するプロパティの名前です。
- 2つ目のパラメーターは、設定するプロパティの値です。
以下の例では、CSSメソッドのさまざまな使い方を示しています。
<button>My Button</button>
<script>
/*
Below, the button element's color style
has been read and written
to the color variable.
*/
let color = $('button').css('color');
/*
Now let's change the button color by assigning
the red value to the second argument=
*/
$('button').css('color', 'red')
/*
If we want to change more than one style of
an element at the same time, we pass JSON type arguments.
*/
$("button").css({"color": "red", "padding": "20px"});
</script>
JQuery API
jQueryを使ったDOMの操作について、さまざまな方法を学びました。
ここまでに学んだメソッド以外にも、JQueryには多くの操作用メソッドがあります。
以下のリンクをクリックすると、API全体を確認できます。
おめでとうございます
おめでとうございます 🎉
jQueryによるスタイリングについて学びました。
次のセクションでは、jQueryによるイベント管理について学びます。
よくある質問
「jQueryによるスタイリング」レッスンは無料ですか？
はい。「jQueryによるスタイリング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、jQuery Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 jQuery Academyコースには全1レッスンが含まれています。
「jQueryによるスタイリング」で何を学びますか？
jQueryによるスタイリング ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
jQuery Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのjQuery Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/1です。
「jQueryによるスタイリング」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このjQuery Academyレッスンでコードを書いて実行できますか？
はい。すべてのjQuery Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。