.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. HTML・CSS
  5. 【Bootstrapの導入】Bootstrapをダウンロードしてから使うまで

【Bootstrapの導入】Bootstrapをダウンロードしてから使うまで

  • HTML・CSS
公開日時:   更新日時:
【Bootstrapの導入】Bootstrapをダウンロードしてから使うまで
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>
    最新情報や関心のある情報を毎日お届け。  FEnetメールマガジン    メルマガ登録はこちらから>>

    「Bootstrap」とは、Webアプリケーションの画面デザインを作成するWebフレームワークです。
    多くのテンプレートがあり、それを利用して画面を作成することができます。また、多彩な機能があり非常に使いやすいフレームワークです。
    ここでは、Bootstrapをダウンロードしてから使うまでの手順を確認します。

    システム
    エンジニア
    Bootstrapを使うと画面デザインが容易に作成できるのですね。ダウンロードしてから使うまでの手順を教えてください。
    プロジェクト
    リーダー
    Bootstrapは多くの機能があり、使いやすいWebフレームワークです。ダウンロードしてから使うまでの手順を一緒に確認しましょう。

    Bootstrapをダウンロードしてから使うまで

    まずは、Bootstrap公式ページからダウンロードします。

    「Download」リンクをクリックします。
    すると、ダウンロードページが開くので、「Compiled CSS and JS」という部分の「Download」リンクをクリックします。

    ダウンロードページ

    上記ページにはバージョンの記載がありますが、本記事を執筆している2019年8月時点では、バージョン4.3.1が最新版です。

    zipファイルがダウンロードできるので、解凍します。
    バージョン4.3.1の場合、「bootstrap-4.3.1-dist」というフォルダが解凍できます。

    同じフォルダにhtmlファイルを作成し、以下のコードを記載します。

    headタグにcssのパスを記載します。
    先ほど解凍したフォルダの中に、bootstrap.min.cssが入っているので、以下のように記載します。

    カレントフォルダにあるフォルダから、ファイルを読み込むという記載です。
    この1文を記載するだけで使うことができます。
    ダウンロードしてから使うまでの手順は以上で完了です。

    そして、実際の画面デザイン部分ですが、上記のコードでは、以下のようにボタンを表示させるコードを記載しています。

    Bootstrapで用意されているclassを指定しています。

    実際の画面表示は以下のようになります。

    primaryボタン

    このように、綺麗なデザインのボタンも簡単に作成することができます。
    ボタンの色などを変えたい場合も、たくさん用意されているclassの中から好みのデザインを選んで使用することで、簡単に変更することができます。

    BootstrapをCDNで利用する方法

    BootstrapはCDNで利用することもできます。
    先ほどダウンロードした時と同じく、Bootstrap公式ページを開きます

    「Download」リンクをクリックします。

    すると、ダウンロードページが開くので、「BootstrapCDN」という部分に記載されているコードをコピーします。
    右上にコピーボタンが表示されているので、クリックします。

    コードのコピー

    コピーしたコードを使用して、以下のようにコードを実装します。

    先ほどとは違い、headタグに記載するbootstrap.min.cssのパスはCDNで用意されているパスを指定します。
    CDNで利用する場合も、これで利用する準備は完了です。
    ファイルをダウンロードして配置する手間が無いため、CDNを利用したほうが簡単です。

    CDNを利用することでアクセスが多いWebアプリケーションでも、アクセスの負荷を下げることができます。CDNの利用はWebアプリケーション構築の中で最善の方法といえるでしょう。

    実際に使う時の実装は、ダウンロードした場合と同様です。上記のコードではボタンが以下のように表示されます。

    primaryボタン

    システム
    エンジニア
    ダウンロードして使う方法、そしてCDNを利用する方法がよく分かりました!
    プロジェクト
    リーダー
    使い始めるまでの手順が簡単ですね。Bootstrapを使うことで綺麗な画面デザインが作成できるので利用していきましょう。

    BootstrapのダウンロードとCDNを利用することは簡単にできる

    Bootstrapをダウンロードして使う方法、CDNを利用して使う方法を確認しました。
    ダウンロードとCDN、どちらも導入の手順は簡単です。
    Bootstrapを使うことで綺麗な画面デザインが作成できるので、Bootstrapを利用してみてはいかがでしょうか。

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    新着案件New Job