Railsでレスポンシブデザインを完全ガイド！TailwindとBootstrapで学ぶレイアウト設計

レスポンシブデザイン：Tailwind/Bootstrapの導入とレイアウト設計

先生と生徒の会話形式で理解しよう

生徒

「Railsアプリをスマホでもパソコンでも見やすくしたいんですが、どうすれば画面サイズに応じてレイアウトを変えられますか？」

先生

「それにはレスポンシブデザインが必要ですね。Tailwind CSSやBootstrapを使えば、Railsでも簡単にレスポンシブ対応ができますよ。」

生徒

「CSSが苦手でも使えるんですか？クラス名が多くて難しそうに見えます。」

先生

「大丈夫です。Railsのビュー（ERB・Haml・Slim）では、クラスを指定するだけで綺麗なレイアウトが作れます。まずは基本的な仕組みから学んでいきましょう。」

1. レスポンシブデザインとは？画面サイズに合わせて変わるレイアウト

レスポンシブデザインとは、スマホ・タブレット・パソコンなど異なる画面幅に応じて、見た目を自動で調整するデザイン手法です。現代のWebアプリでは必須とされており、Railsアプリも例外ではありません。

難しそうに思えますが、TailwindやBootstrapを使えば、画面幅ごとに適用されるクラスを指定するだけで実現できます。コードを書き換えずに見た目が整うため、初心者でも扱いやすいのが特徴です。

2. BootstrapをRailsに導入してレスポンシブ対応する

Bootstrapは多くの企業でも使われているCSSフレームワークで、レイアウト設計やボタン、フォームのデザインが簡単に美しく整います。RailsではgemやCDNを使って導入できます。


<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">
      左側のコンテンツ
    </div>
    <div class="col-12 col-md-6">
      右側のコンテンツ
    </div>
  </div>
</div>

Bootstrapの「col-◯◯」クラスは画面幅に応じて表示幅を変えられる仕組みです。スマホなら縦並び、パソコンなら横並びというように自動調整されます。

3. Tailwind CSSで柔軟なレスポンシブデザインを作る

Tailwind CSSはユーティリティクラスと呼ばれる仕組みを使い、細かい見た目を自分でカスタマイズできるCSSフレームワークです。デザイン自由度が高く、Rails7の標準構成でも採用されています。


<div class="p-4 bg-white md:bg-gray-100 lg:bg-blue-100">
  レスポンシブデザインの背景色切り替え
</div>

「md:」「lg:」のように画面サイズ別のクラスを使うだけで、スマホとパソコンで異なる見た目を実現できます。Tailwindは特に細かな調整が必要なアプリに向いています。

4. Railsビュー（ERB・Haml・Slim）でのレスポンシブ記述

Railsはテンプレートエンジンによって記述の仕方が変わりますが、レスポンシブクラスを適用する方法はどれも同じです。


<!-- ERB -->
<div class="container mx-auto p-4">
  <%= render "shared/header" %>
</div>

<!-- Haml -->
.container.mx-auto.p-4
  = render "shared/header"

<!-- Slim -->
.container.mx-auto.p-4
  = render "shared/header"

どのテンプレートでも、クラス名を書く場所が違うだけで機能は同じです。慣れてしまえば簡単に書き分けられます。

5. パーシャルでヘッダーやフッターを共通化

レスポンシブデザインの構造を整えるためには、ヘッダー・フッター・ナビゲーションなどをパーシャルにまとめる方法が便利です。一箇所を変更するだけで全ページに反映されるため運用しやすくなります。


<!-- shared/_header.html.erb -->
<header class="p-4 flex justify-between items-center">
  <h1>アプリ名</h1>
  <nav class="hidden md:block">
    <ul class="flex gap-4">
      <li><a href="#">ホーム</a></li>
      <li><a href="#">記事一覧</a></li>
    </ul>
  </nav>
</header>

スマホではメニューを非表示にし、パソコンでは表示するなどTailwindのクラスひとつで制御できます。

6. レイアウトファイルで全体デザインを統一する

Railsのレイアウト（application.html.erb）に共通の枠組みをまとめれば、レスポンシブデザインも全体的に整います。全ページで使うコンテナや共通の余白もここで設定します。


<body class="bg-gray-50">
  <%= render "shared/header" %>
  <main class="container mx-auto p-6">
    <%= yield %>
  </main>
</body>

「yield」は各ビューの内容が入る場所です。TailwindでもBootstrapでも、このレイアウト構造がレスポンシブ設計の基盤になります。

7. グリッドレイアウトで美しいレスポンシブ表組みを作る

一覧ページなどでは、TailwindのgridやBootstrapのrow/colを使うと綺麗に整列したレスポンシブレイアウトを作れます。


<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="p-4 bg-white shadow">カード1</div>
  <div class="p-4 bg-white shadow">カード2</div>
  <div class="p-4 bg-white shadow">カード3</div>
</div>

画面幅に応じて1列→2列→3列と変化するため、商品一覧、ブログ一覧などにもよく使われます。

8. 初心者が最初に覚えるべきレスポンシブデザインのコツ

まずは「画面幅でクラスを切り替える」ことを意識しましょう。次に、パーシャルとレイアウトを活用し、重複するコードをまとめることが大切です。

RailsとTailwindやBootstrapを組み合わせれば、専門的なCSSを書かなくても美しいレスポンシブWebアプリが作れるようになります。

実務の壁を乗り越える【Ruby on Rails 実務開発特別演習】

職業訓練講師が最短攻略！Ruby on Railsによる「商用API開発」とDB最適化の極意。

商用開発基準を身につけ、エンジニアとしての市場価値を最大化する

職業訓練講師が最短攻略！Ruby on Railsによる「商用API開発」とDB最適化の極意。

モダンWeb開発のデファクトスタンダードRuby on Rails。本講座では、その圧倒的開発スピードの核にある「Active Record」を完全解剖。「設定より規約」を体現した効率的なアーキテクチャ設計を学び、JWT認証やバックエンドAPI構築など、現場で必須となるエコシステムの繋ぎ方を60分で濃縮体験します。