【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 つまり、自分自身の解釈だとclass直下に書く変数（今回はselectedNumber）は、viewDidLoad()や@IBAction func関数などで、呼び出される事がほとんどだと思う。 そんな変数を定義する時なおかつarc4randomを使うのであれば
続きを読む

【Swift4】iOSシミュレータでカメラとフォトライブラリが起動しない？試してみてわかったこと

イメージ
この記事の概要 以前同様の問題が発生したためにteratailに投稿したことがあるのだが、ここでももう一度まとめておこうと思う。一応、2018/11/19に私が投稿したteratailの記事を貼っておくので、 興味のある方はご一読ください。 iOSシミュレータでカメラとフォトライブラリが起動しない (https://teratail.com/questions/159144) 目次 この記事の概要 目次 実現したいこと 問題 解決策1:シミュレーターでうまく行かない場合 解決策2:実機でうまく行かない場合 まとめ 参考文献 実現したいこと Swift4のプロジェクトで、カメラ機能の実装を行いたいと思った。また、撮影した写真をアプリから呼び出せるようにアクションコントローラーを追記して、もしエラーが発生しているようなのであれば例外処理エラーでユーザーに知らせる、といった機能を実装するために、プロジェクトを作成した。そのためにSwiftで以下のようなコードを書いた。 class AddItemViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {   (中略)   @IBAction func selectImage(){   let actioncontroller = UIAlertController(title: "画像を選択", message: "選択してください", preferredStyle: .actionSheet)   let cameracontroller = UIAlertAction(title: "カメラ", style: .default) { (action) in if UIImagePickerController.isSourceTypeAvailable(.camera) == true{  let picker = UIImagePickerController() picker.sourceType =
続きを読む