スポンサーリンク
Bootstrapとは
Bootstrapは、CSSを簡単に実装できるフレームワークです。
通常、CSSでスタイルを指定する時は、2つの作業が必要です。
- HTMLにclassやidをつける。
- CSSでスタイルを指定する。
しかしBootstrapを使えば、この作業を省略することができます。
それは、Bootstrapには、あらかじめCSSが用意されているからです。
例えば、文字を中央寄せにしたい時、通常であれば「text-align: center;
」と指定します。
しかしBootstrapを導入すれば、以下のように記述することで実装できます。
<p class="text-center">これで中央寄せになります。</p>
コーディングがとても早くなり便利です。
また、その他にも便利な点がいくつかあります。
体裁の整った、ナビゲーションバーやインプットボックスなどなど。
デザインが苦手な人でも、体裁の整ったデザインを簡単に実装できます。
Bootstrapの使い方
Bootstrapを使うには、head タグ内に link タグを貼り付けることで使えるようになります。
他のCSSファイルがある場合は、Bootstrapのlinkタグをその前に記述します。
Bootstrapのサイトの、CSSと書かれたコードを貼り付ければ使えます。
以下サンプルを貼り付けておきます。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
Bootstrapの学習動画
Bootstrapを学習するなら、こちらの動画がおすすめです。
シリーズになっており体系的に学習ができます。
とてもわかりやすく、短時間で概要をつかめると思います。
これを見れば、すぐにBootstrapを使えるようになります!
ぜひ見てみてください。
スポンサーリンク