デザイン・カスタマイズ
CSS カスタマイズガイド
CSS の書き方 — 3つのアプローチ
CastMatrix のフロントエンドは Tailwind CSS を使っています。
カスタム CSS を追加する方法は3段階あります。難しいほど影響範囲が広いです。
| アプローチ | 難易度 | 影響範囲 | 使いどころ |
|---|---|---|---|
| ① Tailwind クラスを変える | ★☆☆ | 変更した要素のみ | 色・余白・フォントサイズ等の微調整 |
② <style> ブロックに書く |
★★☆ | そのファイルのみ | 特定ページだけのカスタムスタイル |
| ③ グローバル CSS に書く | ★★★ | 全ページ | サイト共通のスタイル追加 |
① Tailwind クラスを変える（最も簡単）
HTML タグの class="..." 内にあるクラスを変えるだけです。
よく使うクラスの早見表
色
text-brand → ブランドカラーのテキスト（#c8a96e）
bg-brand → ブランドカラーの背景
text-gray-900 → ほぼ黒
text-gray-500 → グレー（説明文など）
text-white → 白
bg-white → 白背景
bg-gray-50 → 薄いグレー背景（デフォルトの body 色）
文字サイズ
text-xs → 極小（約12px）
text-sm → 小（約14px）
text-base → 普通（約16px）
text-lg → 大（約18px）
text-xl → より大（約20px）
text-2xl → 見出し用（約24px）
text-3xl → 大見出し（約30px）
余白（padding / margin）
p-2 → 全方向 padding 8px
p-4 → 全方向 padding 16px
px-4 → 左右 padding 16px
py-2 → 上下 padding 8px
m-4 → 全方向 margin 16px
mb-4 → 下 margin 16px
mt-4 → 上 margin 16px
gap-2 → グリッド/flex の間隔 8px
gap-4 → グリッド/flex の間隔 16px
角丸
rounded → 軽い角丸（4px）
rounded-lg → やや丸め（8px）
rounded-xl → 丸め（12px）
rounded-full → 完全な円・楕円（pill 形状）
影
shadow → 薄い影
shadow-md → 中程度の影
shadow-lg → 濃い影
shadow-none → 影なし
レスポンシブ（画面サイズ別）
md:クラス名 → 768px 以上に適用
lg:クラス名 → 1024px 以上に適用
max-md:クラス名 → 768px 未満のみ適用
変更例: キャストカードをもっと丸くする
<!-- 変更前 -->
<a href={...} class="block bg-white rounded-lg overflow-hidden shadow ...">
<!-- 変更後（角丸を大きく） -->
<a href={...} class="block bg-white rounded-2xl overflow-hidden shadow-md ...">
② <style> ブロックに書く（ページ単位のカスタム）
.astro ファイルの末尾または先頭に <style> ブロックを追加します。
Astro の <style> はそのファイルにだけ適用されます（他ページに影響しません）。
<!-- frontend/src/pages/home.astro の例 -->
---
// ... frontmatter
---
<style>
/* ヒーローセクションのグラデーション */
.hero-overlay {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.2) 0%,
rgba(0, 0, 0, 0.6) 100%
);
}
/* スクロールバー非表示（画像スライダー用） */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
scrollbar-width: none;
-ms-overflow-style: none;
}
</style>
<BaseLayout ...>
<div class="hero-overlay ...">...</div>
</BaseLayout>
<style> ブロックで Tailwind のクラスを使いたい場合
@apply ディレクティブで Tailwind のクラスを CSS に組み込めます。
<style>
.cast-card-custom {
@apply bg-white rounded-2xl overflow-hidden shadow-md;
/* さらにカスタム CSS も追加できる */
border: 1px solid rgba(200, 169, 110, 0.3);
transition: transform 0.2s ease;
}
.cast-card-custom:hover {
transform: translateY(-2px);
}
</style>
③ グローバル CSS に書く（全ページ共通）
グローバル CSS ファイルの作成
frontend/src/styles/global.css を新規作成します。
/* frontend/src/styles/global.css */
/* --- CSS カスタムプロパティ（変数）--- */
:root {
--color-brand: #c8a96e;
--color-brand-dark: #b8975a;
--font-heading: 'Noto Sans JP', sans-serif;
}
/* --- 全ページ共通スタイル --- */
h1, h2, h3 {
font-feature-settings: 'palt'; /* 日本語の文字間調整 */
}
/* --- Tailwind を上書きしたいとき --- */
@layer utilities {
.text-balance {
text-wrap: balance; /* 見出しの改行を均等に */
}
}
/* --- 独自コンポーネントクラス --- */
@layer components {
.btn-brand {
@apply bg-brand text-white px-6 py-2 rounded-full font-medium text-sm;
@apply hover:bg-brand-dark transition-colors;
}
.section-title {
@apply text-lg font-bold mb-3 border-l-4 border-brand pl-3;
}
}
BaseLayout.astro に読み込む
<!-- frontend/src/layouts/BaseLayout.astro -->
---
import '../styles/global.css' // ← この行を追加
import SiteHeader from '../components/SiteHeader.astro'
// ... 以下略
---
グローバル CSS で作ったクラスを使う
<!-- 任意のページで使用可能 -->
<h2 class="section-title">出勤中のキャスト</h2>
<a href="/casts" class="btn-brand">一覧を見る</a>
CSS カスタムプロパティ（変数）の使い方
CSS 変数を使うと、カラーコードを1箇所で管理できます。
/* frontend/src/styles/global.css */
:root {
--color-brand: #c8a96e;
--color-brand-dark: #b8975a;
--color-bg: #f9fafb;
--color-text: #111827;
--border-radius-card: 12px;
}
<!-- .astro ファイルの <style> ブロックで参照 -->
<style>
.my-card {
background: var(--color-bg);
border-radius: var(--border-radius-card);
border-left: 3px solid var(--color-brand);
}
</style>
よくあるカスタマイズパターン
セクションの区切り線をおしゃれにする
<style>
.divider-brand {
position: relative;
text-align: center;
margin: 1.5rem 0;
}
.divider-brand::before,
.divider-brand::after {
content: '';
position: absolute;
top: 50%;
width: calc(50% - 2rem);
height: 1px;
background: #c8a96e;
opacity: 0.4;
}
.divider-brand::before { left: 0; }
.divider-brand::after { right: 0; }
</style>
<div class="divider-brand">
<span class="text-brand text-xs tracking-widest">◆</span>
</div>
カードにホバーアニメーションを追加する
<!-- CastCard.astro の <a> タグに追加 -->
<a href={...} class="block bg-white rounded-lg overflow-hidden shadow
transition-all duration-200 hover:-translate-y-1 hover:shadow-lg">
または <style> ブロックで:
<style>
.cast-card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cast-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
</style>
見出しに装飾ラインを付ける
<style>
.heading-decorated {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.1rem;
font-weight: 700;
}
.heading-decorated::before,
.heading-decorated::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(to right, transparent, #c8a96e);
}
.heading-decorated::after {
background: linear-gradient(to left, transparent, #c8a96e);
}
</style>
<h2 class="heading-decorated">出勤中のキャスト</h2>
フォントを見出しだけ変える
/* global.css */
h1, h2, h3, h4 {
font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', serif;
font-feature-settings: 'palt';
}
よくある初心者ミスと対策
ミス 1: !important を多用する
!important は最後の手段です。使うと後のカスタマイズが困難になります。
/* NG */
.my-class { color: red !important; }
/* OK: セレクターを具体的にして優先度を上げる */
.cast-card .cast-name { color: red; }
/* OK: @layer で Tailwind より後に適用する */
@layer utilities {
.text-custom-red { color: red; }
}
ミス 2: インラインスタイルと Tailwind を混在させる
<!-- NG: style 属性と class が競合しやすい -->
<div class="text-gray-900" style="color: #333333;">テキスト</div>
<!-- OK: どちらかに統一する -->
<div class="text-gray-900">テキスト</div>
<!-- または -->
<div style="color: #333333;">テキスト</div>
ミス 3: モバイル確認を忘れる
CastMatrix はモバイルファーストです。デスクトップで見た目がよくても、スマートフォンで崩れることがあります。
- ブラウザの開発者ツール（F12）→「スマートフォン表示」で必ず確認してください
- 特に文字サイズ・余白・グリッド列数に注意
ミス 4: グローバル CSS をファイルごとに書いてしまう
同じスタイルを複数の .astro ファイルの <style> ブロックに書くと、変更が必要になったときに全部直す必要があります。
共通で使うスタイルは global.css にまとめてください。
繰り返し使うスタイル → global.css の @layer components に
そのページだけのスタイル → そのページの <style> ブロックに
Tailwind クラスの調べ方
カスタマイズ中に「このクラスは何？」と思ったら:
- 公式ドキュメント: https://tailwindcss.com/docs
左側の検索ボックスにpaddingやcolorなどを入力すると一覧が出ます - Tailwind Play: https://play.tailwindcss.com
ブラウザで Tailwind を試せるプレイグラウンドです（インストール不要）