Skip to content

Commit dc29765

Browse files
takerucamtakerucam
authored
Merge pull request #24 from jigintern/add/css-animation
CSS Animation の資料を追加
2 parents 50a3a00 + f202134 commit dc29765

18 files changed

Lines changed: 8059 additions & 0 deletions

‎2025/css-animation/README.md‎

Lines changed: 824 additions & 0 deletions
Large diffs are not rendered by default.

‎2025/css-animation/about.html‎

Lines changed: 308 additions & 0 deletions
Large diffs are not rendered by default.

‎2025/css-animation/animations.css‎

Lines changed: 589 additions & 0 deletions
Large diffs are not rendered by default.

‎2025/css-animation/archive.html‎

Lines changed: 272 additions & 0 deletions
Large diffs are not rendered by default.

‎2025/css-animation/article.html‎

Lines changed: 273 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,273 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="description" content="モダンWebデザインの新潮流：2026年のトレンド - Design Journal">
7+
<meta name="theme-color" content="#3b82f6">
8+
<title>モダンWebデザインの新潮流：2026年のトレンド - Design Journal</title>
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12+
<link rel="stylesheet" href="styles.css">
13+
<link rel="stylesheet" href="animations.css">
14+
</head>
15+
<body data-theme="light" class="no-transition">
16+
<!-- Skip to content -->
17+
<a href="#main-content" class="skip-link">メインコンテンツへスキップ</a>
18+
19+
<!-- Navigation -->
20+
<nav class="nav" id="nav" role="navigation" aria-label="メインナビゲーション">
21+
<div class="nav-container">
22+
<a href="index.html" class="nav-logo" aria-label="ホームへ戻る">
23+
Design<span class="accent">Journal</span>
24+
</a>
25+
26+
<button class="nav-toggle" id="navToggle" aria-label="メニューを開く" aria-expanded="false">
27+
<span></span>
28+
<span></span>
29+
<span></span>
30+
</button>
31+
32+
<ul class="nav-menu" id="navMenu" role="list">
33+
<li><a href="index.html">ホーム</a></li>
34+
<li><a href="archive.html">アーカイブ</a></li>
35+
<li><a href="about.html">About</a></li>
36+
</ul>
37+
38+
<button class="theme-toggle" id="themeToggle" aria-label="ダークモード切り替え">
39+
<svg class="sun-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
40+
stroke-width="2" aria-hidden="true">
41+
<circle cx="12" cy="12" r="5" />
42+
<line x1="12" y1="1" x2="12" y2="3" />
43+
<line x1="12" y1="21" x2="12" y2="23" />
44+
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
45+
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
46+
<line x1="1" y1="12" x2="3" y2="12" />
47+
<line x1="21" y1="12" x2="23" y2="12" />
48+
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
49+
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
50+
</svg>
51+
<svg class="moon-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
52+
stroke-width="2" aria-hidden="true">
53+
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
54+
</svg>
55+
</button>
56+
</div>
57+
</nav>
58+
59+
<!-- Reading Progress -->
60+
<div class="reading-progress" role="progressbar" aria-label="記事読了進捗" aria-valuenow="0" aria-valuemin="0"
61+
aria-valuemax="100"></div>
62+
63+
<!-- Main Content -->
64+
<main id="main-content">
65+
<!-- Article Hero -->
66+
<article class="article-hero">
67+
<div class="article-hero-image">
68+
<div class="image-placeholder parallax-image"
69+
style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);" role="img"
70+
aria-label="記事のヒーロー画像"></div>
71+
<!-- パララックス装飾要素 -->
72+
<div class="parallax-shapes" aria-hidden="true">
73+
<div class="parallax-shape parallax-circle-1"></div>
74+
<div class="parallax-shape parallax-circle-2"></div>
75+
<div class="parallax-shape parallax-circle-3"></div>
76+
<div class="parallax-shape parallax-square"></div>
77+
</div>
78+
</div>
79+
<div class="container-narrow">
80+
<div class="article-hero-content fade-in-on-scroll">
81+
<div class="article-meta">
82+
<span class="category">デザイン</span>
83+
<time datetime="2026-01-10">2026年1月10日</time>
84+
<span class="read-time">8分で読める</span>
85+
</div>
86+
<h1 class="article-title">モダンWebデザインの新潮流：2026年のトレンド</h1>
87+
<p class="article-subtitle">
88+
ユーザー体験を重視したデザインアプローチから、最新のビジュアルトレンドまで。
89+
今年注目すべきWebデザインの方向性を徹底解説します。
90+
</p>
91+
<div class="article-author">
92+
<div class="author-avatar">
93+
<div class="avatar-placeholder"
94+
style="background: linear-gradient(135deg, #3b82f6, #8b5cf6);" role="img"
95+
aria-label="著者のアバター"></div>
96+
</div>
97+
<div class="author-info">
98+
<div class="author-name">山田 太郎</div>
99+
<div class="author-role">UI/UXデザイナー</div>
100+
</div>
101+
</div>
102+
</div>
103+
</div>
104+
</article>
105+
106+
<!-- Article Content -->
107+
<div class="article-content">
108+
<div class="container-narrow">
109+
<section class="content-section fade-in-on-scroll" id="section1">
110+
<h2>ミニマリズムの進化</h2>
111+
<p>
112+
2026年のWebデザインは、ミニマリズムの新しい段階に入っています。
113+
単なる「少なさ」ではなく、「意図的な空白」と「戦略的な余白」が重要視されています。
114+
</p>
115+
<p>
116+
デザイナーたちは、ユーザーの注意を適切に誘導し、情報の階層を明確にするために、
117+
余白を積極的に活用しています。これにより、コンテンツがより呼吸し、
118+
ユーザーは圧倒されることなく情報を消化できるようになります。
119+
</p>
120+
<blockquote class="article-quote">
121+
「デザインとは、見た目を美しくすることではなく、機能を美しくすることだ」
122+
</blockquote>
123+
</section>
124+
125+
<section class="content-section fade-in-on-scroll" id="section2">
126+
<h2>インタラクティブな体験</h2>
127+
<p>
128+
View Transitions APIやScroll-driven Animationsなど、最新のWeb技術により、
129+
よりスムーズで直感的なインタラクションが可能になっています。
130+
</p>
131+
<p>
132+
これらの技術を活用することで、ページ遷移やスクロール体験が劇的に向上し、
133+
ユーザーはネイティブアプリのような滑らかな体験を得ることができます。
134+
</p>
135+
<div class="code-example">
136+
<pre><code>/* View Transitions API の例 */
137+
document.startViewTransition(() => {
138+
// DOM の更新
139+
updateContent();
140+
});</code></pre>
141+
</div>
142+
</section>
143+
144+
<section class="content-section fade-in-on-scroll" id="section3">
145+
<h2>アクセシビリティファースト</h2>
146+
<p>
147+
アクセシビリティは、もはやオプションではなく必須要件となっています。
148+
WCAG 2.1準拠は基本として、より包括的なデザインアプローチが求められています。
149+
</p>
150+
<p>
151+
キーボードナビゲーション、スクリーンリーダー対応、十分なコントラスト比など、
152+
すべてのユーザーが快適に利用できるデザインを目指すことが重要です。
153+
</p>
154+
</section>
155+
156+
<section class="content-section fade-in-on-scroll" id="section4">
157+
<h2>パフォーマンスとデザインの両立</h2>
158+
<p>
159+
美しいデザインと高速なパフォーマンスは、もはや二者択一ではありません。
160+
適切な最適化技術により、両立が可能になっています。
161+
</p>
162+
<p>
163+
GPU アクセラレーション、遅延読み込み、効率的なアニメーション実装など、
164+
パフォーマンスを犠牲にすることなく、リッチな体験を提供できます。
165+
</p>
166+
</section>
167+
</div>
168+
</div>
169+
170+
<!-- Related Articles -->
171+
<section class="related-articles" aria-labelledby="related-title">
172+
<div class="container">
173+
<h2 class="section-title" id="related-title">関連記事</h2>
174+
<div class="articles-grid">
175+
<article class="article-card fade-in-on-scroll">
176+
<a href="article.html" class="card-link-wrapper">
177+
<div class="card-image">
178+
<div class="image-placeholder"
179+
style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);" role="img"
180+
aria-label="記事のサムネイル"></div>
181+
</div>
182+
<div class="card-content">
183+
<div class="article-meta">
184+
<span class="category">開発</span>
185+
<time datetime="2026-01-08">2026年1月8日</time>
186+
</div>
187+
<h3 class="card-title">CSSアニメーションのパフォーマンス最適化</h3>
188+
</div>
189+
</a>
190+
</article>
191+
192+
<article class="article-card fade-in-on-scroll">
193+
<a href="article.html" class="card-link-wrapper">
194+
<div class="card-image">
195+
<div class="image-placeholder"
196+
style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);" role="img"
197+
aria-label="記事のサムネイル"></div>
198+
</div>
199+
<div class="card-content">
200+
<div class="article-meta">
201+
<span class="category">デザイン</span>
202+
<time datetime="2026-01-05">2026年1月5日</time>
203+
</div>
204+
<h3 class="card-title">タイポグラフィの基礎：読みやすさとデザイン性</h3>
205+
</div>
206+
</a>
207+
</article>
208+
209+
<article class="article-card fade-in-on-scroll">
210+
<a href="article.html" class="card-link-wrapper">
211+
<div class="card-image">
212+
<div class="image-placeholder"
213+
style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);" role="img"
214+
aria-label="記事のサムネイル"></div>
215+
</div>
216+
<div class="card-content">
217+
<div class="article-meta">
218+
<span class="category">チュートリアル</span>
219+
<time datetime="2026-01-03">2026年1月3日</time>
220+
</div>
221+
<h3 class="card-title">レスポンシブデザインの実装ガイド</h3>
222+
</div>
223+
</a>
224+
</article>
225+
</div>
226+
</div>
227+
</section>
228+
</main>
229+
230+
<!-- Footer -->
231+
<footer class="footer" role="contentinfo">
232+
<div class="container">
233+
<div class="footer-content">
234+
<div class="footer-section">
235+
<h3 class="footer-title">Design<span class="accent">Journal</span></h3>
236+
<p class="footer-description">
237+
デザインとテクノロジーの最新情報を<br>
238+
わかりやすく、実践的にお届けします。
239+
</p>
240+
</div>
241+
<div class="footer-section">
242+
<h4 class="footer-heading">ナビゲーション</h4>
243+
<ul class="footer-links" role="list">
244+
<li><a href="index.html">ホーム</a></li>
245+
<li><a href="archive.html">アーカイブ</a></li>
246+
<li><a href="about.html">About</a></li>
247+
</ul>
248+
</div>
249+
<div class="footer-section">
250+
<h4 class="footer-heading">カテゴリー</h4>
251+
<ul class="footer-links" role="list">
252+
<li><a href="archive.html?category=design">デザイン</a></li>
253+
<li><a href="archive.html?category=development">開発</a></li>
254+
<li><a href="archive.html?category=tutorial">チュートリアル</a></li>
255+
</ul>
256+
</div>
257+
<div class="footer-section">
258+
<h4 class="footer-heading">ソーシャル</h4>
259+
<ul class="social-links" role="list">
260+
<li><a href="#" class="social-link" aria-label="GitHub">GitHub</a></li>
261+
<li><a href="#" class="social-link" aria-label="Twitter">Twitter</a></li>
262+
<li><a href="#" class="social-link" aria-label="Dribbble">Dribbble</a></li>
263+
</ul>
264+
</div>
265+
</div>
266+
<div class="footer-bottom">
267+
<p>&copy; 2026 Design Journal. 学習目的で作成されました。</p>
268+
</div>
269+
</div>
270+
</footer>
271+
<script src="script.js"></script>
272+
</body>
273+
</html>

‎2025/css-animation/articles.json‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
[
2+
{
3+
"id": 1,
4+
"category": "development",
5+
"categoryLabel": "開発",
6+
"date": "2026-01-08",
7+
"dateLabel": "2026年1月8日",
8+
"title": "CSSアニメーションのパフォーマンス最適化",
9+
"excerpt": "スムーズなアニメーションを実現するための実践的なテクニックとベストプラクティス",
10+
"gradient": "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
11+
"link": "article.html"
12+
},
13+
{
14+
"id": 2,
15+
"category": "design",
16+
"categoryLabel": "デザイン",
17+
"date": "2026-01-05",
18+
"dateLabel": "2026年1月5日",
19+
"title": "タイポグラフィの基礎：読みやすさとデザイン性",
20+
"excerpt": "フォント選択から行間設定まで、美しく機能的なタイポグラフィを実現する方法",
21+
"gradient": "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
22+
"link": "article.html"
23+
},
24+
{
25+
"id": 3,
26+
"category": "tutorial",
27+
"categoryLabel": "チュートリアル",
28+
"date": "2026-01-03",
29+
"dateLabel": "2026年1月3日",
30+
"title": "レスポンシブデザインの実装ガイド",
31+
"excerpt": "モバイルファーストアプローチで、あらゆるデバイスに対応するサイトを構築",
32+
"gradient": "linear-gradient(135deg, #fa709a 0%, #fee140 100%)",
33+
"link": "article.html"
34+
},
35+
{
36+
"id": 4,
37+
"category": "design",
38+
"categoryLabel": "デザイン",
39+
"date": "2025-12-28",
40+
"dateLabel": "2025年12月28日",
41+
"title": "カラーパレットの選び方：理論と実践",
42+
"excerpt": "色彩理論を活用して、ブランドに最適な配色を見つける方法を解説",
43+
"gradient": "linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)",
44+
"link": "article.html"
45+
},
46+
{
47+
"id": 5,
48+
"category": "development",
49+
"categoryLabel": "開発",
50+
"date": "2025-12-25",
51+
"dateLabel": "2025年12月25日",
52+
"title": "View Transitions APIで実現する滑らかなページ遷移",
53+
"excerpt": "最新のWeb APIを使って、ネイティブアプリのような体験を提供",
54+
"gradient": "linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)",
55+
"link": "article.html"
56+
},
57+
{
58+
"id": 6,
59+
"category": "tutorial",
60+
"categoryLabel": "チュートリアル",
61+
"date": "2025-12-20",
62+
"dateLabel": "2025年12月20日",
63+
"title": "アクセシビリティを考慮したUI設計",
64+
"excerpt": "すべてのユーザーに優しいインターフェースを作るための実践的アプローチ",
65+
"gradient": "linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)",
66+
"link": "article.html"
67+
}
68+
]

0 commit comments

Comments
 (0)