Day 10: 総合プロジェクト
今日学ぶこと
- 10日間の知識を総動員してポートフォリオサイトをスタイリング
- CSS設計のベストプラクティス
- 実践的なスタイリング手法
プロジェクト概要
HTML編（10日で覚えるHTML）で作成したポートフォリオサイトに、CSSで本格的なデザインを適用します。
flowchart TB
subgraph Pages["スタイリング対象"]
Home["index.html<br>トップページ"]
About["about.html<br>自己紹介"]
Works["works.html<br>作品集"]
Contact["contact.html<br>お問い合わせ"]
CSS["styles.css<br>共通スタイル"]
end
CSS --> Home
CSS --> About
CSS --> Works
CSS --> Contact
style CSS fill:#8b5cf6,color:#fff
style Home fill:#3b82f6,color:#fff
style About fill:#3b82f6,color:#fff
style Works fill:#3b82f6,color:#fff
style Contact fill:#3b82f6,color:#fff
CSS設計: 変数とリセット
/* ========================================
CSS Variables & Reset
======================================== */
:root {
/* Colors */
--color-primary: #3b82f6;
--color-primary-dark: #1d4ed8;
--color-primary-light: #93c5fd;
--color-gray-50: #f8fafc;
--color-gray-100: #f1f5f9;
--color-gray-200: #e2e8f0;
--color-gray-300: #cbd5e1;
--color-gray-500: #64748b;
--color-gray-700: #334155;
--color-gray-900: #0f172a;
/* Typography */
--font-sans: "Inter", system-ui, sans-serif;
--font-mono: "Fira Code", monospace;
/* Spacing */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
/* Borders */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
--shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
/* Layout */
--max-width: 1200px;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.6;
color: var(--color-gray-900);
background: var(--color-gray-50);
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--color-primary);
text-decoration: none;
}
a:hover {
color: var(--color-primary-dark);
}
ul, ol {
list-style: none;
}
ナビゲーション
/* ========================================
Navigation
======================================== */
.navbar {
background: white;
box-shadow: var(--shadow-sm);
position: sticky;
top: 0;
z-index: 100;
}
.navbar-inner {
display: flex;
justify-content: space-between;
align-items: center;
max-width: var(--max-width);
margin: 0 auto;
padding: var(--space-md) var(--space-lg);
}
.navbar .logo {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-primary);
}
.nav-links {
display: flex;
gap: var(--space-lg);
}
.nav-links a {
color: var(--color-gray-500);
font-weight: 500;
padding: var(--space-xs) 0;
border-bottom: 2px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.nav-links a:hover,
.nav-links a.active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
@media (max-width: 767px) {
.nav-links {
gap: var(--space-md);
font-size: 0.875rem;
}
}
ヒーローセクション
/* ========================================
Hero Section
======================================== */
.hero {
text-align: center;
padding: var(--space-3xl) var(--space-lg);
background: linear-gradient(135deg, var(--color-primary), #8b5cf6);
color: white;
}
.hero h1 {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 800;
line-height: 1.1;
margin-bottom: var(--space-md);
}
.hero .subtitle {
font-size: clamp(1.125rem, 2.5vw, 1.5rem);
opacity: 0.9;
margin-bottom: var(--space-xl);
}
.hero .cta-button {
display: inline-block;
background: white;
color: var(--color-primary);
padding: var(--space-md) var(--space-xl);
border-radius: var(--radius-full);
font-weight: 700;
font-size: 1.125rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero .cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
color: var(--color-primary-dark);
}
スキルテーブル
/* ========================================
Skills Table
======================================== */
.section {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--space-3xl) var(--space-lg);
}
.section-title {
font-size: 2rem;
font-weight: 700;
margin-bottom: var(--space-xl);
text-align: center;
}
.skills-table {
width: 100%;
border-collapse: collapse;
background: white;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
}
.skills-table th,
.skills-table td {
padding: var(--space-md) var(--space-lg);
text-align: left;
}
.skills-table thead {
background: var(--color-gray-900);
color: white;
}
.skills-table tbody tr {
border-bottom: 1px solid var(--color-gray-200);
transition: background-color 0.2s ease;
}
.skills-table tbody tr:hover {
background: var(--color-gray-50);
}
.skills-table tbody tr:last-child {
border-bottom: none;
}
カードグリッド
/* ========================================
Card Grid
======================================== */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-lg);
}
.card {
background: white;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.card-image {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-body {
padding: var(--space-lg);
}
.card-body h3 {
font-size: 1.25rem;
margin-bottom: var(--space-sm);
}
.card-body p {
color: var(--color-gray-500);
font-size: 0.875rem;
margin-bottom: var(--space-md);
}
.card-tag {
display: inline-block;
background: var(--color-gray-100);
color: var(--color-gray-700);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 500;
margin-right: var(--space-xs);
}
フォーム
/* ========================================
Forms
======================================== */
.form {
max-width: 640px;
margin: 0 auto;
}
.form-group {
margin-bottom: var(--space-lg);
}
.form-group label {
display: block;
font-weight: 600;
margin-bottom: var(--space-sm);
color: var(--color-gray-700);
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: var(--space-md);
border: 1px solid var(--color-gray-300);
border-radius: var(--radius-md);
font-family: inherit;
font-size: 1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.btn-primary {
display: inline-block;
background: var(--color-primary);
color: white;
padding: var(--space-md) var(--space-xl);
border: none;
border-radius: var(--radius-md);
font-family: inherit;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.btn-primary:hover {
background: var(--color-primary-dark);
transform: translateY(-1px);
}
.btn-primary:active {
transform: translateY(0);
}
フッター
/* ========================================
Footer
======================================== */
.footer {
background: var(--color-gray-900);
color: var(--color-gray-500);
padding: var(--space-2xl) var(--space-lg);
}
.footer-inner {
max-width: var(--max-width);
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-md);
}
.footer a {
color: var(--color-gray-300);
}
.footer a:hover {
color: white;
}
@media (max-width: 767px) {
.footer-inner {
flex-direction: column;
text-align: center;
}
}
アクセシビリティ対応
/* ========================================
Accessibility
======================================== */
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
振り返り: 10日間で学んだこと
flowchart TB
subgraph Journey["10日間の学習の旅"]
D1["Day 1<br>CSS入門"]
D2["Day 2<br>セレクタ"]
D3["Day 3<br>ボックスモデル"]
D4["Day 4<br>タイポグラフィ"]
D5["Day 5<br>色と背景"]
D6["Day 6<br>Flexbox"]
D7["Day 7<br>Grid"]
D8["Day 8<br>レスポンシブ"]
D9["Day 9<br>アニメーション"]
D10["Day 10<br>総合プロジェクト"]
end
D1 --> D2 --> D3 --> D4 --> D5
D5 --> D6 --> D7 --> D8 --> D9 --> D10
style D1 fill:#3b82f6,color:#fff
style D2 fill:#3b82f6,color:#fff
style D3 fill:#8b5cf6,color:#fff
style D4 fill:#8b5cf6,color:#fff
style D5 fill:#22c55e,color:#fff
style D6 fill:#22c55e,color:#fff
style D7 fill:#f59e0b,color:#fff
style D8 fill:#f59e0b,color:#fff
style D9 fill:#ef4444,color:#fff
style D10 fill:#ef4444,color:#fff
| Day | トピック | 主要な概念 |
|---|---|---|
| 1 | CSS入門 | 基本構文、セレクタ、色 |
| 2 | セレクタとカスケード | 詳細度、継承、擬似クラス |
| 3 | ボックスモデル | padding, margin, border, display |
| 4 | タイポグラフィ | フォント、rem, Google Fonts |
| 5 | 色と背景 | グラデーション、shadow、透明度 |
| 6 | Flexbox | 1次元レイアウト |
| 7 | CSS Grid | 2次元レイアウト |
| 8 | レスポンシブ | メディアクエリ、clamp() |
| 9 | アニメーション | transition, transform, @keyframes |
| 10 | 総合プロジェクト | ポートフォリオサイトのスタイリング |
次のステップ
1. JavaScript
CSSと組み合わせてインタラクティブなUIを実現します。
2. CSSフレームワーク
Tailwind CSSやBootstrapで開発を効率化します。
3. CSSプリプロセッサ
Sassで変数やミックスインなどの高度な機能を使います。
4. CSS設計手法
BEMやCSS Modulesで大規模プロジェクトを管理します。
まとめ
重要ポイント
- CSS変数で一貫したデザインシステムを構築する
- Flexbox + Gridで柔軟なレイアウトを作る
- モバイルファーストでレスポンシブに対応する
- **
prefers-reduced-motion**でアクセシビリティを確保する - CSSはHTML + JavaScriptと組み合わせて力を発揮する
練習問題
問題1: 基本
この章のスタイルを参考に、自分のポートフォリオサイトをスタイリングしてください。
問題2: 応用
ダークモード対応を追加してください（prefers-color-scheme: dark）。
チャレンジ問題
以下のチェックリストをすべてクリアするポートフォリオサイトを完成させてください：
- CSS変数でカラーパレットを管理
- レスポンシブデザイン（モバイル・タブレット・デスクトップ）
- ホバーアニメーション付きのカード
- フォーカススタイル（
:focus-visible） -
prefers-reduced-motion対応 - Google Fontsの使用
- フォームのスタイリング
参考リンク
おめでとうございます！ 10日間のCSS学習を完了しました。HTMLとCSSの基礎を身につけた今、あなたはWebページの構造とデザインの両方を作れるようになりました。次はJavaScriptを学んで、ページにインタラクティブな機能を追加しましょう！