目標
JavaScriptの醍醐味の1つは、CSSを動的に操作することができることである。
ここでは、JavaScriptからCSSを操作する方法について学ぶ。
また、HTML要素のプロパティへのアクセスについても学ぶ。
- CSSとJavaScriptのstyleオブジェクトの関係を理解できる。
- CSSのプロパティ名から、JavaScriptのstyleオブジェクトのプロパティ名を生成することができる。
- JavaScriptから適切にスタイルを変更することができる。
- JavaScriptから適切に要素のプロパティにアクセスできる。
CSS再び
CSSの文法とセレクタの指定方法
CSSでは、スタイルを羅列することによって文書の装飾をおこなっていく。
それぞれのスタイルの指定は、基本的には「どこを」「どうする」という形をしている。
セレクタ
「どこを」というのを指定するのがセレクタである。
HTML文書の中のどこ(スタイルを適用する対象の要素)を指定する場合には、色々な書き方があるが、一番簡単なのはHTMLの要素名をそのまま書くことである。
例えば「h1」と書けば、見出し1、つまりh1要素に対してスタイルが適用される。
CSSのセレクタの指定方法には様々な種類がある。
以下の表に、代表的なものをまとめる。
| 指定方法 | 説明 |
|---|---|
| * { color:red; } | すべての要素にスタイルを適応 |
| div { color:red; } | HTML文書内のすべてのdiv要素にスタイルを適用 |
| div* { color:red; } | 要素内の要素すべてにスタイルを適応(div要素の中に書いたもの全部) |
| div#hoge { color:red; } | id名hogeのdiv要素にスタイルを適応 |
| div.fuga { color:red; } | class名fugaのdiv要素すべてにスタイルを適応 |
| h1, h2 { color:red; } | 指定した複数の要素にスタイルを適応 |
| div#hoge p { color:red; } | id名hogeのdiv要素の中にあるp要素にスタイルを適応(子孫セレクタ) |
| div:hover { color:red; } | [擬似クラス]カーソルが乗っている要素にスタイルを適応 |
| a:link { color:red; } | [擬似クラス]未訪問のリンク要素にスタイルを適応 |
| a:visited { color:red; } | [擬似クラス]訪問済のリンク要素にスタイルを適応 |
他にも様々な指定の方法があるので、自分で調べてみるとよいだろう。
宣言（プロパティと値）
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; }
枠線:3pxの太さで黒で実線
余白を指定(比較のために枠線と色をつけています)
p#hoge14 { margin: 10px; }
p#hoge15 { padding: 10px; }
外余白:10px
枠線から文字までの間が内余白: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);
}
alpha=0.9
alpha=0.7
alpha=0.5
alpha=0.3
alpha=0.1
後から透明度を指定するためには、opacityを使う。
opacityはプロパティとして使うことができる。
値は0〜1で、こちらは%表現が使えないので注意が必要である。
p#bar20 {
background-color: #00ff00;
opacity: 0.7 /* 透明度 */;
}
0.9
0.7
0.5
0.3
0.1
アニメーション
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;}
}
| プロパティ | 説明 |
|---|---|
| animation-name | アニメーション名を指定する |
| animation-duration | アニメーション一回分の時間の長さを指定する |
| animation-iteration-count | アニメーションの繰り返し回数を指定する |
| animation-delay | アニメーションがいつ始まるかを指定する |
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となる。
その他の例を下記に示す。
| CSS | JavaScript |
|---|---|
| color | color |
| display | display |
| background-color | backgroundColor |
| text-size | textSize |
| text-align | textAlign |
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;
}
ここの文字の色やフォントサイズが変わります。
この例ではボタンが押されると、changeColor()関数が呼び出される。
changeColor()関数の中では始めのところで、変数sizeの値を1増やしている。
また次のif文では、変数colorの値が”red”の場合は値を”black”に、”black”の場合は”red”にしている。
その上で、要素のstyleを使ってそれぞれ、フォントのサイズと文字の色として設定している。
ここで、フォントサイズには “px” が単位として必要であることに注意が必要である。
練習問題6-
下記のように、文章をクリックすると取り消線が引かれたり、消えたりするプログラムを作成しなさい。
ここをクリックすると取り消し線が引かれたり消えたりする。
練習問題6-
次のようなHTMLがあるとき、cccを含んだ要素、aaaとbbbを含んだ要素の背景色を入力エリアに入力した色に変更するボタンを作成しなさい。
ただし、ボタンを押したときにはまずは初期状態に戻すこと。
<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>
要素1
要素2
要素3
要素4
要素5
色:
練習問題6-
下記のように、タブのような動きをするプログラムを作成しなさい。
ヒント1: HTML部は下記のとおりである。
<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>
ヒント2: タブを横に並べるためには、floatプロパティをleftにする。
ヒント3: タブの上の角を丸くするためには、border-radiusプロパティを適切に設定する。
ヒント4: スタイルでdisplayプロパティをnoneにするとその要素が表示されなくなる。displayプロパティをblockにすると表示される。
