Skip to content

11. CSS フレームワークの紹介

CSS フレームワークは、ウェブサイトのデザインを迅速かつ効率的に行うためのツールです。これらのフレームワークは、予め用意されたスタイルシートやコンポーネントを使用することで、デザインの一貫性を保ちながら作業量を大幅に削減できます。本章では、特に人気のある CSS フレームワークを紹介します。

11.1 CSS フレームワークとは

CSS フレームワークは、再利用可能なコードのセットで、特定の設計方針やガイドラインに基づいて作成されています。これにより、開発者は独自にスタイルを一から設計する時間を節約し、コードの一貫性と保守性を向上させることができます。

11.2 人気の CSS フレームワーク

11.2.1 Bootstrap

Bootstrap は、Twitter 社が開発した最も広く普及している CSS フレームワークの一つです。レスポンシブデザインに対応しており、様々なデバイスに対して適応可能なページを簡単に作成できます。

Bootstrap の基本的な使い方

  1. Bootstrap の CDN リンクを HTML ドキュメントの<head>タグ内に追加します。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap Example</title>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    />
  </head>
  <body>
    <!-- コンテンツここに -->
  </body>
</html>
  1. 簡単なボタンを追加してみましょう。
<button type="button" class="btn btn-primary">Primary Button</button>

このコードをブラウザで表示すると、スタイリッシュな青いボタンが表示されます。

11.2.2 Tailwind CSS

Tailwind CSS は、ユーティリティファーストのアプローチを採用したフレームワークです。具体的なクラスを使い、細かくスタイルを指定できます。

Tailwind CSS の基本的な使い方

  1. Tailwind CSS の CDN リンクを HTML ドキュメントの<head>タグ内に追加します。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Example</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <!-- コンテンツここに -->
  </body>
</html>
  1. Tailwind CSS のクラスを使って簡単なボタンを追加します。
<button
  class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>
  Primary Button
</button>

Tailwind のクラスを使うことで、柔軟にスタイルを調整できます。

11.2.3 Bulma

Bulma は、フレキシブルでありながら使いやすい CSS フレームワークです。Flexbox をベースにしており、グリッドシステムが非常に便利です。

Bulma の基本的な使い方

  1. Bulma の CDN リンクを HTML ドキュメントの<head>タグ内に追加します。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bulma Example</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
    />
  </head>
  <body>
    <!-- コンテンツここに -->
  </body>
</html>
  1. Bulma のクラスを使って簡単なボタンを追加します。
<button class="button is-primary">Primary Button</button>

Bulma のクラスを使うことで、見た目の調整が簡単に行えます。

11.3 まとめ

CSS フレームワークを使うことで、デザイン作業が飛躍的に効率化されます。今回紹介した Bootstrap、Tailwind CSS、Bulma は、それぞれ異なる特徴を持っており、プロジェクトのニーズに応じて選ぶことができます。いずれのフレームワークも、まずは簡単なプロジェクトで試してみて、自分に合ったものを見つけてください。