Bootstrapを使ってみよう

Bootstrapは、「CSSフレームワーク」や「フロントエンドツールキット」と呼ばれるウェブページのデザインや構築に利用される、CSSの元になる CSSファイル群+JavaScriptパーツ集です。

ボタンやアラート、フォームパーツなど、数多くのパーツがすぐに利用でき、さらに SCSSを使ってカスタマイズを施しながら、自分のデザインに仕上げていくことができます。

ここではまずは、最も手軽な方法で Bootstrapを試してみましょう。

Bootstrapを参照しよう

Boostrapを利用するには、CSSファイルを linkタグで参照します。ファイルをダウンロードして参照することもできますが、「CDN(Content Delivery Network)」というしくみを使うと、次のような文字列をコピーするだけで利用できるようになります。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

Bootstrapの公式サイトからコピーしましょう。

ボタンを作ってみよう

そしたら、次のような HTMLを書いてみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Bootstrap</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="container pt-5">
      <a href=“https://tomosta.jp”>ともすた</a>
    </div>
  </body>
</html>

この状態でファイルを表示しても、特に見た目に大きな変化はありません。

Bootstrapの利点は、普通に書いた HTMLには悪影響を与えない点にあります。自分のウェブページにも、比較的気楽に導入できます。

Bootstrapの効果を確認するには、決められた class属性を付加します。例えば、ここでは次のように加えましょう。

<a href=“https://tomosta.jp” class="btn btn-primary">ともすた</a>

これを表示すると、一気に見た目が変化して青いデザインされたボタンが表示されます。

さらに、次のように変えてみましょう。

<a href=“https://tomosta.jp” class="btn btn-danger">ともすた</a>

今度は、ボタンの色が赤くなります。

このように、Bootstrapはちょっとした記述で、洗練されたデザインのボタンやフォームパーツなどを作り上げることができます。

見た目が「いかにも」Bootstrapになってしまいますが、これらについてはカスタマイズで、完全にオリジナルのデザインにすることもできます。

実際に、Bootstrapを元に作られてテーマを確認すると、元がわからなくなるほどカスタマイズされたものもあります。

これから、Bootstrapにはどんなパーツがあり、どんなふうにカスタマイズするのかなどについて紹介していきましょう。

ともすたチャンネルに
チャンネル登録する