PR

Ruby on RailsでBootstrapを使う方法！導入・活用方法を紹介

Ruby・Rails
2025.01.02

Ruby on Railsでウェブアプリケーションを作る際、見た目の部分で悩むことは多いものです。そんなときに便利なのが「Bootstrap」というフレームワークです。この記事では、Bootstrapの導入から実践的な使い方まで、初心者にもわかりやすく解説していきます。

Bootstrapとは

Bootstrapは、Webサイトやアプリケーションのデザインを簡単に整えることができるフレームワークです。ボタン、フォーム、ナビゲーションバーなど、よく使うパーツが最初から用意されているため、プログラマーがゼロからデザインを作る必要がありません。

導入方法

RailsアプリケーションへのBootstrap導入方法は主に3つあります：

  1. Gemを使用する方法
  2. yarnを使用する方法
  3. CDNを使用する方法

1. Gemを使用する方法（推奨）

# Gemfileに追加
gem 'bootstrap', '~> 5.3.0'
gem 'jquery-rails'
gem 'sassc-rails'

次に、ターミナルで以下のコマンドを実行します：

bundle install

アセットファイルの設定

# app/assets/stylesheets/application.scss
@import "bootstrap";

# app/javascript/application.js
//= require jquery3
//= require popper
//= require bootstrap

基本的なレイアウトの作成

コンテナの設定

Bootstrapでは、コンテナを使ってコンテンツを中央寄せにします：

<!-- app/views/layouts/application.html.erb -->
<!DOCTYPE html>
<html>
  <head>
    <title>アプリケーション名</title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag 'application', media: 'all' %>
  </head>
  <body>
    <div class="container">
      <%= yield %>
    </div>
    <%= javascript_include_tag 'application' %>
  </body>
</html>

ナビゲーションバーの作成

よく使用されるナビゲーションバーの例：

<!-- app/views/shared/_navbar.html.erb -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <%= link_to "サイト名", root_path, class: "navbar-brand" %>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <%= link_to "ホーム", root_path, class: "nav-link" %>
        </li>
        <li class="nav-item">
          <%= link_to "商品一覧", products_path, class: "nav-link" %>
        </li>
      </ul>
    </div>
  </div>
</nav>

グリッドシステムの活用

Bootstrapの12カラムグリッドシステムを使用した例：

<!-- app/views/products/index.html.erb -->
<div class="row">
  <div class="col-md-8">
    <!-- メインコンテンツ -->
    <h1>商品一覧</h1>
    <div class="row">
      <% @products.each do |product| %>
        <div class="col-md-4 mb-4">
          <div class="card">
            <%= image_tag product.image, class: "card-img-top" if product.image.attached? %>
            <div class="card-body">
              <h5 class="card-title"><%= product.name %></h5>
              <p class="card-text"><%= product.description %></p>
              <%= link_to "詳細", product_path(product), class: "btn btn-primary" %>
            </div>
          </div>
        </div>
      <% end %>
    </div>
  </div>

  <div class="col-md-4">
    <!-- サイドバー -->
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">カテゴリー</h5>
        <ul class="list-group">
          <% @categories.each do |category| %>
            <li class="list-group-item">
              <%= link_to category.name, category_path(category) %>
            </li>
          <% end %>
        </ul>
      </div>
    </div>
  </div>
</div>

カスタマイズの実践

SCSSでのカスタマイズ

カスタムCSSを追加する場合は、以下のような構成にします：

// app/assets/stylesheets/custom.scss
@import "bootstrap";

// カスタムカラー
$custom-primary: #3498db;
$custom-secondary: #2ecc71;

// ナビゲーションバーのカスタマイズ
.navbar-custom {
  background-color: $custom-primary;
  .navbar-brand {
    color: white;
    &:hover {
      color: darken(white, 10%);
    }
  }
}

// カスタムボタン
.btn-custom {
  @extend .btn;
  background-color: $custom-secondary;
  color: white;
  &:hover {
    background-color: darken($custom-secondary, 10%);
  }
}

レスポンシブデザインのカスタマイズ

// ブレイクポイントのカスタマイズ
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

// カスタムコンテナサイズ
.container-narrow {
  @include make-container();
  max-width: 960px;
}

コンポーネントのカスタマイズ例

# app/views/shared/_custom_card.html.erb
<div class="card custom-card">
  <div class="card-body">
    <h5 class="card-title"><%= title %></h5>
    <p class="card-text"><%= content %></p>
    <%= yield if block_given? %>
  </div>
</div>
// カスタムカードのスタイル
.custom-card {
  border-radius: 15px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-5px);
  }
}

カスタムテーマの作成と適用

カスタムテーマを作成するには、以下のような手順でSCSSファイルを作成します：

// app/assets/stylesheets/custom.scss

// 1. 変数のカスタマイズ
$primary: #3498db;
$secondary: #2ecc71;
$success: #27ae60;
$info: #3498db;
$warning: #f1c40f;
$danger: #e74c3c;

// 2. Bootstrapのインポート
@import "bootstrap";

// 3. カスタムコンポーネントのスタイル
.navbar-custom {
  background-color: $primary;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);

  .navbar-brand {
    color: white;
    font-weight: bold;
  }
}

.btn-custom {
  padding: 10px 20px;
  border-radius: 25px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
  }
}

レスポンシブデザインのカスタマイズ

// ブレイクポイントのカスタマイズ
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

// コンテナサイズのカスタマイズ
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

// レスポンシブなタイポグラフィ
$enable-responsive-font-sizes: true;

コンポーネントの実装例

# app/views/shared/_custom_card.html.erb
<div class="card shadow-sm mb-4">
  <div class="card-body">
    <h5 class="card-title"><%= title %></h5>
    <p class="card-text"><%= description %></p>
    <%= link_to action_text, action_path, class: "btn btn-primary" %>
  </div>
</div>

JavaScriptコンポーネントのカスタマイズ

// app/javascript/custom/bootstrap_extensions.js
document.addEventListener('turbolinks:load', () => {
  // ツールチップの初期化
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
  })

  // モーダルのカスタム動作
  const modals = document.querySelectorAll('.modal')
  modals.forEach(modal => {
    modal.addEventListener('show.bs.modal', event => {
      // モーダル表示時の処理
    })
  })
})

これで基本的なBootstrapのカスタマイズ方法について解説を終わります。これらの設定を組み合わせることで、オリジナリティのあるデザインを実現できます。

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