1232 セレクタを使う (selector) CSS でスタイルを指定する時に セレクタ (selector) でスタイルを適用する対象を特定することができます セレクタには次のようなものがあります もうすでに使用してきた #box1 のような指定は id セレクタ と呼ばれるセレクタです また フォントの指定で使用してきた.font1 は class セレクタ と呼ばれるセレクタです セレクタ 要素型セレクタ ( タイプセレクタ ) 要素名 { プロパティ名 : 値 ; 要素名 (HTML 文書のタグ名と考えるとよいでしょう ) で スタイルを適用する対象を指定します 全称セレクタ ( ユニバーサルセレクタ ) * { プロパティ名 : 値 ; アスタリスク * を記述し すべての要素を対象としてスタイルが適用されます id セレクタ #id 名 { プロパティ名 : 値 ; HTML 文書で id 属性 ( id=" " ) によって id 名が付けられた要素 ( ボックス ) を対象にスタイルが適用されます 1つの HTML 文書内では同一 id 名称を重複して使用することはできません class セレクタ.class 名 { プロパティ名 : 値 ; HTML 文書で class 属性 ( class=" " ) によって class 名が付けられた要素 ( ボックス ) を対象にスタイルが適用されます class 属性は id 属性と違って 1 つの HTML 文書内で同 一 class 名称を重複して使用することができるので 複数の要素に同一 class 名を指定 して共通のスタイルを適用することができます 異なる種類の要素に対して同一 class 名を指定することもできます ですから 複数の要素に同一のプロパティを指定するような場合に それぞれの要素に 1
class 属性で同一 class 名を指定して CSS に class セレクタでプロパティを指定すれば それぞれの要素毎にプロパティを指定しなくても 同一プロパティが適用されます セレクタの優先順位について 要素に要素型セレクタ id セレクタ class セレクタの3つを指定し 同一のプロパティを異なった値で指定すると 次の優先順位でプロパティの値が適用されます セレクタの優先順位優先度高い優先度低い id セレクタ > class セレクタ > 要素型セレクタ ( 例 )div 要素に background-color: yellow; を指定しておき div 要素を hover したときに 要素型セレクタ id セレクタ class セレクタでそれぞれ次のように指定した場合 結果的に何色になるかを試してみました ( Selector1.html Selector1.css ) 要素型セレクタ (div) background-color: red; id セレクタ (#idselector) background-color: green; class セレクタ (.classselector) background-color: blue; 結果は background-color: green; が適用され id セレクタが最も優先されることがわかります 次に Selector1.css の id セレクタ (#idselector) の hover の指定をコメントアウトして試してみました ( Selector2.html Selector2.css ) 結果は background-color: blue; が適用され 要素型セレクタよりも class セレクタ が優先されることがわかります 2
ここでは 要素型セレクタや class セレクタに transition プロパティの指定をしてみまし ょう HTML の記述 (Selector1.html) <!DOCTYPE html> <html> <head> <title>selector1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="selector1.css"> </head> <body> <p> セレクタの優先順位 (1) </p> <div id="idselector" class="classselector"></div> </body> </html> CSS の記述 (Selector1.css) /* Selector1.css */ div { top: 100px; left: 100px; width: 100px; height: 100px; background-color: yellow; div:hover { background-color: red; #idselector:hover { background-color: green;.classselector:hover { background-color: blue; HTML の記述 (Selector2.html) <!DOCTYPE html> <html> <head> <title>selector2</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="selector2.css"> 3
</head> <body> <p> セレクタの優先順位 (2) </p> <div id="idselector" class="classselector"></div> </body> </html> CSS の記述 (Selector2.css) /* Selector2.css */ div { top: 100px; left: 100px; width: 100px; height: 100px; background-color: yellow; div:hover { background-color: red; /* #idselector:hover { background-color: green; */.classselector:hover { background-color: blue; class セレクタにスタイルを適用する利点について 複数の要素に指定するプロパティが同一でその値も同一の場合には それらの要素に 同一のクラス名を付加して スタイルシートに class セレクタでプロパティを指定す ると それぞれの要素にそのプロパティを記述する必要がないので スタイルシート が見やすくなると共に スタイルシートの節約にもなり メンテナンスも容易になり ます id 名を用いて複数の要素が同一プロパティを異なる値で指定されていて しかもそれ らの要素には同一 class 名が付加されている場合 class セレクタでそのプロパティの 値を変化させると 変化は同一 class 名のすべての要素に適用されて 同一の結果に なります これはアニメーションやトランジションで利用できそうです 例えば id 名が A B C の 3 つの div 要素がそれぞれ違う位置 ( 異なる top left の値 ) にある場合でも 同一 class セレクタで hover 時などの変化として top: 100px; left: 300px; と指定すると A B C の 3 つの div 要素が top: 100px; left:300px; を目指 して移動します 4
サンプル CSS 1 ピエロの玉乗りのトランジションで class セレクタを使用してピエロと玉を一緒に動かし てみましょう Class_PierrotOnBall の説明 HTML の記述 (Class_PierrotOnBall.html) id 属性 stage の div 要素 ( トランジションが動くステージ ) を作り その中にボックスや画像を記述します id 属性 button の div 要素を作ります これがボタン ( 親ボックス ) になります font1 クラスでフォントを指定し Hover を記述します id 属性 pierrot の div 要素 ( 子ボックス ) に class 属性で class 名 action を指定します (class="action") <img> タグで画像要素の記述をします 画像は "images/ Pierrot.png " を指定します 同様に id 属性 ball の div 要素 ( 子ボックス ) に class 属性で class 名 action を指定します ( class="action" ) <img> タグで画像要素の記述をします 画像は "images/ ColorWheel.png " を指定します <!DOCTYPE html> <html> <head> <title>class_pierrotonball</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="class_pierrotonball.css"> </head> <body> <p> class セレクタを活用して ピエロと玉を一緒に動かす </p> <div id="stage"> <div id="button"><font class="font28gothicb">hover</font> <div id="pierrot" class="action"> <img src="images/pierrot.png" alt="pierrot"> </div> <div id="ball" class="action"> 5
<img src="images/colorwheel.png" alt="color Wheel"> </div> </div> </div> </body> </html> CSS の記述 (Class_PierrotOnBall.css) 先ず トランジションが動く #stage の記述をします #stage { width: 600px; height: 300px; background-color: midnightblue; border: solid 1px black; position: relative; ボタンとなる #button ボックス ( 親ボックス ) を記述します position は absolute 位置 は top: 10px; left: 460px; で指定します 表示するテキストのフォントを指定します #button { top: 10px; left: 460px; width: 120px; height: 40px; border: solid 1px black; border-radius: 10px; background-color: red; text-align: center; color: black; line-height: 50px; cursor: default;.font28gothicb { font: bold 28px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; 画像 (images/pierrot.png) を入れる #pierrot ボックス ( 子ボックス ) を記述します position は absolute にして 位置は #button ボックス ( 親ボックス ) に の指定があるので top: 60px; left: -439px;(#button ボックスの左上端を基準とした位置 ) で指定します 6
#pierrot { top: 60px; left: -439px; width: 88px; height: 117px; #pierrot img { top: 0px; left: 0px; width: 100%; height: 100%; 画像 (images/ ColorWheel.png) を入れる # ball ボックス ( 子ボックス ) を記述します 位置は top: 173px; left: -445px; で指定します #ball { top: 173px; left: -445px; width: 100px; height: 100px; #ball img { top: 0px; left: 0px; width: 100%; height: 100%; class セレクタ (.action) にピエロとボールの動きの transition を指定します left プ ロパティを 5 秒で ease-in-out transform プロパティを 5 秒で ease-in-out でトランジ ションするように記述します /* class セレクタ (.action) にピエロとボールの動きの transition を指定しておく */.action { transition: left 5s ease-in-out, transform 5s ease-in-out; -webkit-transition: left 5s ease-in-out, -webkit-transform 5s ease-in-out; #button ボックス ( ボタン ) を hover したら #button ボックスの背景色を green に変化さ せます #button:hover { background-color: green; #button ボックス ( ボタン ) を hover した時の変化として # ball ボックスに transform 7
プロパティで rotatez(720deg) を指定しておいて 時計回りで 2 回転させます さらに class セレクタ (.action) を使用して ピエロとボールを left: 25px;(#button ボックス の左上端を基準とした位置 ) まで一緒に動かします #button:hover #ball { transform: rotatez(720deg); -webkit-transform: rotatez(720deg); /* class セレクタ (.action) を使用して ピエロとボールを一緒に動かす */ #button:hover.action { left: 25px; サンプル CSS 2 消滅するボールのトランジションで class セレクタを使用して複数のボールを一点に集め て消滅させてみましょう Class_VanishingDots の説明 HTML の記述 (Class_VanishingDots.html) id 属性 stage の div 要素 ( トランジションが動くステージ ) を作り その中にボックスを 記述します id 属性 button の div 要素を作ります これがボタン ( 親ボックス ) になります font28gothicb クラスでフォントを指定し Hover を記述します id 属性 dot01 ~ dot12 の div 要素 ( 子ボックス ) を 12 個記述し それぞれに class 属 性で class 名 dots を指定します (class=" dots") 8
<!DOCTYPE html> <html> <head> <title>class_vanishingdots</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="class_vanishingdots.css"> </head> <body> <p> class セレクタを活用して点を変形し 画面中央に集め消滅させる </p> <div id="stage"> <div id="button"><font class="font28gothicb">hover</font> <div id="dot01" class="dots"></div> <div id="dot02" class="dots"></div> <div id="dot03" class="dots"></div> <div id="dot04" class="dots"></div> <div id="dot05" class="dots"></div> <div id="dot06" class="dots"></div> <div id="dot07" class="dots"></div> <div id="dot08" class="dots"></div> <div id="dot09" class="dots"></div> <div id="dot10" class="dots"></div> <div id="dot11" class="dots"></div> <div id="dot12" class="dots"></div> </div> </div> </body> </html> CSS の記述 (Class_VanishingDots.css) 先ず トランジションが動く #stage の記述をします #stage { width: 600px; height: 500px; background-color: black; border: solid 1px black; position: relative; ボタンとなる #button ボックス ( 親ボックス ) を記述します position は absolute にして 位置は ボタンが stage の中心に位置するように top: 230px; left:240px; で指定します ボタンに表示するテキストのフォントの指定をします #button { top: 230px; left:240px; width: 120px; height: 40px; border: solid 2px gray; 9
border-radius: 10px; text-align: center; color: gray; line-height: 40px; cursor: default;.font28gothicb { font: bold 28px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; div 要素 #dot01 ボックス ( 子ボックス )~ #dot12 ボックス ( 子ボックス ) については top left width height background-color border-radius をそれぞれ違う値で記述し stage 上に大きさや色の違う点が散らばるように指定します top と left は (#button ボックスの左上端を基準とした位置 ) で指定します #dot01 { top: -60px; left: -200px; width: 50px; height: 50px; background-color: red; border-radius: 25px; #dot02 { top: 100px; left: 220px; width: 100px; height: 100px; background-color: blue; border-radius: 50px; #dot03 { top: -200px; left: 200px; width: 50px; height: 50px; background-color: gray; border-radius: 25px; #dot04 { top: 200px; left: 100px; width: 50px; height: 50px; background-color: pink; border-radius: 25px; 10
#dot05 { top: 120px; left: -220px; width: 50px; height: 50px; background-color: orange; border-radius: 25px; #dot06 { top: -150px; left: 30px; width: 80px; height: 80px; background-color: darkviolet; border-radius: 40px; #dot07 { top: -220px; left: -100px; width: 50px; height: 50px; background-color: sandybrown; border-radius: 25px; #dot08 { top: 80px; left: 30px; width: 30px; height: 30px; background-color: green; border-radius: 15px; #dot09 { top: -100px; left: 200px; width: 120px; height: 120px; background-color: yellow; border-radius: 60px; 11
#dot10 { top: 160px; left: -100px; width: 80px; height: 80px; background-color: cyan; border-radius: 40px; #dot11 { top: 50px; left: -140px; width: 80px; height: 80px; background-color: magenta; border-radius: 40px; #dot12 { top: -120px; left: -120px; width: 100px; height: 100px; background-color: lightgreen; border-radius: 50px; class セレクタ (.dots) に点の動きの transition を指定します top プロパティ left プロパティ width プロパティ height プロパティ transform プロパティを transitionduration はすべて 3 秒で transition-timing-function はすべて ease-in でトランジションするように記述します /* class セレクタ (.dots) に点の動きの transition を指定しておく */.dots { transition: top 3s ease-in, left 3s ease-in, width 3s ease-in, height 3s ease-in, transform 3s ease-in; -webkit-transition: top 3s ease-in, left 3s ease-in, width 3s ease-in, height 3s ease-in, -webkit-transform 3s ease-in; #button ボックス ( ボタン ) を hover したら #button ボックスの border-color とテキス トの色を black にして隠します #button ボックス ( ボタン ) を hover した時の変化として class セレクタ (.dots) を使 12
用して top: 20px; left: 60px;(#button ボックスの左上端を基準とした位置 ) および width: 0px; height: 0px; を指定して 散在する点を #button ボックスの中心 (stage の 中心に当たる位置 ) に集約し消滅させます #button:hover { border-color: black; color: black; /* class セレクタ (.dots) を使用して 複数の点を一緒に動かす */ #button:hover.dots { top: 20px; left: 60px; width: 0px; height: 0px; サンプル CSS 3 画像のトランジションで 要素型セレクタ ( img ) を使用して複数の画像の大きさを同時 に変化させてみましょう Tag_EnsmallImages の説明 HTML の記述 (Tag_EnsmallImages.html) id 属性 stage の div 要素 ( トランジションが動くステージ ) を作り その中にボックスを 記述します 13
id 属性 button の div 要素を作ります これがボタン ( 親ボックス ) になります font28gothicb クラスでフォントを指定し Hover を記述します div 要素 ( 子ボックス ) を次のように4つ記述し それぞれの div 要素の中に <img> タグ で画像を記述します 要素 id 名 画像名称 div image01 images/dsc00027m.jpg div image02 images/dsc00084m.jpg div image03 images/dsc00178m.jpg div image04 images/dsc00198m.jpg <!DOCTYPE html> <html> <head> <title>tag_ensmallimages</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="tag_ensmallimages.css"> </head> <body> <p> tag セレクタを活用して 複数画像を 1 度に縮小表示する </p> <div id="stage"> <div id="button"><font class="font28gothicb">hover</font> <div id="image01"> <img src="images/dsc00027m.jpg" alt="wall paint"></div> <div id="image02"> <img src="images/dsc00084m.jpg" alt="cherry road"></div> <div id="image03"> <img src="images/dsc00178m.jpg" alt="bricks"></div> <div id="image04"> <img src="images/dsc00198m.jpg" alt="paper fish"></div> </div> </div> </body> </html> CSS の記述 (Tag_EnsmallImages.css) 先ず トランジションが動く #stage の記述をします #stage { width: 600px; height: 500px; background-color: black; border: solid 1px black; position: relative; ボタンとなる #button ボックス ( 親ボックス ) を記述します position は absolute にして 14
位置は top: 10px; left:460px; で指定します ボタンに表示するテキストのフォントの指 定をします #button { top: 10px; left:460px; width: 120px; height: 40px; border: solid 2px #CCCCCC; border-radius: 10px; text-align: center; color: #CCCCCC; line-height: 50px; cursor: default;.font28gothicb { font: bold 28px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; div 要素 #image01 ボックス ( 子ボックス )~ #image04 ボックス ( 子ボックス ) について は top left を違う値で記述し stage 上に 2 つずつ 2 段に並ぶように指定します top と left は (#button ボックスの左上端を基準とした位置 ) で指定します #image01 { top: 50px; left: -445px; width: 280px; height: 210px; #image02 { top: 50px; left: -155px; width: 280px; height: 210px; #image03 { top: 270px; left: -445px; width: 280px; height: 210px; #image04 { top: 270px; left: -155px; width: 280px; height: 210px; 要素型セレクタ (img) に点の動きの transition を指定します transform プロパティを transition-duration は 3 秒で transition-timing-function は ease-in でトランジショ ンするように記述します 15
/* img タグに画像の動きの transition を指定しておく */ img { transition: transform 3s ease-in; -webkit-transition: -webkit-transform 3s ease-in; #button ボックス ( ボタン ) を hover したら #button ボックスの border-color とテキストの色を暗くして隠します #button ボックス ( ボタン ) を hover した時の変化として 要素型セレクタ (img) を使用して 4つの画像のサイズが 0 になるように変化させます #button:hover { border-color: #555555; color: #555555; /* img タグを使用して 画像を一緒に縮小する */ #button:hover img { transform: scale(0, 0); -webkit-transform: scale(0, 0); サンプル CSS 4 テキストのトランジションで 要素型セレクタ ( font ) を使用して 複数の文字の色と 大きさを 時間差を持たせて変化させてみましょう 16
Tag_ChangeFont の説明 HTML の記述 (Tag_ChangeFont.html) id 属性 stage の div 要素 ( トランジションが動くステージ ) を作り その中にボックスを 記述します id 属性 button の div 要素を作ります これがボタン ( 親ボックス ) になります font28gothicb クラスでフォントを指定し Hover を記述します div 要素 ( 子ボックス ) を次のように4つ記述します 要素 id 名 class 名 テキスト div text01 font01 あ div text02 font02 イ ( 全角 ) div text03 font03 1 ( 全角 ) div text04 font04 A ( 全角 ) <!DOCTYPE html> <html> <head> <title>tag_changefont</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="tag_changefont.css"> </head> <body> <p> 要素型セレクタを活用して フォントを一括して変更する </p> <div id="stage"> <div id="button"><font class="font28gothicb">hover</font> <div id="text01"><font class="font01"> あ </font></div> <div id="text02"><font class="font02"> イ </font></div> <div id="text03"><font class="font03">1</font></div> <div id="text04"><font class="font04">a</font></div> </div> </div> </body> </html> CSS の記述 (Tag_ChangeFont.css) 先ず トランジションが動く #stage の記述をします #stage { width: 600px; height: 500px; background-color: black; border: solid 1px black; position: relative; 17
ボタンとなる #button ボックス ( 親ボックス ) を記述します position は absolute にして 位置は top: 10px; left:460px; で指定します ボタンに表示するテキストのフォントの指 定をします #button { top: 10px; left:460px; width: 120px; height: 40px; border: solid 2px #CCCCCC; border-radius: 10px; text-align: center; color: #CCCCCC; line-height: 50px; cursor: default;.font28gothicb { font: bold 28px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; div 要素 #text1 ボックス ( 子ボックス )~ #text4 ボックス ( 子ボックス ) については top left を違う値で記述し stage 上に2つずつ2 段に並ぶように指定します top と left は (#button ボックスの左上端を基準とした位置 ) で指定します それぞれのボックスの中に入れるテキストのフォントを class セレクタ.font1 ~.font4 で指定します テキスト色は下記のように指定します それぞれの class セレクタにテキストの変化の transition を指定します transitionproperty は all transition-duration はすべて 3 秒で transition-timing-function は すべて ease-in でトランジションするように記述します id 名 class 名テキスト色 (color) 変化の速度 (transition-duration) #text01.font01 red 0.5s #text02.font02 yellow 1s #text03.font03 blue 1.5s #text04.font04 green 2s #text01 { top: 50px; left: -445px; width: 280px; height: 210px; text-align: center;.font01 { color: red; font: bold 180px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; 18
line-height: 200px; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; #text02 { top: 50px; left: -155px; width: 280px; height: 210px; text-align: center;.font02 { color: yellow; font: bold 180px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 200px; transition: all 1s linear; -webkit-transition: all 1s linear; #text03 { top: 270px; left: -155px; width: 280px; height: 210px; text-align: center;.font03 { color: green; font: bold 180px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 200px; transition: all 1.5s linear; -webkit-transition: all 1.5s linear; #text04 { top: 270px; left: -445px; width: 280px; height: 210px; text-align: center;.font04 { color: blue; font: bold 180px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 200px; 19
transition: all 2s linear; -webkit-transition: all 2s linear; #button ボックス ( ボタン ) を hover したら #button ボックスの border-color とテキストの色を暗くして隠します #button ボックス ( ボタン ) を hover した時の変化として 要素型セレクタ (font) を使用して 4つのテキスト色を magenta に変化させ それぞれのテキストが時間差を持ってサイズが小さくなるように変化させます 注 : このときボタンのフォントは変化の影響を受けないように class セレクタ (.font28gothicb) を使用して要素型セレクタ (font) より優先的に変化させています #button:hover { border-color: #555555; /* button は font の一括変更の影響を受けないようにする */ #button:hover.font28gothicb { font-size: 28px; line-height: 40px; color: #555555; /* font Tag を使用して フォントを一括して変更する */ #button:hover font { color: magenta; font-size: 24px; line-height: 250px; 20