JavaScriptプログラミング入門講座

ノードのスタイルの操作

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
JavaScriptを使って、HTMLのノードに紐付けられたスタイルシートを操作する方法について解説致します。これにより動的にデザインを変更することが可能となります。
講師:
07:05

字幕

このレッスンでは JavaScript で html 文書に 書かれている html タグのスタイルシートを JavaScript から設定や変更する方法について 解説いたします まずはダウンロードしてきた ファイルの中にあるー styleと名前のついた html ファイル JavaScript ファイル CSS ファイル これらをエディタで開いてください そしてこれがそれらのファイルを 開いた状態です これらのファイルは外部化された CSSファイルと JavaScript ファイル それらをこの html ファイルから 読み込んでいる状態です そしてこの html タグにはすでに いくつかの html タグが入っており の直前に JavaScript ファイルを 読み込むー スクリプトタグが書かれている状態です これらのファイルを使って 今回の JavaScript で スタイルシートを編集するための 方法について説明していきたいと思います それではレッスンを始めて行きましょう まずはこのファイルの状態で この html ファイルを一度 ブラウザで確認してみましょう このファイルをブラウザで開くと 既にこういった感じで htmlタグとスタイルシートが 書かれていますね 今回はこの赤い枠のところの スタイルを JavaScript で 動的に変更してみたいと思います それではエディタに戻ります まず先程の赤い枠で囲まれた部分の html タグを確認してみたいと思います それはこの部分ですね p タグで ID が red の要素です このスタイルシートを JavaScript で 変えてみたいと思います それでは JavaScript ファイルを開きます それでは早速コードを 書いてみたいと思います スタイルシートの変更の仕方は このように書いていきます まずスタイルシートを変更したい html タグを JavaScript から取得します まずは変数を定義します var そして変数の名前を target としておきましょう そして= 先ほどの赤い枠の部分の html タグですね ID が red になっていましたので こちらを JavaScript から取得します document, getElementById そして(); そしてこのgetElementByIdの引数に ID redを書きます これで変数 target に ID redがついた p タグの要素が格納されました それでは次に実際に スタイルシートを変更してみましょう スタイルシートを変更するには このように書きます まず対象となる要素 今回は変数 target に含まれている ID red の pタグですね この変数 target と書いて . (ドット) そしてstyleと書きます そして. (ドット) そしてこのstyleの後に 変更したいスタイルシートの プロパティを書きます 例えば今回は文字の色を 変えてみたいと思います このスタイルシートのプロパティ 要するにCSSで使うものと同様のものです ですので このように color と書きます そして= そして変更したい内容に変えます まず ” ” で囲って; そしてその中に 例えば今回は文字の色を青にしたい場合は blue と書きます これでこの taget に格納されている ID red の p タグの文字の色が青に変わりました それではこの状態で 一度ファイルを保存します そしてブラウザで html ファイルを開いてみましょう ブラウザでこちらのファイルを開きます するとこのように文字の色が 青くなっていますね それではエディタに戻ります それでは次に文字のサイズを もう少し大きくしてみましょう 同様にtarget.style. そしてCSSプロパティ フォントサイズですね fontSizeと書きます ただしこの場合 一点注意していただきたいのは この fontsize の s ですが こちら大文字にする必要があります これはどうしてかと言いますと まずCSSファイルでこのファントサイズを 書く時というのは このように書きますね font−size; というように書きます これを JavaScript で利用する場合は こちらのハイフンを取って そしてその次の単語の一文字目を 大文字にするというルールがあります ですので今回のように fontSize こういう形になるわけですね それではここを= そして変更したいフォントサイズを書きます 例えば 30px としましょう そして;ですね この状態でファイルを保存します そしてブラウザで開いてみましょう するとこのように文字が 30px のサイズに 変更されました それではエディタに戻ります このようにスタイルシートを変更したい要素 そしてドットの後に style と書いて その後に CSS プロパティですね こちらを書いて = そして変更したい値を書くことによって JavaScript で動的にスタイルシートを 変更・設定することが可能です 以上でレッスンは終了です 今回は JavaScript で html 文書に書かれている html タグのスタイルシートを 設定・変更する方法について解説しました これを習得するとJavaScriptで 動的にwebページの見栄えを 変更することが可能となりますので しっかりとマスターしておきましょう

JavaScriptプログラミング入門講座

このコースではプログラミングを学んだことのない方でもわかるように、JavaScriptの基礎について順を追ってひとつひとつ解説していきます。またコースの後半ではHTMLの要素を書き換える方法や、指定した時間に処理を実行するタイマーの使い方などについても学びます。このコースを見てJavaScriptを使った動きのあるWebサイトを製作してみましょう!

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

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

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

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