読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

cssセレクタの指定方法 復習

jQuery HTML5+CSS3

jQueryの勉強を進めていく上で、cssでのセレクタの取り方の重要性を改めて感じたと思います。
jQueryやCSS3が上手く動かない理由の多くは実はcssセレクタが正しく指定出来ていない、だったりします。この機会にもう1度cssでのセレクタの指定方法を確認しましょう。


まずはセレクタをしっかりと理解しましょう。
f:id:yachin29:20161202113143p:plain

(すべての要素に適用)

アスタリスク(*)ですべての要素にスタイルを適用することができます。

* {
  color:red;
}


この場合、p要素の中にある要素すべてに適用されます。

p * {
  color:red;
}
.〇〇

クラス名を指定した要素にスタイルが適用されます。

<p class="sample">テキストテキスト<p>
.sample {
  font-size:18px;
  color:red;
}
#〇〇

ID名を指定した要素にスタイルが適用されます。

<p id="sample">テキストテキスト<p>
#sample {
  font-size:18px;
  color:red;
}
E F (子孫要素に適用)

セレクタを半角スペースで区切ると、ある要素の下の階層にある要素にスタイルを適用します。

html

<p><strong>テキスト</strong></p>
p strong {
  font-size:16px;
}

pタグの中にあるstrong要素に適用されます。


E > F (子要素にのみ適用)

セレクタを「>」で区切ると、ある要素の直下の階層にある要素にスタイルを適用します。

<div class="sample">
  <a href="#">リンク1<a/>
  <ul>
    <li><a href="#">リンク1<a/></li>
  </ul>
<div>
div.sample > a {
  font-size:18px;
  font-weight:bold;
}

クラス名sampleの直下にあるa要素にのみ適用されます。


その他にも

E + F (隣接している要素に適用)
E ~ F (後にある要素に適用【CSS3】)

などもあります。


確認問題

下記にある既存のjQueryをそのまま使い、以下の動きになるようにHTML・CSSを完成させなさい

  • ボタンを押したら300pxの正方形が1秒かけて右下に200px移動
  • 背景色が青から赤になるように
  • アニメーションのタイミングファンクションは「linear」に設定
  • 変形後、もう1度クリックしたら、初期状態に戻るように設定
  • 変形中、ボタンをクリックしても命令を受け付けないように既存のjQueryに記述を追加する


使うjQuery

$(function(){
$('button').on('click', function(){
  $('#box').toggleClass('trans');
});
});