Accordion / 031 — ターミナル

デザイン見本

Dark Theme with Code Aesthetic
Monospace Font & Prompt Style
Syntax-Inspired Color Scheme

GitHubのDark テーマをベースにしたターミナル風デザインです。モノスペースフォントと `$ ` プロンプト記号、`[+]/[-]` の開閉インジケーターで CLI 環境のような雰囲気を演出します。コード解説やコマンド紹介コンテンツとの相性が抜群です。

実装コード

HTML

<div class="container">
    <div class="btn-box">
        <button data-default-text="run --details" data-open-text="run --close">run --details</button>
    </div>
    <div class="more">
        <ul>
            <li>Dark Theme with Code Aesthetic</li>
            <li>Monospace Font &amp; Prompt Style</li>
            <li>Syntax-Inspired Color Scheme</li>
        </ul>
    </div>
</div>

CSS

.container {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 8px;
    overflow: hidden;
}

.container .btn-box button {
    width: 100%;
    padding: 14px 16px;
    background: #161b22;
    border: none;
    border-bottom: 1px solid #30363d;
    font-size: 13px;
    font-weight: 500;
    color: #58a6ff;
    cursor: pointer;
    transition: background 0.2s, text-shadow 0.2s;
    text-align: left;
    position: relative;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0.5px;
}

.container .btn-box button::before {
    content: '$ ';
    color: #3fb950;
}

.container .btn-box button::after {
    content: '[+]';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #8b949e;
    font-size: 12px;
}

.container:has(.more.appear) .btn-box button::after {
    content: '[-]';
    color: #3fb950;
}

.container .btn-box button:hover {
    background: #1c2128;
    text-shadow: 0 0 6px rgba(88, 166, 255, 0.4);
}

.container .more {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    background: #0d1117;
}

.container .more.appear {
    max-height: 200px;
}

.container .more ul {
    list-style: none;
    padding: 12px 16px;
    margin: 0;
}

.container .more li {
    padding: 6px 0;
    color: #8b949e;
    font-size: 12px;
    border-bottom: 1px solid #21262d;
    font-family: 'Courier New', Courier, monospace;
}

.container .more li::before {
    content: '> ';
    color: #3fb950;
}

.container .more li:last-child {
    border-bottom: none;
}

(function () {
    var container = document.querySelector('.container');
    if (!container) return;
    var button = container.querySelector('.btn-box button');
    var content = container.querySelector('.more');

    if (button && content) {
        button.addEventListener('click', function () {
            content.classList.toggle('appear');

            if (content.classList.contains('appear')) {
                this.textContent = this.dataset.openText || 'Close';
            } else {
                this.textContent = this.dataset.defaultText;
            }
        });
    }
})();