WebデザイナーのためのjQuery実践講座

jQueryでCSSの値をコントロールする

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQueryで既存のCSSの値を取得・変更する方法、及び新たにスタイルを追加する方法について解説致します。
講師:
05:54

字幕

このレッスンでは jQuery で 既存の CSS の値を取得 変更する方法 及び 新たにスタイルを追加する 方法について解説していきます まずは ダウンロードしてきた こちらの control-css というフォルダーの中に入っている こちらの index.html ファイルと こちらの js フォルダーの中に入っている javascript.js ファイルを エディッターで開いてください そして これがそれらのファイルを 開いた状態です そして こちらの右側にはこちらの index.html をブラウザで 開いたものを表示させています これらのファイルを使って今回の レッスンの解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう それでは まず こちらの HTML ファイルをみてみます こちらの HTML ファイルには このように h1 タグがありますね 今回はこちらの h1 タグの スタイルシートに jQuery から アクセスする方法についてみていきます それでは こちらの javascript.js ファイルを 開きます すると このような画面になりましたね まず こちらの部分で 先程の h1 タグに対して クリックイベントを登録しています 先程の h1 タグ部分を クリックすることによって この function の波括弧の 間のこの部分の処理が 実行されるといった感じですね そして この function の 括弧の中ですが 合計三つの処理を書いています 但し 最後の二つに関しては 現在 comment-out をして 実行されないようにしています では 順番に一番上から見ていきます まず こちらの部分では jQuery を使って既存の CSS の値を取得する処理を書いています まずは var と書いて横幅と書いています こうする事によって 変数 横幅が出来上がります そして = と書いてその後に $this そして .csswidth と書いています こちらの $this というのは ここでは この h1 のことを指します そして css と書いて 括弧 括弧閉じる そして その中の引数に width と書いていますね この様に書く事でこの h1 に 設定されている横幅の値をこちらの変数横幅 に代入することができます そして こちらのアラート文を使って その変数横幅の中に格納された h1 タグの横幅の値を 表示させるようにしています それでは この状態で一度ブラウザの方で みてみたいと思います では こちらの h1 タグで囲まれた部分を クリックしてみます すると この様にアラートで 300 ピックセルと出てきましたね これが今 こちらの h1 タグに 設定されている width の値となります それでは閉じます それでは 次に既存の CSS の値を 変更する方法についてみていきます まずはこちらの部分を comment-out しておきます そして 次にこちらの部分を有効化します 既存の CSS の値を変更するには 先程書いた CSS の中に もう一つ引数を足してあげればオッケーです そして その二つ目の引数に 変更後の値を書いてあげます まずは $this これは h1 の事でしたね そして .css と書いて width と書きます そして カンマと書いて  その後に 今回は 500 と書きます こうする事によって この h1 タグを クリックした時に その h1 タグの 横幅を 500 にすることができます それでは この状態でファイルを保存します ファイルの保存のキーボードショートカットは マックですと コマンドと S ウインドーズでしたら コントロールと S の同時押しでしたね それでは 保存します そして こちらに表示されている ブラウザを更新します そして こちらの枠内を クリックしてみましょう すると この様に横幅が大きくなりましたね このように既存の CSS の 値を変更する事ができます 最後にこの h1 タグに対して新たに スタイルを設定する方法についてみていきます まずはこちらの部分を comment-out しておきます そして 最後のこちらの部分の comment-out を外しておきます こちらも基本的には同じ形を取ります $this そして css と書いて 次に変更したい部分は width ではなくて 今回新たに設定する color いわゆる文字色ですね 文字色のプロパーティーを ここに書いておきます そして その後に設定したい色の名前 若しくはカラーコード 今回は blue としています それでは この状態で保存して ブラウザで確認してみましょう 更新ボタンを押して そして この h1 タグの枠内をクリックします そうすると このように Hello World! の文字色が 青色に変わりましたね このようにする事で元々スタイルシートで h1 タグに指定していなかった カラーのプロパーティーに対しても 新たにスタイルを設定する事が出来ました 以上でレッスンは終了です 今回は jQuery で 既存の CSS の値を取得 変更する方法 及び 新たにスタイルを 追加する方法について解説致しました 以降のレッスンでは jQuery で 既存の html タグ属性の 値を取得 変更する方法及び 新たに属性を 追加する方法について解説していきますので そちらも合わせてご覧下さい

WebデザイナーのためのjQuery実践講座

jQueryとはJavaScriptを簡単かつ便利に扱えるJavaScriptライブラリです。このコースではプログラミングの知識はそれほどないけれど日々仕事でHPを制作しているWebデザイナーの方や趣味で自分のサイトを運営している方などを対象に、jQueryとプラグインを利用してさまざまな機能や効果を手軽にサイトに実装する方法を学びます。

2時間04分 (34 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年06月29日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。