目標

JavaScriptの醍醐味の1つは、CSSを動的に操作することができることである。
ここでは、JavaScriptからCSSを操作する方法について学ぶ。
また、HTML要素のプロパティへのアクセスについても学ぶ。

• CSSとJavaScriptのstyleオブジェクトの関係を理解できる。
• CSSのプロパティ名から、JavaScriptのstyleオブジェクトのプロパティ名を生成することができる。
• JavaScriptから適切にスタイルを変更することができる。
• JavaScriptから適切に要素のプロパティにアクセスできる。

CSS再び

CSSの文法とセレクタの指定方法

CSSでは、スタイルを羅列することによって文書の装飾をおこなっていく。
それぞれのスタイルの指定は、基本的には「どこを」「どうする」という形をしている。

セレクタ

「どこを」というのを指定するのがセレクタである。
HTML文書の中のどこ(スタイルを適用する対象の要素)を指定する場合には、色々な書き方があるが、一番簡単なのはHTMLの要素名をそのまま書くことである。
例えば「h1」と書けば、見出し1、つまりh1要素に対してスタイルが適用される。

CSSのセレクタの指定方法には様々な種類がある。
以下の表に、代表的なものをまとめる。

他にも様々な指定の方法があるので、自分で調べてみるとよいだろう。

宣言（プロパティと値）

CSSでは、「どこを」指定した後には、{ }で囲んで「どうする」を記述する。
これをスタイルの宣言と呼ぶ。
宣言はプロパティと値のセットになっており、「○○: ××」という形で記述する。
ここで、○○がプロパティ、xxがそのプロパティに設定する値である。
例えば、「color: blue」と書けば「文字色を青に設定する」という意味になる。
宣言が複数ある場合はセミコロンで区切って書く。
だたし、宣言が１つしか無い場合に最後に「;（セミコロン）」をつけても問題ない。
そのため、宣言の後にはセミコロンをつける習慣をつけておいた方がトラブルが少ない。

透明な箱

CSSで装飾を行う際に知っていると役に立つものとして、ボックスモデルといものがある。
これは要素が透明の箱でできているとみるものである。
p要素を例に考えてみよう。
以下の図では、縦横幅、枠線、外余白、内余白をCSSによって指定している。

p要素で囲んだ文字列「透明な箱の構造」が透明な箱の中にあるとする。
順番は前後するが、まず、箱の大きさは縦30px×横100pxで、枠線が赤色で太さ5pxの実線で書かれているものだとする。
ここで、枠線により透明だった箱の境界線がわかる。
この枠線から内側の、文字までの間にとることができる余白が内余白(padding)で、外側にとることができる余白を外余白(margin)と言う。

つまり、要素を箱のように考えると、外余白>枠線>内余白>中身(文字や画像など)という構造になっていることがわかる。

装飾の種類

CSSをうまく使うと、Webアプリケーションのデザインをかなり作り込むことができる。
まずは、基本的な装飾例を見ていきたい。
なお、今回は文字色や背景色を変えるときの色指定を、カラーコードで行う。
また、多くの場合、指定を無効にするためにはnoneを値に設定する。

背景色を変える (ID名bar1の票素)

p#bar1{ background: #ff1493; }

文字色を変える (ID名bar2の票素)

p#bar2{ color: #ff0000; }

フォントを装飾する

p#bar3{ font-weight: bold; }
p#bar4{ font-weight: lighter; }
p#bar5{ font-style: italic; }

テキストを装飾する

p#bar6 { text-decoration: underline; }
p#bar7 { text-decoration: overline; }
p#bar8 { text-decoration: line-through; }
p#bar9 { text-shadow: 3px 3px 2px #0000ff; }

テキストの位置

p#hoge10 { text-align: left; }
p#hoge11 { text-align: center; }
p#hoge12 { text-align: right; }

枠線をつける

p#hoge13 { border: 3px #000 solid; }

余白を指定(比較のために枠線と色をつけています)

p#hoge14 { margin: 10px; }
p#hoge15 { padding: 10px; }

新しい装飾の種類

現在使われているCSSは主として、CSS3 (CSS Level 3)と呼ばれるものである。
CSS3では、グラデーションや透過色、2D3D変形やアニメーションなどより細かな装飾の指定が可能となっている。

CSS3で新しく追加(採用)された機能は、ブラウザに実装されなければ使うことができない。
CSSの各機能は、長い策定過程の末に仕様が標準化される。
しかし、標準化されてからブラウザに実装されるのではなく、採用される予定の機能が各ブラウザで先行実装され、策定仕様に合わせてアップデートを繰り返すことが多い。
そのため、CSSで新しい機能が採用されてると、既に一般的なブラウザで使うことができるようになっていることも少なくない。
一方で、ブラウザが実装した機能がCSSの標準とならなかったため、あるいは仕様が異なってしまったため、思ったように装飾ができないこともある。

ここではこのような新しい機能について見ていきたい。

グラデーション

現在、linear-gradient()というグラデーションの機能が標準化されつつある。
これは色を指定する場面で使うことができる。
ただし、文字の色は変えられないなどの制限があるので注意が必要である。

p#bar16 {
  background: linear-gradient(white, gray);
}
p#bar17 {
  background: linear-gradient(to right, #ff0000, #fff);
}
p#bar18 {
  background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
}

円形グラデーションは、radial-gradient()を使う。

透明度を指定

透明度を指定するためには２つの方法がある。
予め色を指定する時に透明度を指定しておく方法と、色を指定してあとから透明度を指定する方法である。

色を指定する際に同時に透明度を指定するためには、rgba()を使う。
rgba()はrgb()に透明度を追加したバージョンであり、４つの引数をとる。
１つ目から３つ目までは、0〜255までの赤緑青の値であり、４つ目の引数が透明度で0〜1までの値をとる。

p#bar19 {
  background-color: rgba(0, 0, 255, 0.7);
}

後から透明度を指定するためには、opacityを使う。
opacityはプロパティとして使うことができる。
値は0〜1で、こちらは%表現が使えないので注意が必要である。

p#bar20 {
	background-color: #00ff00;
	opacity: 0.7 /* 透明度 */;
}	

アニメーション

CSSでアニメーションを実現することもできるようになる予定である。

div#bar21 {
  animation-name: anime1;
  animation-duration: 5s;
  animation-iteration-count: 10;
}

@keyframes anime1 {
  0% {width: 50px; height: 50px; background-color: aqua;}
  70% {width: 500px; height: 50px; background-color: blue;}
  100% {width: 50px; height: 50px; background-color: aqua;}
}

CSSとJavaScriptからの参照

これまで見てきたように、CSSを使うことによって様々にWebを装飾することができる。
この中にはアニメーションのような動きをもった装飾も含まれていた。
しかし、ここでいう動きをもった装飾は予め決められた動作しかできず、ユーザからの操作などによって動的に動きを変えるものではない。
ここでは、JavaScriptを使うことによって、表示しているページのCSSを動的に変更する方法について学ぶ。

要素の取得

まずは、JavaScriptのプログラムとCSSの関係について説明する。
CSSでは、セレクタを使って装飾する要素を指定し、それに対してプロパティを設定することで様々な装飾をおこなう。
JavaScriptでも基本的には同様で、ある要素を取得し、その要素に対するプロパティを操作する。

JavaScriptで要素を取得する方法については、既に学んだ getElementById()やgetElementsByClassName()、getElementsByTagName()などを使うことができる。
また、DOMのchildNodes[]やfirstChildで要素を取得しても良い。

実際の要素の取得の例を下記に示す。
全ての例において、変数eleに要素が入っている。

...
var ele = document.getElementById("id1234");
...

...
var eles = document.getElementsByTagName("h1");
var ele = eles[0];
...

...
var eles = document.getElementsByTagName("body");
var ele = eles[0].firstChild;
...

スタイルへのアクセス

JavaScriptでHTMLの要素を取得した後は、その要素のstyleプロパティを参照することによって、直接CSSにアクセスできる。
例えば、変数eleに要素が格納されているとすると、ele.styleでCSSにアクセスできる。
具体的には、色にアクセスする場合はCSSのプロパティ名はcolorなので、ele.style.colorとなる。
ただし、「-（マイナス記号）」を含むプロパティ名はそのまま使うことはできず（JavaScriptでは引き算と認識されてしまう）、「-」を削除した上で次の文字を大文字にする必要がある。
例えば、eleに格納されている要素の背景色（background-color）の場合は、ele.style.backgroundColorとなる。
その他の例を下記に示す。

JavaScriptによるCSSの操作

前節でJavaScriptからCSSを参照する方法について学んだ。
ここでは実際にJavaScriptからCSSを操作する方法を学ぶ。

といっても何も難しいことはなく、JavaScriptからの参照を使って値を代入することによって、スタイルを動的に変更することができる。
次の例を見てほしい。

<p id="p1234">ここの文字の色が変わります。</p>
<button onclick="changeStyle();">Click Me</button>

#p1234 {color: red;}

var size = 12;
var color = "red";

function changeStyle() {
  size = size + 1;
  if (color == "red") {
    color = "black";
  } else {
    color = "red";
  }

  var ele = document.getElementById("p1234");
  ele.style.fontSize = size + "px";
  ele.style.color = color;
}

ここの文字の色やフォントサイズが変わります。
Click Me

この例ではボタンが押されると、changeColor()関数が呼び出される。
changeColor()関数の中では始めのところで、変数sizeの値を1増やしている。
また次のif文では、変数colorの値が”red”の場合は値を”black”に、”black”の場合は”red”にしている。
その上で、要素のstyleを使ってそれぞれ、フォントのサイズと文字の色として設定している。
ここで、フォントサイズには “px” が単位として必要であることに注意が必要である。

<p class="aaa">要素1</p>
<p class="aaa bbb">要素2</p>
<p class="ccc aaa bbb">要素3</p>
<p class="aaa ccc bbb">要素4</p>
<p class="aaa bbb">要素5</p>

<div class="tabbox">
    <div class="tabs">
        <a class="tab1" onclick="ChangeTab1();">タブ1</a>
        <a class="tab2" onclick="ChangeTab2();">タブ2</a>
        <a class="tab3" onclick="ChangeTab3();">タブ3</a>
    </div>

    <div id="tab1" class="tab tab1">
        <p>これはタブ1です。</p>
    </div>

    <div id="tab2" class="tab tab2">
        <p>これはタブ2です。</p>
    </div>

    <div id="tab3" class="tab tab3">
        <p>これはタブ3です。</p>
    </div>
</div>