トモジBootstrapって何？
詳しく知りたい・・
本記事は、
上記のような方に向けて記事を書いています。
こんにちは、トモジです。
私はプログラミング未経験から独学で勉強して、
簡易的な動的サイト・ゲーム・サービスが作れる状態になりました。
本記事は、Bootstrapに関して要点を
わかりやすく説明しております。
1.Bootstrapとは？
Bootstrapとは、Twitter社が開発したCSSフレームワークでありCSSのライブラリ集になります。
Bootstrapを使う事で、短時間で見栄えが良くレスポンシブなデザインのwebサイトが作成可能なので
とても人気のあるCSSフレームワークになります。
ver.3とver.4の互換性は極めて少ない
今回紹介するBootstrap4は、Bootstrap3をバージョンアップしたものですが
互換性がないと考えた方がよろしいでしょう。
次回紹介するグリッドシステムが、
Bootstrap4の仕様と大幅に変更され
Bootstrap3を読み込むとレイアウトが
大きく乱れてしまいます。
したがって、Bootstrap3とBootstrap4は
別のツールと認識しておく事が必要になります。
2.使い方に関して
Bootstrap4と使う際に、2種類の方法がありますので順番に説明していきます。
Bootstrap4ファイルをダウンロード[方法1]
公式サイトから、バージョンを指定してダウンロードボタンをクリックする。
ページが代わり、赤枠のダウンロードボタンを
クリックするとファイルダウンロードができます。
解答したcssフォルダの
bootstrap.min.cssファイルを使用します。
ファイルに関して
公式サイトからダウンロードしたファイルの意味合いについて見ていきましょう。
Bootstrap4の書式指定が
記述されているCSSファイル
bootstrap.cssと内容は同じですが、スペースや改行などを削除して容量を小さく圧縮したCSSファイル
Bootstrap4のグリッドシステムに関連する記述を抜き出したCSSファイル
Bootstrap4のReboot(各要素の初期設定)だけを抜き出したCSSファイル
CDNサーバーを利用[方法2]
CDNサーバーを利用する場合は、
HTMLファイルのヘッドタグ内にリンクタグを
記述する形になります。
リンクは公式サイトを少しスクロールすると
CDNのリンクがあります。
コピーしたリンクを
HTMLのヘッドタグ内にペーストします。
CDNに関して
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ↓↓ここにBootstrap4のCDNリンクを貼り付ける↓↓ -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ -->
<title>※※※※※</title>
</head>
<body>
<script src="js/main.js"></script>
</body>
</html>まとめ
最後にこの記事のポイントをまとめておきます。
Bootstrapに関して
- CSSフレームワーク
- ver.3とver.4の互換性は極めて少ない
使い方
- ファイルをダウンロード
- CDNサーバーを利用
