【Bootstrapの導入】Bootstrapをダウンロードしてから使うまで
「Bootstrap」とは、Webアプリケーションの画面デザインを作成するWebフレームワークです。
多くのテンプレートがあり、それを利用して画面を作成することができます。また、多彩な機能があり非常に使いやすいフレームワークです。
ここでは、Bootstrapをダウンロードしてから使うまでの手順を確認します。
- SE
- Bootstrapを使うと画面デザインが容易に作成できるのですね。ダウンロードしてから使うまでの手順を教えてください。
- PL
- 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ファイルを作成し、以下のコードを記載します。
1
2
3
4
5
6
|
<head>
<link rel="stylesheet" href="./bootstrap-4.3.1-dist/css/bootstrap.min.css">
</head>
<body>
<button type="button" class="btn btn-primary">Primary</button>
</body>
|
headタグにcssのパスを記載します。
先ほど解凍したフォルダの中に、bootstrap.min.cssが入っているので、以下のように記載します。
1
|
<link rel="stylesheet" href="./bootstrap-4.3.1-dist/css/bootstrap.min.css">
|
カレントフォルダにあるフォルダから、ファイルを読み込むという記載です。
この1文を記載するだけで使うことができます。
ダウンロードしてから使うまでの手順は以上で完了です。
そして、実際の画面デザイン部分ですが、上記のコードでは、以下のようにボタンを表示させるコードを記載しています。
1
|
<button type="button" class="btn btn-primary">Primary</button>
|
Bootstrapで用意されているclassを指定しています。
実際の画面表示は以下のようになります。
このように、綺麗なデザインのボタンも簡単に作成することができます。
ボタンの色などを変えたい場合も、たくさん用意されているclassの中から好みのデザインを選んで使用することで、簡単に変更することができます。
BootstrapをCDNで利用する方法
BootstrapはCDNで利用することもできます。
先ほどダウンロードした時と同じく、Bootstrap公式ページを開きます。
「Download」リンクをクリックします。
すると、ダウンロードページが開くので、「BootstrapCDN」という部分に記載されているコードをコピーします。
右上にコピーボタンが表示されているので、クリックします。
コピーしたコードを使用して、以下のようにコードを実装します。
1
2
3
4
5
6
7
|
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<button type="button" class="btn btn-primary">Primary</button>
</body>
|
先ほどとは違い、headタグに記載するbootstrap.min.cssのパスはCDNで用意されているパスを指定します。
CDNで利用する場合も、これで利用する準備は完了です。
ファイルをダウンロードして配置する手間が無いため、CDNを利用したほうが簡単です。
CDNを利用することでアクセスが多いWebアプリケーションでも、アクセスの負荷を下げることができます。CDNの利用はWebアプリケーション構築の中で最善の方法といえるでしょう。
実際に使う時の実装は、ダウンロードした場合と同様です。上記のコードではボタンが以下のように表示されます。
- SE
- ダウンロードして使う方法、そしてCDNを利用する方法がよく分かりました!
- PL
- 使い始めるまでの手順が簡単ですね。Bootstrapを使うことで綺麗な画面デザインが作成できるので利用していきましょう。
BootstrapのダウンロードとCDNを利用することは簡単にできる
Bootstrapをダウンロードして使う方法、CDNを利用して使う方法を確認しました。
ダウンロードとCDN、どちらも導入の手順は簡単です。
Bootstrapを使うことで綺麗な画面デザインが作成できるので、Bootstrapを利用してみてはいかがでしょうか。
Search キーワード検索
Popular 人気の記事
-
【VB.NET入門】DataGridViewの使い方まとめ
公開: 更新:
reccomended おすすめ記事
-
【.NETが統合】.NET 5の概要と今後のリリース予定
公開: 更新:
Categories 連載一覧
Tags タグ一覧
Jobs 新着案件
-
ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務
月給26万~26万円東京都千代田区(秋葉原駅) -
RedmineプラグインおよびWEB開発/Ruby/東京都中央区/【WEB面談可】/在宅勤務
月給65万~65万円東京都中央区(新富町駅) -
Webシステム開発/東京都江東区/【WEB面談可】/テレワーク
月給32万~34万円東京都江東区(豊洲駅) -
Webマーケティング施策の運用サポート/CSS/東京都千代田区/【WEB面談可】
月給33万~48万円東京都千代田区(神田駅) -
空港案内表示画面開発/HTML/神奈川県鎌倉市/【WEB面談可】
月給60万~70万円神奈川県鎌倉市(大船駅) -
空港案内表示画面の運用保守/HTML/神奈川県鎌倉市/【WEB面談可】
月給50万~60万円神奈川県鎌倉市(大船駅)