【Webデザインが苦手な人にオススメ！】Bootstrapについてフレームワーク

最近コタツからデラれないあすかすです。
この記事もコタツの中で書いています。

今回はWebデザインが苦手な人にオススメのCSSフレームワーク『Bootstrap』をご紹介します。

Bootstrapとは

「Webサイトを作りたいけどデザインに自信がない」
「デザインの知識がない」
「作業時間を短縮したい」

上記のような悩みを持っている方いらっしゃいませんか？
安心してください！そんな方のためにあるのが『Bootstrap』です！

そもそもBootstrapって何？

知らない方もいらっしゃるかと思います。
BootstrapとはTwitter社が開発したWebデザインフレームワークなのです。
WebフレームワークとはWebアプリケーションの土台・開発をするために必要な機能が詰まったパッケージのことです。

Bootstrapは様々なテンプレートが最初から用意されているから、デザインの知識がなくても簡単にデザインができてしまうのです！

筆者もBootstrapを使用してポートフォリオを制作しています。
参考までに、是非ご覧ください。
https://asukas-ueda.github.io/etoile/.

Bootstrapの特徴

簡単にデザインができる

デザインテンプレートがあるため、デザインが苦手な人はわからない人でも簡単にデザインができる
デザインにかける時間が短縮できるため、作業効率もUPする

レスポンシブ対応

1つのページでPCとスマートフォンに対応できる
こちらも作業効率がよくなる

筆者が使用して感じたこと

クラス名を覚える必要がある（覚えると楽になる）
Bootstrapのみではデザインに広がりが出ないため、デザイン性を高めるなら自身でCSSを設定する必要もある

導入方法

Bootstrapの導入方法は２つあります。

テンプレートファイルをダウンロードする方法

Bootstrapの公式ページからファイルをダウンロードします。
ダウンロードが完了するとcssファイルとjsファイルが入ったフォルダがダウンロードされているのが確認できます。

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <!-- BootstrapのCSS読み込み -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
    </head>
    <body>
   　　　<!-- jQuery読み込み -->
        <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
   　　　<!-- BootstrapのJS読み込み -->
        <script type="text/javascript" src="js/bootstrap.bundle.js"></script>
    </body>
</html>

bootstrap.bundle.js は bootstrap.js だけではなく popper.js の機能も含まれています。

HTMLファイルにCDNを記述する方法

公式ページにCDNが記載されているので、そちらをコピーしてHTMLファイルにペーストすればOKです。

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <!-- BootstrapのCSS読み込み -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
    </head>
    <body>
        <!-- jQuery読み込み -->
        <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
   　　　<!-- BootstrapのJS読み込み -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
    </body>
</html>

※bootstrap.jsはjQueryを利用しているので、jQueryも読み込みましょう。
どちらの方法でも、読み込む際にJSより先にJQを読み込むようにしましょう！

デザインテンプレート

Bootstrapには様々なデザインテンプレートがありますが、今回はその中から３つほど紹介します。「もっと知りたい！」という人は公式ページに飛んだり、是非ご自身で検索してみてください！

ナビゲーションバー

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ナビゲーションバー</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">ホーム</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">新着情報</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">ブログ</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">お問い合わせ</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

ボタン

<button type="button" class="btn btn-secondary">ボタン</button>
<button type="button" class="btn btn-outline-secondary">ボタン</button>
<button type="button" class="btn btn-secondary btn-lg">ボタン大</button>
<button type="button" class="btn btn-secondary btn-sm">ボタン小</button>

カラー

<button type="button" class="btn btn-success">ボタン緑</button>
<button type="button" class="btn btn-danger">ボタン赤</button>
<button type="button" class="btn btn-warning">ボタン黄</button>
<button type="button" class="btn btn-info">ボタン水色</button>
<button type="button" class="btn btn-light">ボタン白</button>
<button type="button" class="btn btn-dark">ボタン黒</button>

最後に

しつこいように何度も言いますが、Bootstrapはデザインが苦手な人や作業効率を上げたい人にオススメです。
筆者は「頼れるものは頼っちゃえ！」精神で、自身で制作しているポートフォリオにもBootstrapを導入しています。
皆さんもBootstrapを使用して、素敵なWebサイト制作をしてみませんか？

ポートフォリオ制作についてはこちらを見てみてください。