[e]GoogleChromeでBootstrapのタブメニューが動かない場合の対処法

この記事をかいた人

本業は整体師。大好きなGoProを始めとしたアクションカメラや動画編集、子育てなど、僕自身が体験した情報を発信しています!

今回Dropboxを簡易サーバーとして簡単なWebサイトを作る機会があったので、そのサイトにはCSSフレームワークであるTwitter Bootstrapを使用しました。

簡単なコードを打ち込むだけでTwitterっぽいデザインになるのがお気に入りです!むしろめちゃくちゃ好きです!

まあそれは置いておいて、今回はそんなTwitter bootstrapにまつわるトラブルとその対処法について紹介します。

Dropboxの簡易サーバーに関してはこちら。

合わせて読みたい!

[e]Dropboxをサーバー代わりに!Dropbox活用編

タブメニューが動かない!?

今回作ったサイトには、見た目が気に入ったタブメニューを採用しました。

クリックで中身が入れ替わるので、サイトが縦に長くならずに済むのが個人的に好みでした!

Dreamweaverでコーディングして、「さあブラウザテストだ!」チェックしました。

Safariは…完璧!

Firefoxは…最高!!

Chromeは…動かない!!!
…なぜだーー!

と本当に叫びそうになりました…。

なぜChromeだけ動かないのか?
よくよく見ると、アドレスバーの右端に見慣れないマークが…。

盾マーク

どうやら、「安全でない何か。」を感知しているようです。

警告分

しかもアドレスの「https」に赤線の打ち消し線もあります。

https打ち消し線

とりあえず色々と試しました!

SSLのサイトへ!

まずはこの意味を知ろうと、表示されたリンクへ飛びました。

その先はSSLについてのページ。

初心者の私には難しい内容ですが、要はリンクの記述が正しくないようです。

コードチェック

なので、HTMLにおかしなところはないか探しました。

リンクについてなので、imgタグやYouTubeの埋め込みリンクなどチェックしました!

しかしなかなか見つかりません。

諦めかけたその時…

気づいたのです!

スクリプトタグに!!

原因はjQueryのスクリプトタグ!

原因は、jQueryのスクリプトをCDN(Contents Delivery Network)で使っていたことでした。

スクリプトってそのスクリプトかー!?と強く感じました…。

下記の外部のサイト経由の記述だったのものを、

ルートディレクトリにスクリプトをダウンロードし、ローカルへのリンクに変更。

下記の記述に変えました。

これで試してみると、無事にタブメニューが動作しました!

分かりにくい場所でした…

Google先生に聞いたりして自分で調べたのですが、なかなか原因が見つかりませんでした。

確かにDropboxをサーバーとして使ったり、初心者がブーツストラップ使ったりとなかなか無い状況だったと思います。

意外なところに落とし穴がある、皆様もお気をつけください。

ナシタカ(@ehicalog)でした。

スポンサーリンク

スポンサーリンク