ライフハック

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

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

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

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

Dropboxの簡易サーバーに関してはこちら。
[kanren postid=”301″]

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

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

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

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

Safariは…完璧!

Firefoxは…最高!!

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

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

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

盾マーク

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

警告分

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

https打ち消し線

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

SSLのサイトへ!

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

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

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

コードチェック

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

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

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

諦めかけたその時…

気づいたのです!

スクリプトタグに!!

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

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

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

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

[crayon]<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>[/crayon]

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

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

[crayon]<script src="jquery-2.0.3.min.js"></script>[/crayon]

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

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

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

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

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

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

ABOUT ME
ナシタカ
GoProが大好きで子どもの撮影に愛用しています。 撮影した動画の編集も大好きなので動画編集についても紹介しつつ、自分が気に入ったものをどんどん紹介していきます。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です