【初心者向け】Bootstrapを使ってCSSでレイアウトを作る方法を解説！

2024.01.03
Bootstrapを使ってCSSでレイアウトを作る方法を解説

プログラミングの勉強をしていて、

「綺麗なレイアウトのWebサイトを作りたい」

「CSSでレイアウトを作るのが難しい」

などと思ったことはありませんか？

レスポンシブデザインなども考慮しなければならないので、CSSで綺麗なレイアウトを作成するのは難しいですよね？

そこで今回は、そんなレイアウト作りを簡単にしてくれる「Bootstrap」の使い方を解説します！

この記事を読んでわかる内容は、以下の通りです。

  • Bootostrapの基礎知識
  • Bootstrapの導入方法
  • BootstrapでWebページを作る方法

「Bootstrapって何？」

「CSSのフレームワークを使ってみたい」

という初心者の方向けの内容になっていますので、ぜひ最後まで見てくださいね。

そもそもBootstrapとは？

Bootstrapは、CSSフレームワークの一つ。SNSで有名なTwitter社が開発しています。

頻繁に機能が見直され、現在のversionは「5」。20以上ものリリースを行い、日々進化し続けています。

様々なCSSフレームワークがある中で、2010年半ばに開発されたという歴史があるBootstrap。

以下のようなメリットから、世界中の多くの人々に利用されています。

  • レスポンシブデザインに対応している
  • インストール・CDNで簡単に利用できる
  • SVGライブラリ（独自のオープンソース）を持っている
  • 公式のBootstrapテーマのマーケットプレイスがある

Bootstrapで用意されている、1300以上もある独自のSVGアイコンを簡単に使用することができます。

また、開発者によって、Bootstrapをさらに拡張して作成されたテーマを利用することも可能。

CSSフレームワークとは？

CSSフレームワークとは、レイアウトやボタン、フォームなどWebサイトに必要なパーツや機能がセットで配布されているライブラリのようなものです。

「この色にしたい時にはこのキーワード」

「このボタンを実装したい時にはこのキーワード」

など、あらかじめ用意されているCSSを呼び出せるキーワードを入力するだけで、簡単に実装することができます。

一から作る手間が省け、デザイナーでなくても整ったWebサイトを作ることが可能になります。

実際にBootstrapを使ってみよう！

では、実際にBootstrapを使ってみましょう！

今回は、以下のような簡単なWebページをBootstrapで作っていきます。

Bootstrapを利用したサンプルサイト

BootstrapでWebページを作る手順は、以下の通りです。

  1. Bootstrapを導入する
  2. グリットシステムを利用して簡単なレイアウトを作る
  3. フォームを設置する

では、それぞれの手順ごとに詳しく見ていきましょう！

1.まずはBootstrapの導入から

最初に、Bootstrapを利用できる環境を整えます。

Bootstrapの導入方法は、以下の3つ。

  • CSSファイルをダウンロードする
  • CDNを利用する
  • パッケージマネージャでインストールする

では、それぞれの方法について解説していきます。

ダウンロードして利用する方法

1.Bootstrapの公式ページトップの「ダウンロード」ボタンをクリック

Bootstrapをダウンロードする画面

2.コンパイルされた CSS と JSの「ダウンロード」ボタンをクリック

CSSとJSのダウンロード画面

3.ダウンロードしたzipファイルを解凍

ダウンロードしたファイルの解凍

4.解答したファイルの「cssフォルダー」と「jsフォルダー」をコピー

解凍したファイルのコピー

5.Bootstrapを利用したいエディタのフォルダーに張り付ける（index.htmlが配置されているフォルダー）

Bootstrapを利用したいエディタのフォルダーに張り付けるイメージ

CDNを参照して利用する方法

CDNは、最も簡単にBootstrapを利用できる方法です。

ファイルをダウンロードする必要もなく、公式サイトあるCDNをコピペするだけなので、手軽に利用できます。

具体的な手順は、以下の通りです。

1.公式サイトのダウンロードページ「jsDelivr 経由の CDN」からコードをコピー

ダウンロードせずにCSS、JSを使用する画像

2.HTML内に張り付ける

<head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

</head>

CSSのlinkタグは、headタグ内に挿入します。

他のスタイルシートよりも先に入れましょう。

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- css -->
<link rel="stylesheet" href="css/style.css">

JSは、bodyタグ終了直前に「jQuery → Popper.js → Bootstrap」の順番で挿入します。

<!-- Bootatrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
  </body>

CDNとは？

CDNとは、効率的かつスピーディーにWebコンテンツを配信できるように工夫されたネットワークのこと。

「Content Delivery Network（コンテンツデリバリーネットワーク）」の略称です。

CDNでは、直接、Webコンテンツを提供しているサーバーにアクセスするのではなく、世界中に配置されている「キャッシュサーバー」を通すことにより、サーバーへの負荷を分散しています。

スムーズな利用が可能になるため、フレームワーク以外にも、Wordpressや動画配信サービスなどでも利用されています。

パッケージマネージャでインストールする方法

パッケージマネージャとは、JavaScriptのフレームワークの大量のプログラムをひとまとめにした、「パッケージ」を管理する「マネージャ」ツールのこと。

主に、「npm」と「Yarn」の2種類の方法が使用されています。

Bootstrapで利用できるインストール方法は、以下の4つ。

  • npm
  • yarn
  • RubyGems
  • Composer
  • NuGet

ぞれぞれの実行コマンドは以下の通りです。

【npm】

npm install bootstrap

【yarn】

yarn add bootstrap

【RubyGems】

Rubyアプリの「Bundler」と「RubyGems」でGemfileからインストールできます。

Bundlerは、推奨されているインストール方法です。

gem 'bootstrap', '~> 5.0.2'

Bundlerを使っていない場合は、以下のコマンドでgemをインストールできます。

gem install bootstrap -v 5.0.2

【Composer】

composer require twbs/bootstrap:5.0.2

【NuGet】

Install-Package bootstrap
Install-Package bootstrap.sass

2.グリットシステムを利用して簡単なレイアウトを作る

Bootstrapを利用できる環境を整えたら、簡単なレイアウトを作っていきましょう！

ここでは、「実際にBootstrapを使ってみよう！」で紹介した、1ページのコンテンツ部分を作成します。

グリットシステムを利用して簡単なレイアウトを作る画像

グリットシステムとは？

Bootstrapでは、グリットシステムという機能を利用してレイアウトを作ることができます。

グリットシステムとは、画面横幅を12分割しているプログラムのこと。

1～12の数値を指定するだけで、自動的に分割された要素を配置してくれます。

また、グリットシステムには、6つのブレークポイントが用意されているので、最大幅に合わせて幅のサイズを指定することができます。

クラス最大幅記述方法
xsauto.col-（数値）
sm540px.col-sm-（数値）
md720px.col-md-（数値）
lg960px.col-lg-（数値）
xl1140px.col-xl-（数値）
xxl1320px.col-xxl-（数値）

以下4つの、グリットシステムの基本的なルールに従い、レイアウトを指定していきます。

  1. 先頭に、class=”container” または ”container-fluid”を指定したdivタグを配置する
  2. 1の中に、class=”row”を指定したdivタグを配置する
  3. 2の中に、class=”col-{ブレークポイント}-{カラム(数値)}”を指定した、divタグを配置する
  4. 3で配置した複数要素の{カラム(数値)}は、合計12とする
<!-- HTMLコード -->
<div class="top_wrap">
  <div class="top_bg bg-secondary">
    <div class="top_inner text-white">
      <h1>Bootstrapを利用したサンプルサイト</h1>
    </div>
  </div>
</div>

<div class="container">
  <h2>コンテンツタイトル</h2>
  <div class="row">
    <div class="col">
      <h3>コンテンツ1</h3>
      <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、</p>
      <button type="button" class="btn btn-secondary">
        <a href="#" class="text-white">MORE</a>
      </button>
    </div>
    <div class="col">
      <h3>コンテンツ2</h3>
      <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、</p>
      <button type="button" class="btn btn-secondary">
        <a href="#" class="text-white">MORE</a>
      </button>
    </div>
    <div class="col">
      <h3>コンテンツ3</h3>
      <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、</p>
      <button type="button" class="btn btn-secondary">
        <a href="#" class="text-white">MORE</a>
      </button>
    </div>
  </div>
</div>
/* CSSコード */
.top_bg {
  height: 300px;
}

.top_inner h1 {
  line-height: 300px;
}

h2 {
  text-align: center;
}

▼ブラウザ表示▼

ブラウザ表示

Bootstrapでのmargin・paddingの使い方

Bootstrapでは、paddingやmarginで余白を調整することも可能。

しかし、通常の指定方法と異なります。

クラスxsの場合： {property}{sides}-{size} クラスsm～xxlの場合：{property}{sides}-{breakpoint}-{size}

{property}、{sides}、{size}に使用できる名称・数値と、それぞれの意味は以下の通りです。

property意味
mmargin
ppadiing
sides 意味
ttop
b bottom
e行末側
x左右
y上下
size意味
00
10.25rem
20.5rem
31rem
41.5rem
53rem
autoauto

{breakpoint}には、sm～xxlの値が入ります。

上記の表の値を組み合わせて使用することで、「mt-0」で「marign-top:0」、「py-sm-4」で「最小幅540pxの場合、上下のpaddingを1.5rem」という指定ができます。

では、実際に上記の指定方法で、記述してみましょう。

<!-- HTMLコード -->
<div class="top_wrap">
    <!-- 省略 -->
      <h1 class="ps-3">Bootstrapを利用したサンプルサイト</h1>
    <!-- 省略 -->
<div class="container">
      <h2 class="my-5">コンテンツタイトル</h2>

▼ブラウザ表示▼

ブラウザ表示

3.フォームを設置してみよう！

最後に、フォームを設置していきます。

Bootstrapには、すでにデザインされているフォームが組み込まれているので、以下の指定をするだけで、簡単にフォームを設置することができます。

<!-- HTMLコード -->
<div class="container my-5 p-5 border rounded">
  <h3 class="pb-2">お問い合わせフォーム</h3>
  <form>
    <div class="mb-3">
      <label for="email" class="form-label">メールアドレス</label>
      <input type="email" class="form-control" id="email" placeholder="example.co.jp">
    </div>
    <div class="mb-3">
      <label for="text" class="form-label">お問い合わせ内容</label>
      <input type="text" id="text" class="form-control" placeholder="お問い合わせ内容">
    </div>
    <button type="submit" class="btn btn-secondary">送信</button>
  </form>
</div>

▼ブラウザ表示▼

ブラウザ表示

Bootstrapを使えば初心者でも簡単にレイアウトが作れる！

今回は、Bootstrapの基礎知識や具体的な使い方を解説しました。

以下は、この記事のまとめです。

  • Bootstrapは、CSSフレームワークの一種
  • CDNを参照してBootstrapを使うのが最も簡単
  • Bootstrapでは、グリットシステムを利用してレイアウトを作成できる

Bootstrapを利用すれば、デザインセンスがなくても、プログラミング初心者でも、簡単に綺麗なレイアウトのWebページを作ることが可能です。

記述方法がわからなくなった時には、Bootstrapの公式サイトのドキュメントを参照しましょう。

＼プログラミングスクールを比較／

DMM WEBCAMP

COACHTECH

RUNTEQ
DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
 フリーランスエンジニア WEBエンジニアへの転職
分割払い ○ ○ ○
補助金 ○ × ○
転職保証 ○ × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり 		【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当 		【とことん勉強してから転職したい方向け】
1,000時間（約9カ月）のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後		 42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

  • ide(統合開発環境)とは?

    【IDE（統合開発環境）とは？】概要、使用の利点、用途を簡単に解説

    2024.01.04
  • プログラミング windows10

    Windows10でプログラミング環境を構築する方法を解説

    2024.01.12
  • Python環境変数について解説

    プログラミングを学習する目的とは？プログラミングでできること

    2024.01.29
  • HTML入門

    【HTML初心者入門】dlタグとは何？使い方も解説！

    2024.01.04

    • 資料請求

    • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

      DMM WEBCAMPでは転職成功率98％を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

      資料をダウンロードする
    • IT技術がもたらす3つの変化と身につけるべきスキル

      IT技術の発展により、今後10~20年程度で47％の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

      資料をダウンロードする
    • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

      働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

      資料をダウンロードする

    資料請求一覧はこちら

    サービス紹介

    © 2024 WEBCAMP MEDIA Powered by AFFINGER5