Tab Menu / 25 Futuristic Tech Style

デザイン見本

SYSTEM
STATUS
LOGS

System Overview

Core systems are online. Architecture optimized for WordPress integration.

Current Status

All modules functioning within normal parameters. WAF evasion protocols active.

Access Logs

User access confirmed. Security clearance granted.

SF映画に出てくるコンソールのような、近未来的なデザインです。モノスペースフォントやスキャンライン（走査線）風の背景など、ディテールにこだわっています。ゲーム攻略サイトや、技術的なポートフォリオなどにユニークな個性を与えます。

実装コード

HTML

<div class="tab-container">
  <ul>
    <li class="selected" data-id="tab-1">SYSTEM</li>
    <li data-id="tab-2">STATUS</li>
    <li data-id="tab-3">LOGS</li>
  </ul>

  <div class="tab-content selected" id="tab-1">
    <div class="content-title">System Overview</div>
    <p>Core systems are online.</p>
  </div>
  <div class="tab-content" id="tab-2">
    <div class="content-title">Current Status</div>
    <p>All modules functioning within normal parameters.</p>
  </div>
  <div class="tab-content" id="tab-3">
    <div class="content-title">Access Logs</div>
    <p>User access confirmed.</p>
  </div>
</div>

CSS

.tab-container {
  position: relative;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  overflow: hidden;
  font-family: 'Courier New', Courier, monospace;
}

.tab-container ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  background: #161b22;
  border-bottom: 1px solid #30363d;
}

.tab-container ul li {
  flex: 1;
  padding: 15px 10px;
  text-align: center;
  cursor: pointer;
  color: #8b949e;
  position: relative;
  transition: all 0.3s;
  border-right: 1px solid #30363d;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.tab-container ul li:last-child {
  border-right: none;
}

.tab-container ul li:not(.selected):hover {
  color: #58a6ff;
  background: rgba(88, 166, 255, 0.1);
}

.tab-container ul li.selected {
  color: #fff;
  background: #0d1117;
  font-weight: bold;
}

.tab-container ul li.selected::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #58a6ff;
  box-shadow: 0 0 8px #58a6ff;
}

.tab-container ul li.selected::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #58a6ff;
  opacity: 0.8;
}

.tab-container .tab-content {
  display: none;
  padding: 30px;
  border-top: 1px solid #30363d;
  min-height: 200px;
  background:
    linear-gradient(rgba(13, 17, 23, 0.9), rgba(13, 17, 23, 0.9)),
    repeating-linear-gradient(0deg, transparent, transparent 1px, #1f2937 1px, #1f2937 2px);
  background-size: 100% 4px;
}

.tab-container .tab-content.selected {
  display: block;
  animation: techFadeIn 0.4s ease-out;
}

.tab-container .content-title {
  color: #58a6ff;
  border-left: 4px solid #58a6ff;
  padding-left: 10px;
  margin-top: 0;
  text-transform: uppercase;
  font-size: 1.17em;
  font-weight: bold;
  margin-bottom: 1em;
}

.tab-container p {
  line-height: 1.6;
  color: #c9d1d9;
}

@keyframes techFadeIn {
  0% { opacity: 0; transform: translateY(5px); }
  100% { opacity: 1; transform: translateY(0); }
}

const tabContainer = document.querySelector('.tab-container');
const tabMenuItems = tabContainer.querySelectorAll('ul li');
const tabContents = tabContainer.querySelectorAll('.tab-content');

tabMenuItems.forEach(tabMenuItem => {
  tabMenuItem.addEventListener('click', () => {
    tabMenuItems.forEach(item => {
      item.classList.remove('selected');
    });
    tabMenuItem.classList.add('selected');

    tabContents.forEach(tabContent => {
      tabContent.classList.remove('selected');
    });
    document.getElementById(tabMenuItem.dataset.id).classList.add('selected');
  });
});