Monospace_Developer_TOC
モノスペース/開発者の美学、宝石のようなトーンの配色、ドキュメントおよびナレッジベースサイト向けに最適化された、複雑で応答性の高い目次コンポーネントで、ダークモードのサポートを備えています。
HTMLコード
<div class="font-mono bg-stone-50 text-gray-800 dark:bg-stone-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl border border-stone-200 dark:border-stone-800 transition-colors duration-300">
<h2 class="text-xl sm:text-2xl font-bold mb-4 border-b-2 border-emerald-600 pb-2 text-emerald-700 dark:text-emerald-500 flex items-center">
<svg class="w-6 h-6 mr-2 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
Table of Contents
</h2>
<nav class="">
<ul class="space-y-2 text-sm sm:text-base">
<li class="group">
<a href="#section-1" class="flex items-center text-emerald-700 dark:text-emerald-500 hover:text-emerald-500 dark:hover:text-emerald-300 transition-colors duration-200 py-1.5 px-2 -ml-2 rounded-md hover:bg-emerald-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
<span class="block w-2 h-2 rounded-full bg-emerald-600 mr-3 animate-pulse group-hover:animate-none group-hover:scale-125 transition-transform"></span>
<span class="font-semibold">1. Introduction to Project Atlas</span>
</a>
<ul class="ml-6 mt-1 space-y-1 text-gray-700 dark:text-gray-300 border-l border-emerald-400 dark:border-emerald-700 pl-4">
<li><a href="#section-1-1" class="block py-1.5 hover:text-ruby-700 dark:hover:text-ruby-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-emerald-500">1.1. Overview and Goals</a></li>
<li><a href="#section-1-2" class="block py-1.5 hover:text-ruby-700 dark:hover:text-ruby-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-emerald-500">1.2. Key Features</a></li>
</ul>
</li>
<li class="group">
<a href="#section-2" class="flex items-center text-sapphire-700 dark:text-sapphire-500 hover:text-sapphire-500 dark:hover:text-sapphire-300 transition-colors duration-200 py-1.5 px-2 -ml-2 rounded-md hover:bg-sapphire-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-sapphire-500 focus:ring-opacity-50">
<span class="block w-2 h-2 rounded-full bg-sapphire-600 mr-3 animate-pulse group-hover:animate-none group-hover:scale-125 transition-transform"></span>
<span class="font-semibold">2. Getting Started</span>
</a>
<ul class="ml-6 mt-1 space-y-1 text-gray-700 dark:text-gray-300 border-l border-sapphire-400 dark:border-sapphire-700 pl-4">
<li><a href="#section-2-1" class="block py-1.5 hover:text-ruby-700 dark:hover:text-ruby-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-sapphire-500">2.1. Installation Guide</a></li>
<li><a href="#section-2-2" class="block py-1.5 hover:text-ruby-700 dark:hover:text-ruby-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-sapphire-500">2.2. Configuration Settings</a></li>
<li><a href="#section-2-3" class="block py-1.5 hover:text-ruby-700 dark:hover:text-ruby-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-sapphire-500">2.3. Running Your First Query</a></li>
</ul>
</li>
<li class="group">
<a href="#section-3" class="flex items-center text-ruby-700 dark:text-ruby-500 hover:text-ruby-500 dark:hover:text-ruby-300 transition-colors duration-200 py-1.5 px-2 -ml-2 rounded-md hover:bg-ruby-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50">
<span class="block w-2 h-2 rounded-full bg-ruby-600 mr-3 animate-pulse group-hover:animate-none group-hover:scale-125 transition-transform"></span>
<span class="font-semibold">3. Advanced Topics</span>
</a>
<ul class="ml-6 mt-1 space-y-1 text-gray-700 dark:text-gray-300 border-l border-ruby-400 dark:border-ruby-700 pl-4">
<li><a href="#section-3-1" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-ruby-500">3.1. API Reference</a></li>
<li><a href="#section-3-2" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-ruby-500">3.2. Performance Optimization</a></li>
<li><a href="#section-3-3" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-ruby-500">3.3. Extending Functionality</a></li>
<li><a href="#section-3-4" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-ruby-500">3.4. Troubleshooting Common Issues</a></li>
</ul>
</li>
<li class="group">
<a href="#section-4" class="flex items-center text-purple-700 dark:text-purple-500 hover:text-purple-500 dark:hover:text-purple-300 transition-colors duration-200 py-1.5 px-2 -ml-2 rounded-md hover:bg-purple-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
<span class="block w-2 h-2 rounded-full bg-purple-600 mr-3 animate-pulse group-hover:animate-none group-hover:scale-125 transition-transform"></span>
<span class="font-semibold">4. Contributing</span>
</a>
<ul class="ml-6 mt-1 space-y-1 text-gray-700 dark:text-gray-300 border-l border-purple-400 dark:border-purple-700 pl-4">
<li><a href="#section-4-1" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-purple-500">4.1. How to Submit a Pull Request</a></li>
<li><a href="#section-4-2" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-purple-500">4.2. Code of Conduct</a></li>
</ul>
</li>
<li class="group">
<a href="#section-5" class="flex items-center text-teal-700 dark:text-teal-500 hover:text-teal-500 dark:hover:text-teal-300 transition-colors duration-200 py-1.5 px-2 -ml-2 rounded-md hover:bg-purple-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-opacity-50">
<span class="block w-2 h-2 rounded-full bg-teal-600 mr-3 animate-pulse group-hover:animate-none group-hover:scale-125 transition-transform"></span>
<span class="font-semibold">5. Legal & Licensing</span>
</a>
</li>
</ul>
</nav>
<div class="mt-6 pt-4 border-t-2 border-slate-300 dark:border-slate-700 text-xs text-gray-500 dark:text-gray-400 flex items-center justify-between">
<span>Documentation Version: <span class="text-emerald-600 dark:text-emerald-400">1.0.3</span></span>
<a href="#top" class="inline-flex items-center hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
</svg>
Back to Top
</a>
</div>
</div>
<style>
/* Custom Tailwind colors for jewel tones */
.text-emerald-700 { color: #047857; } /* green-700 */
.text-emerald-500 { color: #10B981; } /* green-500 */
.text-emerald-300 { color: #6EE7B7; } /* green-300 */
.bg-emerald-600 { background-color: #059669; }
.border-emerald-600 { border-color: #059669; }
.border-emerald-400 { border-color: #34D399; }
.hover\:bg-emerald-100:hover { background-color: #D1FAE5; }
.focus\:ring-emerald-500:focus { --tw-ring-color: #10B981; }
.text-sapphire-700 { color: #1D4ED8; } /* blue-700 */
.text-sapphire-500 { color: #3B82F6; } /* blue-500 */
.text-sapphire-300 { color: #93C5FD; } /* blue-300 */
.bg-sapphire-600 { background-color: #2563EB; }
.border-sapphire-400 { border-color: #60A5FA; }
.hover\:bg-sapphire-100:hover { background-color: #DBEAFE; }
.focus\:ring-sapphire-500:focus { --tw-ring-color: #3B82F6; }
.text-ruby-700 { color: #B91C1C; } /* red-700 */
.text-ruby-500 { color: #EF4444; } /* red-500 */
.text-ruby-300 { color: #FCA5A5; } /* red-300 */
.bg-ruby-600 { background-color: #DC2626; }
.border-ruby-400 { border-color: #F87171; }
.hover\:bg-ruby-100:hover { background-color: #FEE2E2; }
.focus\:ring-ruby-500:focus { --tw-ring-color: #EF4444; }
.text-purple-700 { color: #6D28D9; } /* violet-700 */
.text-purple-500 { color: #8B5CF6; } /* violet-500 */
.text-purple-300 { color: #C4B5FD; } /* violet-300 */
.bg-purple-600 { background-color: #7C3AED; }
.border-purple-400 { border-color: #A78BFA; }
.hover\:bg-purple-100:hover { background-color: #EDE9FE; }
.focus\:ring-purple-500:focus { --tw-ring-color: #8B5CF6; }
.text-teal-700 { color: #0F766E; } /* teal-700 */
.text-teal-500 { color: #14B8A6; } /* teal-500 */
.text-teal-300 { color: #5EEAD4; } /* teal-300 */
.bg-teal-600 { background-color: #0D9488; }
.border-teal-400 { border-color: #2DD4BF; }
/* Dark mode custom colors adjustments (optional, but good for fine-tuning) */
.dark\:text-emerald-500 { color: #10B981; }
.dark\:text-emerald-300 { color: #6EE7B7; }
.dark\:border-emerald-700 { border-color: #047857; }
.dark\:hover\:bg-stone-800:hover { background-color: #292524; }
.dark\:text-sapphire-500 { color: #3B82F6; }
.dark\:text-sapphire-300 { color: #93C5FD; }
.dark\:border-sapphire-700 { border-color: #1D4ED8; }
.dark\:text-ruby-500 { color: #EF4444; }
.dark\:text-ruby-300 { color: #FCA5A5; }
.dark\:border-ruby-700 { border-color: #B91C1C; }
.dark\:text-purple-500 { color: #8B5CF6; }
.dark\:text-purple-300 { color: #C4B5FD; }
.dark\:border-purple-700 { border-color: #6D28D9; }
.dark\:text-teal-500 { color: #14B8A6; }
/* Animations */
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
</style>関連コンポーネント
Table of Contents コンポーネント
ダークモード UI スタイルでデザインされたレスポンシブな目次コンポーネントで、セクション、タイトル、説明、ランダムな画像/アバターが特徴です。
目次
Glassmorphism でスタイル設定されたレスポンシブな目次コンポーネントで、ぼかし効果とダーク テーマのサポートを備えたすりガラスのような半透明の要素が特徴です。視覚的に表現するためのセクションとプレースホルダー画像が含まれています。
Table of Contents コンポーネント
Glassmorphism スタイルでデザインされたレスポンシブな目次コンポーネントで、ぼかし効果のあるすりガラスのような半透明の要素が特徴で、Tailwind CSS で明るいテーマと暗いテーマの両方をサポートします。