目次
Ｔａｉｌｗｉｎｄ ＣＳＳ実践入門 （エンジニア選書）
- 工藤 智祥（著）
-
# ■第1章 ユーティリティファーストとは何か
1.1 ユーティリティファーストによるマークアップの基本
「セマンティックな」CSSによるアプローチ
Tailwind CSSによるユーティリティファーストなアプローチ
1.2 ユーティリティファーストのメリット
クラス名を考える必要がない
HTMLとCSSを交互に見る必要がない
影響範囲が明確である
1.3 CSS設計の変化の歴史
BEM──セマンティックなCSSにおける規約
CSS ModulesとScoped CSS──コンポーネント志向とスコープの模倣
CSS in JS──テーマオブジェクトという発明
1.4 既存のCSS設計から学べる教訓
詳細度やカスケーディングといったCSSの性質を考慮するのは難しい
多くの開発者はクラス名を工夫するよりもコンポーネントを設計するほうが得意
UIデザインの自由度は一貫性のなさとトレードオフの関係である
1.5 なぜ今ユーティリティファーストなのか
■第2章 Tailwind CSSはどういうフレームワークか
2.1 Tailwind CSSが何を提供しているか
ユーティリティを静的なCSSで提供すること
ユーティリティこそがメインのクラスであること
カスタマイズが始めから念頭に置かれていること
最小限のサイズのCSSを提供すること
ヴァリアントによる条件付きスタイルのサポート
2.2 Tailwind CSSが何をやっていないか
便利なUIコンポーネントは提供しない
CSSの理解を不要にするものではない
2.3 まとめ
■第3章 Tailwind CSSを導入する
3.1 Tailwind CSSをインストールする
Tailwind CLIを用いてプロジェクトのセットアップをする
PostCSSプラグインとして用いる
webpack・Viteなどのバンドラに統合する
スタンドアローン版Tailwind CLIを利用する
3.2 設定ファイルを書く──セットアップに必要な設定
contentでクラスを使うファイルを設定する
importantで詳細度をコントロールする
3.3 設定ファイルを書く──テーマをカスタマイズする
themeの構造
theme.colors──カラーテーマを変更する
theme.spacing──空白の幅を変更する
theme.screens──ブレークポイントを変更する
ほかの値を参照する
特定のコアプラグインを無効化する
3.4 開発用に確認する
Play CDNを利用する
Tailwind Playを利用する
3.5 エディタをセットアップする
VS Code向けの拡張機能をインストールする
■第4章 Tailwind CSSでマークアップする
4.1 Tailwind CSSにおけるマークアップ
大量のクラスを飼い馴らす
使っているクラスを抽出できるように書く
4.2 基本的なユーティリティ
背景色
文字
スペーシング
ボーダー
サイズと形
画像および置換要素
表示と非表示
フレックスボックスとグリッド
箇条書き
表
ブロックのレイアウトを制御する
効果
CSSフィルタ
アニメーションとトランジション
トランスフォーム
要素のはみ出しとスクロール
フォームとインタラクション
SVG
4.3 基本的なモディファイア
擬似クラス
擬似要素
アットルールによる分岐──メディアクエリ、@supportsなど
属性に対する分岐
groupとpeer──ほかの要素の状態に依存する
4.4 特殊な記法
設定にないスタイルを当てる
あるクラスを強制的に!importantにする
4.5 公式プラグインを便利に使う
Typographyプラグイン
Formsプラグイン
Aspect Ratioプラグイン
Container Queriesプラグイン
■第5章 Tailwind CSSの背後にあるコンセプトを理解する
5.1 プラガブルなCSSフレームワークであること
5.2 JITとは何か
Tailwind CSSは未使用のクラスを消しているわけではない
AOTコンパイルとPurgeCSSの時代
JITエンジンの導入
逆に、JITによって不可能になったこと
5.3 関数とディレクティブ
ディレクティブ
カスタム関数
5.4 Preflight
デフォルトのマージンは除去される
見出しのスタイルは完全に除去される
箇条書きリストのスタイルは完全に除去される
画像や動画はデフォルトでdisplay: blockである
ボーダーの色はデフォルトでテーマに従う
すべての要素はデフォルトでbox-sizing: border-boxである
5.5 ダークモード
ダークモードはどのようなしくみで実装できるか
Tailwind CSSにおける標準のダークモード
Tailwind CSS標準のダークモードを使わない方法
■第6章 Tailwind CSSでコンポーネントを設計する
6.1 CSSにとって抽象とは何か
CSSレイヤにおけるコンポーネントに意味はあるのか
6.2 コンポーネントの責務とインタフェース
正しい粒度にしつつ、命名を最小限にする
「基底コンポーネント」という誘惑に抗う
スタイルの上書きをいかにして許可するか
6.3 コンポーネントに閉じないスタイルを前提に設計する
Tailwind CSSのスタイルはコンポーネントに閉じない
コンポーネントを配る、どうやって？
6.4 Tailwind CSSを補完するライブラリ群
ヘッドレスなコンポーネントライブラリと組み合わせる
アニメーションをほかのライブラリに頼る
■第7章 Tailwind CSSをカスタマイズする
7.1 設定ファイルの高度な利用
クラスの抽出ルールを変更する
クラスの命名規則をカスタマイズする
7.2 presetを配布・利用する
プリセットを作成する
Tailwind CSSはどのように設定をマージするか
7.3 JavaScript APIを利用する
コードから設定を参照する
吐き出されるクラスの一覧を取得する
7.4 独自のプラグインを作成する
プラグインAPIの使い方
いつ、そしてなぜプラグインを自作するか
カスタムのコンポーネントとユーティリティを作る──ハーフレディングを除去した文字クラスを作る
カスタムのベーススタイルを作る──ダークテーマにCSS変数を使用する
カスタムのヴァリアントを作る──言語ごとにスタイルを変更できるようにする
■第8章 Tailwind CSSを既存のプロジェクトに導入する
8.1 なぜ既存のプロジェクトにTailwind CSSを導入するのか
Tailwind CSSを移行先として選定する
8.2 既存CSSとの衝突を避けるために気を付けること
移行のスコープを決める
Preflightを無効にする
prefixで同名のクラスとの衝突を避ける
ほかのCSSプリプロセッサと併用する
8.3 まとめ
■第9章 ユーティリティファーストでデザインシステムを構築する
9.1 デザインシステムとは何か
なぜデザインシステムにTailwind CSSを用いるのか
「ピクセルパーフェクト」は目的ではなく結果である
最初から完全を目指さない──コンポーネント集からスタートしない
9.2 デザイントークンを定義する
デザイントークンとは何か
トークンの命名──値どおりの名前（リテラル）か、意図による名前（セマンティック）か
カラーパレット──トークンに階層を設けるべきか
スペーシング──判断の負荷を減らす
タイポグラフィ──大きさを予測可能にする
9.3 デザインシステムを継続的に運用する
設定ファイルをライブラリとして配布する
配布される設定ファイルは何を提供すべきか
デザインシステムを管理するチームを作るべきか
9.4 Tailwind CSSだけでは担保できないデザインシステムの領域
コンポーネントの挙動に関するルール
画像などのリソース
アクセシビリティの担保
電気通信・通信工学 ランキング
電気通信・通信工学のランキングをご紹介します電気通信・通信工学 ランキング一覧を見る
前へ戻る
-
1位
-
2位
-
3位
-
4位
-
5位
-
6位
-
7位
-
8位
-
9位
-
10位
次に進む
