初級フロントエンドエンジニアが知っておきたい基礎の基礎【Bootstrap編】

CODE
のり
のり

こんにちは!駆け出しフロントエンジニアのnoriです!Bootstrapの勉強をしているけど、なかなか知識が身についているかどうかわからないので、アウトプットとして基礎の基礎をまとめたいと思います。

Bootstrapとは

Bootstrap公式サイトより

Bootstrapとは、Twitter社が提供している巨大なライブラリのことで、HTML、CSS、およびJSを使用して開発するためのオープンソースのツールキットです。世界で最も人気のあるフロントエンドコンポーネントライブラリで、簡単に綺麗なWebサイトを作れるため、アイデアをすばやくプロトタイプ作成したり、アプリケーション全体を構築したりできます。

また、レスポンシブデザインにも対応しており、デスクトップからモバイルまで幅広い画面サイズに対応したサイトを手軽に作ることができます。

Bootstrapの基本

Bootstrapの適用方法

Bootstrapを利用するには、2種類の方法があります。

  • CDNを利用する方法
  • ローカルに設置して利用する方法

CDNを利用する方法

CDNとは、Content Delivery Networkの略で、Web上に公開ライブラリとして設置されているライブラリを参照することで利用できるサイトを表します。

Bootstrapでは、CDNで読み込む場合、以下のように書きます。(ver.4.3.1の場合)

index.html
<head>
  <!-- 中略 -->
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <!-- 自サイトのcss-->
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <!-- 中略 -->
  <!-- Bootstrap JavaScript -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <!-- 自サイトのJavaScript -->
  <script src="main.js"></script>
</body>

ローカルに設置して利用する方法

Bootstrapのサイトからzipファイルをダウンロードします。zipファイルを展開後にそのままサーバに配置して、ファイルの格納先を指定します。

index.html
<head>
  <!-- 中略 -->
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css">

  <!-- 自サイトのcss-->
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <!-- 中略 -->
  <!-- Bootstrap JavaScript -->
  <script src="js/bootstrap.min.js"></script>

  <!-- 自サイトのJavaScript -->
  <script src="main.js"></script>
</body>

viewportの設定

viewportとは、スマートフォンなどの表示領域を整える設定で、画面サイズに合わせてWebサイトの文字などが小さくならないようにするためのものです。

これもBootstrapのStarter Templeteに書いてあるので合わせて設定をしましょう。<meta name="viewport" ・・・>の部分です。

index.html
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>

Grid System

Bootstrapのレイアウトには、グリッドシステムというCSSが備わっています。これは、画面を12の列に分割してレイアウトを構築するもので、このおかげで綺麗で見栄えのよいサイトを簡単に作ることができます。

See the Pen basic-bootstrap-grid01 by Nori (@ysnoritnk) on CodePen.

クラス書き方は、col-画面サイズ-(カラム数)というようになっています。
画面サイズについては、以下のように画面サイズに応じてカラムが適用されます。

Bootstrap公式サイトより

見方ですが、例えば「col-md-6」というクラスを付けたとすると、768px以上の画面サイズの時には、画面の横幅を12等分した内の6カラム分として表示されるけれども、768より小さい画面の時には解除されて、横幅いっぱいまで表示をさせるということになります。

具体的な例を見たほうが早いですので、以下を見てください。少し画面を小さくすると右側のdivが下に入り込んで横幅いっぱいになります。

See the Pen basic-bootstrap-grid02 by Nori (@ysnoritnk) on CodePen.

違った画面サイズを指定しているときには、画面サイズの大きいものが優先されます。また、隙間を空ける時にはcol-画面サイズ-offset-カラム数を使用します。

See the Pen basic-bootstrap-grid03 by Nori (@ysnoritnk) on CodePen.

より詳しい説明は、公式サイトをご覧ください。

Bootstrapの書き方

ここからは、Bootstrapの書き方についてまとめていきたいと思います。

Table

Table要素にtableクラスをつけることで簡単に綺麗なテーブルを作成することができます。

See the Pen basic-bootstrap-table01 by Nori (@ysnoritnk) on CodePen.

また、以下のクラスを使うことでより変化に富んだテーブルを作成することが可能です。

  • table要素につけるクラス
    • table-dark:テーブル全体の背景を濃い灰色にする
    • table-striped:tbody内の背景色を行ごとにストライプにする
    • table-bordered:テーブルの各枠に罫線をつける
    • table-borderless:テーブルの各枠の罫線を無くす
    • table-hover:マウスを乗せると行がハイライトされる
    • table-sm:行幅の狭いテーブルになる
  • thead要素につけるクラス
    • thead-dark:ヘッダーの背景を濃い灰色にする
    • thead-light:ヘッダーの背景を薄い灰色にする
  • tr、td要素につけるクラス
    • table-activetable-primaryなど行やセルに色を付ける

tr要素につけるクラスの例

See the Pen basic-bootstrap-table02 by Nori (@ysnoritnk) on CodePen.

Bootstrap – Table

Alerts

アラートは、全8種類ありそれぞれメッセージを表示するのに使います。

See the Pen basic-bootstrap-alert by Nori (@ysnoritnk) on CodePen.

Bootstrap – Alert

Badges

バッジは、ラベリングをしたり、通知のカウントなどを知らせる用途で使います。以下にサンプルを記載しますが、アラート同様全部で8種類の色があります。

See the Pen basic-bootstrap-badge by Nori (@ysnoritnk) on CodePen.

Bootstrap – Badge

Buttons

ボタンは、全部で9種類のタイプがあります。サイズは4種類です。

See the Pen basic-bootstrap-buttons by Nori (@ysnoritnk) on CodePen.

Bootstrap – Buttons

Dropdowns

ドロップダウンは、ボタン要素とアンカー要素の2種類の記述方法がありますがいずれも見た目は一緒で、ボタンそのものにリンクを付けるかどうかが違いになります。(以下、作成しましたがCODEPEN上では動きませんでした)

See the Pen basic-bootstrap-dropdown by Nori (@ysnoritnk) on CodePen.

Bootstrap – Dropdowns

Forms

フォームは、input要素にform-controlクラスを入れて、form-groupクラスを付けたdiv要素でラップしてあげることでスタイルが適用されます。

See the Pen basic-bootstrap-form by Nori (@ysnoritnk) on CodePen.

Bootstrap – Forms

Navbar

ナビゲーションバーは、以下のように記載することで実現できます。(以下、作成しましたがCODEPEN上では動きませんでした)

See the Pen basic-bootstrap-navbar by Nori (@ysnoritnk) on CodePen.

Bootstrap – Navbar

Scrollspy

スクロールスパイは、スクロール位置に基づいてナビゲーションやリストなどの表示のどの部分が現在アクティブであるかをハイライトで示してくれます。(以下、作成しましたがCODEPEN上では動きませんでした)

See the Pen WVGWEX by Nori (@ysnoritnk) on CodePen.

Bootstrap – Scrollspy

まとめ

いかがでしたか?

Bootstrapを使えば、簡単で綺麗なデザインのサイトを作ることができ、レスポンシブデザインにも対応したサイトも手軽に作ることができます。

このBootstrapは、様々なサイトで利用されていますが、そのまま利用するとみんな同じようなサイトになってしまいます。そうならない為に、ほとんどカスタマイズをして利用されています。

ゆくゆくは、カスタマイズして自分だけのBootstrapテーマを作成したいですね!では!

コメント

タイトルとURLをコピーしました