CSSファイルに書き込み不要！Bootstrapにお任せ

CSSを記述していく際、

『class名を考える時間がもったいない』、『とりあえず適当なclass名をつけていて後々困った』など、

意外にCSSの記述は手間がかかりますよね、、、、。

Bootstrapはあらかじめ決まっているclass名を使用することで、そのclass名のCSSが反映されます。

CSSをもっと利用しやすく、コードの記述を減らして使うことができるのです。

それでは簡単な例を挙げていきます。

BootstrapはCDNで使うことが出来るので今回はそちらの方法で使用します。

導入は簡単でHTMLファイルの<head>タグ内に以下を入れるだけです。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

※ Bootstrap v5.0 の場合

では使ってみましょう！

緑色のボタン赤色のボタン黄色のボタン

例えば上記のようなCSSの効いたボタンも…………

<a href="" class="btn btn-success">緑色のボタン</a>
<a href="" class="btn btn-danger">赤色のボタン</a>
<a href="" class="btn btn-warning">黄色のボタン</a>

上記のみで実装できます。

そろぞれのクラス名にどのようなCSSが効いているのか見てみましょう。

.btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    padding: .375rem .75rem;
    font-size: 1rem;
    border-radius: .25rem;
}

.btn-success {
    color: #fff;
    background-color: #198754;
    border-color: #198754;
}

.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-warning {
    color: #000;
    background-color: #ffc107;
    border-color: #ffc107;
}

一つのclassにこれほど多くの設定がされています。

これを実際にCSSで記述していくのは骨が折れますね、、、。

Bootstrapでできることはまだまだあるのですが全てを紹介するのはこれまた骨が折れそうなので

『これは使えそう！』と思ったらその都度紹介していきたいと思います。

もし気になるという方は以下、Bootstrap公式ページにてお試しください！

https://getbootstrap.jp/

株式会社NextCode

ブログ

CSSファイルに書き込み不要！Bootstrapにお任せ

いいね: