【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系を比較して、どちらのフレームワークを採用するかを考えないといけない。 続いて、ダウンロードする方法は...