CSS

    Bootstrapの使い方

    Bootstrapとは

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

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

    1. HTMLにclassやidをつける。
    2. 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を使えるようになります!

    ぜひ見てみてください。