HTMLで複数のclassを指定する

2017年11月28日 2017年11月28日

ProgateでjQueryの勉強をしていた時にBootstrapも使ってカルーセルスライダーを作っていたのですがclassの指定がよくわからなくなってつまずいてしまいました。

jQueryもBootstrapもしっかり使ったのは初めてだったので、どこに原因があるか少し悩んでしまったのですが、よく考えたら理由はすごく単純で簡単に解決してしまいました。

Contents

1 つまずいたポイント
- 1.1 仮説
- 1.2 検証
2 原因
3 解決方法

つまずいたポイント

【script.js】の【$(‘.carousel’)】が具体的に【index.html】内のどのclassを指定しているのかがよくわからなかった。

index.html

<div id="student-carousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#student-carousel" data-slide-to="0" class="active"></li> <li data-target="#student-carousel" data-slide-to="1"></li> <li data-target="#student-carousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="student-box item active">

1
2
3
4
5
6
7
8

<div id="student-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
  <li data-target="#student-carousel" data-slide-to="0" class="active"></li>
  <li data-target="#student-carousel" data-slide-to="1"></li>
  <li data-target="#student-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
  <div class="student-box item active">

script.js

$('.carousel').carousel({ interval: 2500 });

1
2
3

$('.carousel').carousel({
interval: 2500
});

引用：jQuery 実践コース Ⅰ | プログラミングの入門なら基礎から学べるProgate

仮説

class指定の問題なので【class=”carousel slide”】の【carousel】を変更したらエラーが出るはず。

検証

変更した結果、予想通りエラーが出てカルーセルスライダーが動かなくなりました。

原因

HTMLでのclassの複数指定の記述方法を理解していなかった。

<!-- carouselとslideの2つのclassが記述されている -->
class="carousel slide"

1 2	<!-- carouselとslideの2つのclassが記述されている --> class="carousel slide"

（いや・・・ここに書いてある通りそのままだし【（半角スペース）】空いてるし【-（ハイフン）】や【_（アンダースコア）】入ってないし）

<!-- carousel-slideという1つのclassが記述されている -->
class="carousel-slide"

1 2	<!-- carousel-slideという1つのclassが記述されている --> class="carousel-slide"

解決方法

そのままで問題なし

これまで同じ様なものを散々見てきたはずなのに意外と初めてclassの複数指定の記述方法をはっきり意識して知りました。慣れって怖い。