78 lines
4.5 KiB
HTML
78 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ja">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
|
||
<meta name="googlebot" content="noindex, nofollow">
|
||
<title>図解ライブラリ</title>
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='20' fill='%23FFFFFF'/><rect x='8' y='8' width='84' height='84' rx='14' fill='none' stroke='%233B82F6' stroke-width='4'/><circle cx='32' cy='40' r='10' fill='%233B82F6' opacity='0.8'/><circle cx='68' cy='40' r='10' fill='%2360A5FA' opacity='0.8'/><rect x='25' y='62' width='50' height='6' rx='3' fill='%2394A3B8' opacity='0.6'/><rect x='30' y='74' width='40' height='6' rx='3' fill='%2394A3B8' opacity='0.3'/></svg>">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap" rel="stylesheet">
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
ads: {
|
||
bg: '#FFFFFF',
|
||
surface: '#F8FAFC',
|
||
hover: '#F1F5F9',
|
||
border: '#E2E8F0',
|
||
accent: '#3B82F6',
|
||
'accent-light': '#2563EB',
|
||
text: '#1E293B',
|
||
muted: '#64748B',
|
||
dim: '#94A3B8',
|
||
}
|
||
},
|
||
fontFamily: {
|
||
sans: ['"Noto Sans JP"', '"Hiragino Sans"', '"Hiragino Kaku Gothic ProN"', '"Yu Gothic UI"', '"Meiryo"', 'sans-serif'],
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
</head>
|
||
<body class="bg-ads-bg text-slate-600 antialiased leading-relaxed border-t-4 border-ads-accent">
|
||
<main class="max-w-3xl mx-auto px-5 py-10 md:py-16">
|
||
<div class="text-center mb-12">
|
||
<h1 class="text-2xl md:text-3xl font-black text-slate-900 tracking-tight mb-3">図解ライブラリ</h1>
|
||
<p class="text-ads-muted">チャット欄で「○○を図解して」と依頼すると、ここに追加されます</p>
|
||
</div>
|
||
|
||
<div class="space-y-3">
|
||
<a href="git.html" class="block bg-ads-surface border border-ads-border rounded-xl p-5 hover:border-ads-accent/40 transition-colors">
|
||
<h2 class="font-bold text-slate-900 mb-1">Gitの仕組み</h2>
|
||
<p class="text-sm text-ads-muted">Gitの仕組みを、身近なたとえとビジュアルでわかりやすく図解します。</p>
|
||
</a>
|
||
<a href="llm.html" class="block bg-ads-surface border border-ads-border rounded-xl p-5 hover:border-ads-accent/40 transition-colors">
|
||
<h2 class="font-bold text-slate-900 mb-1">LLM（大規模言語モデル）の仕組み</h2>
|
||
<p class="text-sm text-ads-muted">LLMの仕組みを、身近な例とビジュアルでわかりやすく図解します。</p>
|
||
</a>
|
||
<a href="cursor.html" class="block bg-ads-surface border border-ads-border rounded-xl p-5 hover:border-ads-accent/40 transition-colors">
|
||
<h2 class="font-bold text-slate-900 mb-1">Cursorの仕組み</h2>
|
||
<p class="text-sm text-ads-muted">AIが組み込まれたコードエディタ「Cursor」の仕組みを、身近な例とビジュアルでわかりやすく図解します。</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mt-16 pt-8 border-t border-ads-border/30">
|
||
<p class="text-sm font-bold text-slate-900 mb-4">こんなことを聞いてみよう</p>
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm text-ads-muted">
|
||
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「API とは何か、図解して」</div>
|
||
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「Git の rebase と merge の違いを図解して」</div>
|
||
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「クラウドとは何か、図解して」</div>
|
||
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「KPI と KGI の違いを図解して」</div>
|
||
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「HTML と CSS の関係を図解して」</div>
|
||
<div class="bg-ads-surface rounded-lg px-4 py-2.5">「UI と UX の違いを図解して」</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
<footer class="max-w-3xl mx-auto px-5 pb-10 pt-6 border-t border-ads-border/30">
|
||
<p class="text-xs text-ads-dim text-center">AI-Driven School の図解ツールで作成</p>
|
||
</footer>
|
||
</body>
|
||
</html>
|