Bootstrapの使い方

Bootstrapとは

Bootstrapは、CSSを簡単に実装できるフレームワークです。

通常、CSSでスタイルを指定する時は、2つの作業が必要です。

しかし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を使えるようになります！

ぜひ見てみてください。