はじめに
アプリ開発課題の中で環境構築の中でTailwind とBootstrapを選択する場面で、Tailwind を選択しました。
どんなものなのかわかっていなかったので改めて調べたことをまとめてみます。
そもそもCSSとは何か
- CSS（Cascading Style Sheets）は、HTMLで記述されたウェブページのスタイルを指定するための言語
- デザインやレイアウトを定義し、ウェブページの見た目を整えるために使用
| 可能にする事 | 詳細 |
|---|---|
| レイアウトの制御 | 要素配置、サイズ、スペーシングなどの変更 |
| フォントスタイル | テキストフォント、サイズ、色などの指定 |
| 色指定 | 背景色、テキスト色、ボーダー色などの設定 |
| ﾚｽﾎﾟﾝｼﾌﾞデザイン | デバイスの画像サイズに応じたスタイル調整 |
| アニメーションとトランジション | 要素の動きや変化をアニメーションで表現 |
ではCSSフレームワークとは何か？
- CSSフレームワークは、スタイルの設計と開発を効率化するための一連のツールやコンポーネントを提供するライブラリのこと
- フレームワークには以下のようなものが存在する
プリプロセッサフレームワーク:
SassやLessなど、CSSのプリプロセッサを使ったフレームワーク。より効率的なスタイルの作成をサポートします。
コンポーネントベースフレームワーク:
BootstrapやMaterializeなど、事前にスタイリングされたUIコンポーネント（ボタン、ナビゲーションバーなど）を提供します。
ユーティリティファーストフレームワーク:
Tailwind CSSなど、クラスを用いた細かいスタイル設定を可能にするフレームワークです。
TailwindとBootstrapの違いとか
|
フレームワーク |
特徴 | メリット | デメリット |
|---|---|---|---|
| Bootstrap | コンポーネントベース、レスポンシブデザイン | 事前にスタイリングされた豊富なコンポーネント、簡単にカスタマイズ可能 | スタイルが統一されすぎるため、独自性を出しにくい |
| Tailwind CSS | ユーティリティファースト、カスタマイズ性が高い | 高いカスタマイズ性、スタイルが明示的でわかりやすい | クラスが多くなるとHTMLが煩雑になりやすい |
簡単な例
まずはCSSとHTMLを自分で設定してスタイリングされたボタンを作成するとどうなるかを示します
-
HTML
-
CSS追加
-
CSSだけだと何も出てこない！
Tailwindでボタンを作ってみる
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind Button</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<button class="bg-blue-500 text-white border-none py-2 px-4 text-lg rounded cursor-pointer transition-colors duration-300 hover:bg-blue-700">
Click Me
</button>
</body>
</html>
CSSフレームワークはどのディレクトリやファイルにコードを入力するものなのか
- CDNを使用する場合: HTMLファイルにCDNリンクを追加する
- パッケージマネージャーを使用する場合: src/ または app/assets/ ディレクトリにフレームワークをインポートし、スタイルをカスタマイズする
- ビルドツールの設定: tailwind.config.js などの設定ファイルを用意し、カスタマイズを行う
- スタイルの適用: HTMLファイルやテンプレートにフレームワークのクラスを直接追加する
Tailwindなどのフレームワークを使用してみて
フレームワークを使用することで、スタイルの適用が簡単になり、コードの重複が減少しますが、自分で完全に自由なスタイルを定義する場合と比較すると、フレームワークの制約があるという事がわかりました。
複雑なサイトになるほどこのようなフレームワークを使用したほうがいいという事が実感できました
下記参考サイトも載せておきます
用語
- コンポーネント:ソフトウェア開発において、再利用可能な部品やモジュールのことを指します
-
CDN:（Content Delivery Network）インターネットコンテンツの配信を高速化し、パフォーマンス、可用性、信頼性を向上させるためのネットワークインフラ
Cloudflare: 高速なCDNとセキュリティ機能を提供する有名なCDNプロバイダー。
Amazon CloudFront: AWSのCDNサービスで、スケーラビリティとパフォーマンスを重視。
Akamai: 世界的に展開しているCDNで、大規模なトラフィック処理に対応。
Google Cloud CDN: Google Cloud PlatformのCDNサービスで、グローバルなネットワークを利用。
Microsoft Azure CDN: AzureのCDNサービスで、Microsoftのクラウドインフラを活用。