【CSS】 BootstrapのCDNをインポートしてデザインが大幅に変わってしまったら

この記事の概要

BootstrapをCDN経由でインストールしたら、CSSがおかしくなって、デザインが大幅に変わったという話。この場合はCSSの優先順位を確認しよう。

目次

  • この記事の概要
  • 目次
  • Bootstrapとは？
  • Bootstrapのインストール方法
  • 発生した問題
  • 解決法
  • 参考文献

Bootstrapとは？

BootstrapとはTwitter社のMark Otto, Jacob Thorntonによって、2011年に開発されたCSSフレームワークであり、モバイルとWebのメディアクエリの設定が容易かつデザインのオシャレさにも定評があるため、世界で最も人気のあるCSSフレームワークとして世界中のWebデベロッパーから利用されている。

以下、公式ページより抜粋。
世界で最も人気のあるフロントエンドコンポーネントライブラリを使用して、レスポンシブなモバイルファーストプロジェクトをウェブ上に構築します。
Bootstrapは、HTML、CSS、およびJSで開発するためのオープンソースのツールキットです。Sassの変数とミックスイン、レスポンシブグリッドシステム、豊富なビルド済みコンポーネント、jQueryで構築された強力なプラグインを使用して、アイデアをすばやくプロトタイプ化したり、アプリ全体を構築したりできます。
Bootstrap公式ページ https://getbootstrap.com/ より 

Bootstrapのインストール方法

Bootstrapをインストールするには2種類方法があり、1つ目は公式からテンプレートをダウンロードして、ローカルフォルダに展開する方法。そしてこのページでは、CDN経由でBootstrapを読み込む方法を解説する。

BootstrapをCDN経由でインストールするメリットとしては、無駄なファイルをネットワーク経由でインポートする必要がないため、前者の方法と比較して、フォルダの容量を軽くすることが出来る点などがある。

注意だが、Bootstrapはそのバージョンによってコード・できることに差異があるので、主流な3系と4系を比較して、どちらのフレームワークを採用するかを考えないといけない。

続いて、ダウンロードする方法は以下の通り。

今回はこの記事を執筆した2020/3/25現在、一番最新版であるver.4.4.xを導入する際の手順である。

①<head>タグ内に、こちらのコードをコピペ。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

②</body>タグ直前に
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
の以上3つのコードをコピペするだけ。

あとはBootstrapの日本語リファレンスに従ってhttps://getbootstrap.jp/docs/4.3/getting-started/introduction/　の通りにタグを設定していくだけである。

発生した問題

ヘッダー付きのWebアプリケーションを開発しようとして、こんなサイトを作った。
[図1] 現在のサイト

<赤header>がヘッダー、<青divセクション>がコンテンツになる予定である。

Bootstrap導入前のサイトは以下のコードのような感じ。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>testAPP</title>
<style>

*{
    padding: 0;
    margin: 0;
}

body{
    background-color: #00A2CC;
}

header{
    z-index: 99999;
    position: fixed;
    height: 200px;
    width: 100%;
    background-color: red;
    }
    
    .wrapper{
        padding-top: 200px;
}

</style>

</head>
<body>
<header>
aaa
</header>
<div class="wrapper">
ほげ
</div>

</script>
</body>
</html>

このコードに、 Bootstrapを書き足して、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>testAPP</title>
<style>

*{
    padding: 0;
    margin: 0;
}

body{
    background-color: #00A2CC;
}

header{
    z-index: 99999;
    position: fixed;
    height: 200px;
    width: 100%;
    background-color: red;
    }
    
    .wrapper{
        padding-top: 200px;
}

</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

</head>
<body>
<header>
aaa
</header>
<div class="wrapper">
ほげ
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
みた。

すると、
[図2] 表示がおかしい
bodyに設定されたbackground-colorの色が、白色になってしまっている。

解決法

理由は簡単。
<style>

*{
    padding: 0;
    margin: 0;
}

body{
    background-color: #00A2CC;
}

header{
    z-index: 99999;
    position: fixed;
    height: 200px;
    width: 100%;
    background-color: red;
    }
    
    .wrapper{
        padding-top: 200px;
}

</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">





<head>セクションのcssには、優先順位というものがあり、基本的に下に書かれたコードの方が優先順位が高い。つまり、仮に相反するコード

color: red;
color: blue; //こっちが採用される

があれば、必然的に下のコードが採用されるようになってるのだ。

今回の場合も<head>の中に記述したコードが、Bootstrapの方が下になっているため、Bootstrapの「背景色を白にしろ」という命令が優先されたためである。

そこで、Bootstrapのコードを<style>の上に持っていくことで、バグは解消された。

コード全文


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>testAPP</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>

*{
    padding: 0;
    margin: 0;
}

body{
    background-color: #00A2CC;
}

header{
    z-index: 99999;
    position: fixed;
    height: 200px;
    width: 100%;
    background-color: red;
    }
    
    .wrapper{
        padding-top: 200px;
}

</style>

</head>
<body>
<header>
aaa
</header>
<div class="wrapper">
ほげ
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>


まとめ

CSSの挙動がおかしい時は、CSSの優先順位を確認しましょう。

参考資料


・Bootstrap公式ページ
https://getbootstrap.com/

・Bootstrap　日本語リファレンス
https://getbootstrap.jp/docs/4.3/getting-started/introduction/

コメント

コメントを投稿

このブログの人気の投稿

【Unity】シーンギズモがデフォルトで表示されない時

イメージ
こんにちは。 先日から Unityを触り始めている私（てぃー）です。 さて、  Unityではデフォルトで表示されている「シーンギズモ」ですが、 新規プロジェクトを立ち上げたところ、表示されていなくて困りました。 ggっても解決策が出てこない...どころか、 シーンギズモっていう単語を使っているページ・解説しているページが出てこない！笑（unity 3dのofficial documentを除く） そう言う訳でちょっと困りましたので、解決策を簡単にまとめてみました〜。 ◇ 目次 ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ 　1. シーンギズモってそもそもなんやねん？って話 　2. 解決策 　3. まとめ 　1. シーンギズモってそもそもなんやねん？って話 [図]シーンギズモ シーンギズモはデフォルトのプロジェクトを立ち上げた時に、画面（画面というよりかはScene）の右上に出てくる図のような物体です。赤色・緑色・青色の三角コーンから成立しています。 シーンギズモはとても便利で、「y」とラベルが貼られた緑色のコーンをクリックすると、現在sceneで製作中のオブジェクトを上面から見ることが出来ます。 こう言う風に、[x],[y],[z]の、3つの軸からsceneを見ることができる優れものなんです。 　2. 発生している現象と解決策 [図]発生している現象 新規プロジェクトを作ろうとした時に、シーンギズモがデフォルトで表示されるようになるはずだ・・・と思いきや、表示されていなくて困りました。 前述したとおり、色々探したんですが解決策が見つからなくて困った・・・。 [図]解決策 で、どうやって解決したかというと。 [scene]バーにある[2D]ボタンを押すことです！ sceneの上部を見ると、デフォルトだと[Shaded]ってなってる場所と、電球やらなんやらのアイコンがある場所のちょうど間に、[2D]ボタンがありますよね！ これがオンになっていると、シーンギズモは出てこないみたいです。 　3. まとめ でも、なんで2Dモードがオンになってたんだろう・・・と考えていたのですが、 そういえば自分、こ...
続きを読む

【Swift4】argument passed to call that takes no arguments の解決策

イメージ
今日、Swiftでじゃんけんアプリを作っていた時に、この「 argument passed to call that takes no argument s 」というエラーが出たのでエラーが出た状況と解決策をまとめていこうと思う。 argument passed to call that takes no arguments ◇ 目次 ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ 　1. 実現しようとした事 　2. Argument Passed to call that takes no argumentsとはどんなエラー？　 　3. 解決策     4. まとめ 　1. 実現しようとした事 [図] myJankenViewControllerで発生したエラーの詳細  import UIKit   class myJankenViewController: UIViewController {       var selectedNumber: Int ( arc4random ( 2 ))                              !   Argument passed to call that takes no arguments     （以下省略）  } 「グー」「チョキ」「パー」の３種類の出目をCPUが出してくれる、そんなじゃんけんアプリを作っていたのだが、 相手のCPUの出目をarc4random関数で指定してあげようと思ったところ、このようなエラーが出てしまった。 　2.  Argument Passed to call that takes no arguments とはどんなエラー？　 日本語訳してみると、「 呼び出すために渡される引数は引数を取りません 」というのが妥当だろうか。 技術用語マシマシの英文翻訳は本当に難しい・・・orz つ...
続きを読む

【Rails5】SyntaxError: (): mapping values are not allowed エラーの解決法

この記事の概要 SyntaxError: (<unknown>): mapping values are not allowed 上記エラーに対応するために調べたところ、.ymlファイルのインデントが原因であることがわかった。 目次 この記事の概要 目次 試そうとしたこと エラーの分析 ja.ymlを見てみる 解決策 まとめ 試そうとしたこと Rails5で簡単なTaskアプリケーションを作って学んでいたのだが、 SyntaxError: (<unknown>): mapping values are not allowed  エラーにハマった。 エラーの分析 can not load translations from /Users/*****/Task_App/config/locales/ja.yml: # ): mapping values are not allowed in this context at line 15 column 7 どうやらja.ymlにエラーがあるらしい。 ymlファイルは、エラーメッセージが日本語を出すためのrawファイルであり、 GitHubのrails-|18nリポジトリにあるファイルを適当にダウンロードしたものである。 ja.ymlなので日本語設定である。 en.ymlだと英語設定になる。 ja.ymlファイルを見てみる （中略） 　 　models: 　　 task: タスク 　 　attributes: 　　 task:          id: ID 　　 name: 名称 　　 description: 詳しい説明 　　 created_at: 登録日時 　　 updated_at: 更新日時 んー？ 15行目あたりにエラーがあるらしいが、特に変わったところは見当たらない。 何がおかしいのだろうかと思って色々と検索してみた。 解決策 どうやら、ymlファイルにはスペースの数が決まっているようだ。 一番最初の階層のスペースゼロだとすると、 最初の階層はスペース無し。二番目の階層は半角スペース2つ 三番目の階層は半角スペー...
続きを読む