エラー対策

Bootstrapのサンプルが動かない!?

お疲れ様です!久々の投稿ですね。
この間Bootstrapを触る機会があったのですが、その際にしょうもない理由でハマってしまいました。
せっかくなので、自分を戒めるためにも記事にしてみようと思います。

Bootstrapとは?

簡単に言いますと、HTML・CSS・JavaScriptで構成されたWeb用のフレームワークです。
Wikipediaでは以下のように説明されています。

BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。 タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。

詳しくは公式ページを参照ください。

サンプルが動かない?!

以下のようなサンプルを触って、いわゆるアコーディオンメニューの動作を確認しようとしましたが、どうもうまくいきません。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <title>アコーディオンテスト</title>
</head>
<body>
    <p>
        <a class="btn" data-toggle="collapse" href="#collapseTest" role="button" aria-expanded="false" aria-controls="collapseTest">
            href要素でアコーディオンメニュー!
        </a>
        <button class="btn" type="button" data-toggle="collapse" data-target="#collapseTest" aria-expanded="false" aria-controls="collapseTest">
            button要素でアコーディオンメニュー!
        </button>
    </p>
    <div class="collapse" id="collapseTest">
        <div class="content">
            隠れていたコンテンツが表示されます。
        </div>
    </div>
</body>
</html>

どうしたものかとあちこちのサイトを確認して回ったのですが、わからずじまいでどうしようかと諦めかけたその時、足りない要素があることに気づきました!
こちらのlink要素が足りなかったのです!!!

<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css”>

こちらを追加したところ、サンプルは何事もなかったかのように動きました。。
気づかなかった。。

終わりに

気づいてみればすごく単純なことで、かなり時間を無駄にしてしまいました。。
ですが、これで次からは悩むことなくスムーズに作業を進められると思います。

Bootstrap4の機能を網羅した本もありますので、勉強し直そうと思います!

それでは、今日はこのあたりでおしまいです!