m4rshal
38b9e8f872
- VLAN 50 (Guest): 10.0.50.21 - VLAN 60 (IoT): 10.0.60.21 - VLAN 100 (PRV): 192.168.100.21 (既存) network-diagram.html / ip-map.md / 増備計画.md に反映。 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
281 lines
17 KiB
HTML
281 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ja">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Network IP Map</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;600;700&family=Syne:wght@400;700;800&display=swap');
|
||
:root {
|
||
--bg:#0a0e1a;--surface:#111827;--border:#1e2d40;--text:#e2e8f0;--muted:#64748b;--accent:#38bdf8;
|
||
--vlan10:#f59e0b;--vlan20h:#10b981;--vlan20v:#34d399;--vlan30:#8b5cf6;--vlan40:#3b82f6;
|
||
--vlan50:#f43f5e;--vlan60:#f97316;--prv:#06b6d4;--wan:#84cc16;
|
||
}
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
body{background:var(--bg);color:var(--text);font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.5;padding:32px;min-height:100vh}
|
||
h1{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;letter-spacing:.05em;color:var(--accent);margin-bottom:4px}
|
||
.subtitle{color:var(--muted);font-size:11px;margin-bottom:32px;letter-spacing:.1em;text-transform:uppercase}
|
||
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1100px}
|
||
.section{background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden}
|
||
.section.full-width{grid-column:1/-1}
|
||
.section-header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02)}
|
||
.section-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
|
||
.section-title{font-family:'Syne',sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
|
||
.section-range{margin-left:auto;font-size:11px;color:var(--muted)}
|
||
.sub-label{padding:8px 16px 2px;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;border-top:1px solid var(--border);margin-top:4px}
|
||
.sub-label.first{border-top:none;margin-top:0}
|
||
.device-list{padding:4px 0}
|
||
.device-row{display:grid;grid-template-columns:18px 1fr 160px;align-items:center;gap:8px;padding:5px 16px;transition:background .15s}
|
||
.device-row:hover{background:rgba(255,255,255,.03)}
|
||
.device-icon{font-size:10px;text-align:center}
|
||
.device-name{color:#cbd5e1;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.device-name .hw{color:var(--muted);font-size:10px;margin-left:4px}
|
||
.device-ip{font-size:12px;text-align:right;font-weight:600}
|
||
.dhcp-bar{padding:6px 16px;display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.2);border-top:1px solid var(--border)}
|
||
.dhcp-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;flex-shrink:0}
|
||
.dhcp-range{font-size:11px;color:var(--muted)}
|
||
.dhcp-track{flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin:0 8px}
|
||
.dhcp-fill{height:100%;border-radius:2px;opacity:.6}
|
||
.vm-table{width:100%;border-collapse:collapse;font-size:11px}
|
||
.vm-table td{padding:4px 16px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--muted)}
|
||
.vm-table td:first-child{color:var(--vlan20v);font-weight:600}
|
||
.vm-table tr:last-child td{border-bottom:none}
|
||
.note{padding:6px 16px 8px;font-size:10px;color:var(--muted);border-top:1px solid var(--border);background:rgba(0,0,0,.15)}
|
||
.badge{display:inline-block;font-size:9px;padding:1px 6px;border-radius:3px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
|
||
.badge-active{background:rgba(56,189,248,.15);color:var(--accent)}
|
||
.badge-vip{background:rgba(6,182,212,.15);color:var(--prv)}
|
||
.badge-fixed{background:rgba(132,204,22,.15);color:var(--wan)}
|
||
.badge-mobile{background:rgba(249,115,22,.15);color:var(--vlan60)}
|
||
.prv-cols{display:grid;grid-template-columns:1fr 2fr}
|
||
.prv-col{border-right:1px solid var(--border)}
|
||
.prv-col:last-child{border-right:none}
|
||
.prv-col-header{padding:6px 16px;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--border);background:rgba(0,0,0,.1)}
|
||
.ssid-table{width:100%;border-collapse:collapse;font-size:11px}
|
||
.ssid-table th{padding:5px 16px;text-align:left;color:var(--muted);font-size:10px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--border);background:rgba(0,0,0,.1)}
|
||
.ssid-table td{padding:6px 16px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
|
||
.ssid-table tr:last-child td{border-bottom:none}
|
||
.rule-allow{color:#10b981;font-size:10px}
|
||
.rule-deny{color:#f43f5e;font-size:10px}
|
||
@media(max-width:720px){.grid{grid-template-columns:1fr}.section.full-width{grid-column:1}.prv-cols{grid-template-columns:1fr}.prv-col{border-right:none;border-bottom:1px solid var(--border)}body{padding:16px}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>NETWORK IP MAP</h1>
|
||
<p class="subtitle">Infrastructure Address Plan · 2026</p>
|
||
|
||
<div class="grid">
|
||
|
||
<!-- WAN -->
|
||
<div class="section full-width">
|
||
<div class="section-header">
|
||
<div class="section-dot" style="background:var(--wan)"></div>
|
||
<span class="section-title">WAN</span>
|
||
<span class="section-range">Public IPs</span>
|
||
</div>
|
||
<div class="device-list">
|
||
<div class="device-row" style="grid-template-columns:18px 1fr 220px 100px">
|
||
<span class="device-icon">🌐</span>
|
||
<span class="device-name">WAN1 — Flets</span>
|
||
<span class="device-ip" style="color:var(--wan)">133.27.54.201/32</span>
|
||
<span><span class="badge badge-fixed">Static</span></span>
|
||
</div>
|
||
<div class="device-row" style="grid-template-columns:18px 1fr 220px 100px">
|
||
<span class="device-icon">📡</span>
|
||
<span class="device-name">WAN2 — LTE/5G</span>
|
||
<span class="device-ip" style="color:var(--wan)">106.128.57.19/28</span>
|
||
<span><span class="badge badge-mobile">Dynamic</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- VLAN 10 -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-dot" style="background:var(--vlan10)"></div>
|
||
<span class="section-title" style="color:var(--vlan10)">VLAN 10 — MGMT</span>
|
||
<span class="section-range">10.0.10.0/24</span>
|
||
</div>
|
||
<div class="device-list">
|
||
<div class="device-row"><span class="device-icon">🔀</span><span class="device-name">rt-edge-01 <span class="hw">RTX 1300</span></span><span class="device-ip" style="color:var(--vlan10)">10.0.10.1</span></div>
|
||
<div class="device-row"><span class="device-icon">🔗</span><span class="device-name">rt-aggr-edge-01 <span class="hw">USW Aggr</span></span><span class="device-ip" style="color:var(--vlan10)">10.0.10.11</span></div>
|
||
<div class="device-row"><span class="device-icon">🖧</span><span class="device-name">sw-srv-01 <span class="hw">AT-x510</span></span><span class="device-ip" style="color:var(--vlan10)">10.0.10.21</span></div>
|
||
<div class="device-row"><span class="device-icon">🖧</span><span class="device-name">sw-srv-02 <span class="hw">AT-x510</span></span><span class="device-ip" style="color:var(--vlan10)">10.0.10.22</span></div>
|
||
<div class="device-row"><span class="device-icon">🔗</span><span class="device-name">sw-aggr-srv-01 <span class="hw">USW Aggr</span></span><span class="device-ip" style="color:var(--vlan10)">10.0.10.31</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- VLAN 20 -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-dot" style="background:var(--vlan20h)"></div>
|
||
<span class="section-title" style="color:var(--vlan20h)">VLAN 20 — SERVER</span>
|
||
<span class="section-range">10.0.20.0/22</span>
|
||
</div>
|
||
<div class="sub-label first">HOST — 10.0.20.0/24</div>
|
||
<div class="device-list">
|
||
<div class="device-row"><span class="device-icon">🔀</span><span class="device-name">Gateway</span><span class="device-ip" style="color:var(--vlan20h)">10.0.20.1</span></div>
|
||
<div class="device-row"><span class="device-icon">🖥</span><span class="device-name">n1-pro-pve <span class="hw">n1-pro</span></span><span class="device-ip" style="color:var(--vlan20h)">10.0.20.11</span></div>
|
||
<div class="device-row"><span class="device-icon">🍓</span><span class="device-name">sc-rpi4-01 <span class="hw">RPi4</span></span><span class="device-ip" style="color:var(--vlan20h)">10.0.20.21</span></div>
|
||
<div class="device-row"><span class="device-icon">🖥</span><span class="device-name">x86-01-pve <span class="hw">GEM 10</span></span><span class="device-ip" style="color:var(--vlan20h)">10.0.20.51</span></div>
|
||
<div class="device-row"><span class="device-icon">🖥</span><span class="device-name">x86-02-pve <span class="hw">GEM 10</span></span><span class="device-ip" style="color:var(--vlan20h)">10.0.20.52</span></div>
|
||
<div class="device-row"><span class="device-icon">🖥</span><span class="device-name">ms-01-pve <span class="hw">MS-A2</span></span><span class="device-ip" style="color:var(--vlan20h)">10.0.20.81</span></div>
|
||
<div class="device-row"><span class="device-icon">🖥</span><span class="device-name">ms-02-pve <span class="hw">MS-A2</span></span><span class="device-ip" style="color:var(--vlan20h)">10.0.20.82</span></div>
|
||
</div>
|
||
<div class="dhcp-bar">
|
||
<span class="dhcp-label">Static</span>
|
||
<div class="dhcp-track"><div class="dhcp-fill" style="width:78%;background:var(--vlan20h)"></div></div>
|
||
<span class="dhcp-range">.10–.199 / DHCP .200–.230</span>
|
||
</div>
|
||
<div class="sub-label">VM — 10.0.21.0/24 〜 10.0.23.0/24</div>
|
||
<table class="vm-table">
|
||
<tr><td>10.0.21.0/24</td><td>VM 汎用（優先使用）</td></tr>
|
||
<tr><td>10.0.22.0/24</td><td>予備・用途別拡張</td></tr>
|
||
<tr><td>10.0.23.0/24</td><td>予備・用途別拡張</td></tr>
|
||
</table>
|
||
<div class="note">静的割当: 各 /24 の .1–.199</div>
|
||
</div>
|
||
|
||
<!-- VLAN 30 -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-dot" style="background:var(--vlan30)"></div>
|
||
<span class="section-title" style="color:var(--vlan30)">VLAN 30 — STORAGE</span>
|
||
<span class="section-range">10.0.30.0/24</span>
|
||
</div>
|
||
<div class="device-list">
|
||
<div class="device-row"><span class="device-icon">🔀</span><span class="device-name">Gateway</span><span class="device-ip" style="color:var(--vlan30)">10.0.30.1</span></div>
|
||
<div class="device-row"><span class="device-icon">💾</span><span class="device-name">stg-01-nas <span class="hw">NAS</span></span><span class="device-ip" style="color:var(--vlan30)">10.0.30.11</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- VLAN 40 -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-dot" style="background:var(--vlan40)"></div>
|
||
<span class="section-title" style="color:var(--vlan40)">VLAN 40 — CLIENT</span>
|
||
<span class="section-range">10.0.40.0/24</span>
|
||
</div>
|
||
<div class="device-list">
|
||
<div class="device-row"><span class="device-icon">🔀</span><span class="device-name">Gateway</span><span class="device-ip" style="color:var(--vlan40)">10.0.40.1</span></div>
|
||
</div>
|
||
<div class="dhcp-bar">
|
||
<span class="dhcp-label">DHCP</span>
|
||
<div class="dhcp-track"><div class="dhcp-fill" style="width:40%;background:var(--vlan40)"></div></div>
|
||
<span class="dhcp-range">.100 – .199</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- VLAN 50 -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-dot" style="background:var(--vlan50)"></div>
|
||
<span class="section-title" style="color:var(--vlan50)">VLAN 50 — GUEST</span>
|
||
<span class="section-range">10.0.50.0/24</span>
|
||
</div>
|
||
<div class="device-list">
|
||
<div class="device-row"><span class="device-icon">🔀</span><span class="device-name">Gateway</span><span class="device-ip" style="color:var(--vlan50)">10.0.50.1</span></div>
|
||
<div class="device-row"><span class="device-icon">📶</span><span class="device-name">ap-ux7-01 <span class="hw">UX-7 · Guest SSID</span></span><span class="device-ip" style="color:var(--vlan50)">10.0.50.21</span></div>
|
||
</div>
|
||
<div class="dhcp-bar">
|
||
<span class="dhcp-label">DHCP</span>
|
||
<div class="dhcp-track"><div class="dhcp-fill" style="width:48%;background:var(--vlan50)"></div></div>
|
||
<span class="dhcp-range">.100 – .220（分離）</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- VLAN 60 -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-dot" style="background:var(--vlan60)"></div>
|
||
<span class="section-title" style="color:var(--vlan60)">VLAN 60 — IoT</span>
|
||
<span class="section-range">10.0.60.0/24</span>
|
||
</div>
|
||
<div class="device-list">
|
||
<div class="device-row"><span class="device-icon">🔀</span><span class="device-name">Gateway</span><span class="device-ip" style="color:var(--vlan60)">10.0.60.1</span></div>
|
||
<div class="device-row"><span class="device-icon">📶</span><span class="device-name">ap-ux7-01 <span class="hw">UX-7 · IoT SSID</span></span><span class="device-ip" style="color:var(--vlan60)">10.0.60.21</span></div>
|
||
<div class="device-row"><span class="device-icon">📦</span><span class="device-name">静的 IoT 機器</span><span class="device-ip" style="color:var(--vlan60)">.2 – .99</span></div>
|
||
</div>
|
||
<div class="dhcp-bar">
|
||
<span class="dhcp-label">DHCP</span>
|
||
<div class="dhcp-track"><div class="dhcp-fill" style="width:20%;background:var(--vlan60)"></div></div>
|
||
<span class="dhcp-range">.100 – .149</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PRV -->
|
||
<div class="section full-width">
|
||
<div class="section-header">
|
||
<div class="section-dot" style="background:var(--prv)"></div>
|
||
<span class="section-title" style="color:var(--prv)">VLAN 100 — PRV</span>
|
||
<span class="section-range">192.168.100.0/22 · ap-ux7-01 (UX-7) · VLAN 50/60/100</span>
|
||
</div>
|
||
<div class="prv-cols">
|
||
<div class="prv-col">
|
||
<div class="prv-col-header">インフラ静的割当</div>
|
||
<div class="device-list">
|
||
<div class="device-row" style="grid-template-columns:18px 1fr 150px">
|
||
<span class="device-icon">🛡</span>
|
||
<span class="device-name">CARP VIP <span class="badge badge-vip">GW</span></span>
|
||
<span class="device-ip" style="color:var(--prv)">192.168.100.1</span>
|
||
</div>
|
||
<div class="device-row" style="grid-template-columns:18px 1fr 150px">
|
||
<span class="device-icon">🔥</span>
|
||
<span class="device-name">opnsense-01 <span class="badge badge-active">Active</span></span>
|
||
<span class="device-ip" style="color:var(--prv)">192.168.100.2</span>
|
||
</div>
|
||
<div class="device-row" style="grid-template-columns:18px 1fr 150px">
|
||
<span class="device-icon">🔗</span>
|
||
<span class="device-name">sw-flex <span class="hw">USW Flex</span></span>
|
||
<span class="device-ip" style="color:var(--prv)">192.168.100.11</span>
|
||
</div>
|
||
<div class="device-row" style="grid-template-columns:18px 1fr 150px">
|
||
<span class="device-icon">📶</span>
|
||
<span class="device-name">ap-ux7-01 <span class="hw">UX-7</span></span>
|
||
<span class="device-ip" style="color:var(--prv)">192.168.100.21</span>
|
||
</div>
|
||
</div>
|
||
<div class="note">静的: .1–.30 予備: 192.168.103.0/24</div>
|
||
</div>
|
||
<div class="prv-col">
|
||
<div class="prv-col-header">SSID / VLAN 対応（ap-ux7-01 トランク: VLAN 50/60/100）</div>
|
||
<table class="ssid-table">
|
||
<thead>
|
||
<tr><th>SSID</th><th>VLAN</th><th>サブネット</th><th>DHCP レンジ</th><th>終端 / ルール</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="color:#e2e8f0">Main（一般端末）</td>
|
||
<td style="color:var(--prv)">100</td>
|
||
<td style="color:var(--prv)">192.168.100.0/24</td>
|
||
<td style="color:var(--muted)">.100 – .200</td>
|
||
<td><span class="rule-allow">✓ OPNsense · 内部許可</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="color:#e2e8f0">IoT</td>
|
||
<td style="color:var(--vlan60)">60</td>
|
||
<td style="color:var(--vlan60)">10.0.60.0/24</td>
|
||
<td style="color:var(--muted)">.100 – .149</td>
|
||
<td><span class="rule-deny">✗ OPNsense→RTX · WAN のみ</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="color:#e2e8f0">Guest</td>
|
||
<td style="color:var(--vlan50)">50</td>
|
||
<td style="color:var(--vlan50)">10.0.50.0/24</td>
|
||
<td style="color:var(--muted)">.100 – .220</td>
|
||
<td><span class="rule-deny">✗ OPNsense→RTX · WAN のみ</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div style="margin-top:20px;font-size:10px;color:var(--muted);letter-spacing:.08em">
|
||
SRV: 10.0.0.0/16 | PRV: 192.168.100.0/22 | OPNsense HA: CARP + pfsync | VLAN 110 / 120 廃止
|
||
</div>
|
||
|
||
</body>
|
||
</html> |