CSSでオススメのフレームワークと実装例【Bootstrap/Tailwind】

CSSフレームワークは、Webデザインと開発の効率を向上させる優秀なツールです。

この記事では、個人的にオススメのCSSフレームワークの紹介と、簡単な実装例を解説します！

Bootstrapの魅力と基本的な実装

Bootstrapは、おそらく、かなり人気のあるCSSフレームワークの1つです。

優れたグリッドシステムと豊富なコンポーネントは、レスポンシブなデザインを簡単に実現することができます。

Bootstrapの実装例

Bootstrapを使った、シンプルなナビゲーションバーの実装例です。

See the Pen
CSS-Bootstrap実装例 by りん@エンジニア (@rinblog0408)
on CodePen.

Bootstrapの導入と設定

Bootstrapを使うためには、まずプロジェクトにBootstrapのCSSとJavaScriptファイルを組み込む必要があります。組み込む方法は2つあり、CDNを使用するか、ダウンロードしてローカルに組み込む方法があります。

<!-- BootstrapのCDNを使用する場合 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<!-- ローカルにダウンロードして使用する場合 -->
<!-- <link rel="stylesheet" href="path/to/bootstrap.min.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/popper.min.js"></script>
<script src="path/to/bootstrap.min.js"></script> -->

シンプルなナビゲーションバーの作成

Bootstrapを使った、シンプルなナビゲーションバーを作成するコードです。

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- ロゴやサイト名などのコンテンツをここに追加 -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

Tailwind CSSの特徴とカスタマイズ

Tailwind CSSは、クラスベースのフレームワークで、HTMLに直接クラスを追加することでスタイルが適用されます。柔軟にカスタマイズしやすい点が特徴かなと思います。

Tailwind CSSの導入と設定

Tailwind CSSを導入する方法は、さまざまなビルドツールを使用することで選択肢が広がります。ここでは、npmを使った基本的なセットアップ方法を解説します。

# npmを使ってTailwind CSSをインストール
npm install tailwindcss

Tailwind CSSの設定ファイル「tailwind.config.js」を作成し、必要なスタイルをカスタマイズできます。

ボタンのカスタマイズ

Tailwind CSSの魅力の1つは、ボタンなどのコンポーネントを簡単にカスタマイズできる点です。以下ののようにコーディングすることで、カラーやサイズを変更することができます。

<!-- 緑色の背景と白い文字色を持つボタン -->
<button class="bg-green-500 text-white font-bold py-2 px-4 rounded">
  Click Me
</button>

<!-- 赤色の背景と白い文字色を持つ大きなボタン -->
<button class="bg-red-600 text-white font-bold py-3 px-6 rounded-lg text-xl">
  Sign Up Now
</button>