HTMLで複数のclassを指定する

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

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

つまずいたポイント

【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

仮説

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

検証

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

原因

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

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

解決方法

1. そのままで問題なし

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