SplunkコピペUI部品集｜逆引きパーツリファレンス

【Splunk】ネットワーク構成図 コピペUI部品集｜逆引きパーツリファレンス

はじめに

「この部品どうやって作るんだっけ？」を解決する逆引きパーツ集です。

コピペして、数値を変えるだけで使えます！

1. 機器ノード（デバイス）

🔹 基本の機器ノード

/* === CSS === */
.node {
  position: absolute;
  background: linear-gradient(145deg, #1e2a3a 0%, #0f1722 100%);
  border: 3px solid #00ff88;
  border-radius: 15px;
  padding: 15px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  text-align: center;
  min-width: 100px;
  z-index: 10;
}
.node-icon { font-size: 32px; margin-bottom: 8px; }
.node-name { font-size: 12px; font-weight: bold; color: white; }

/* 位置指定 */
.pos-device1 { top: 100px; left: 200px; }

<!-- === HTML === -->
<div class="node pos-device1">
  <div class="node-icon">🖥️</div>
  <div class="node-name">Server-01</div>
</div>

📝 編集ポイント

変えたい箇所 変更する場所 例 位置（上から） top: 100px top: 250px 位置（左から） left: 200px left: 50% 位置（右から） left → right right: 100px 枠線の色 border: 3px solid #00ff88 #ff5252 （赤） 最小幅 min-width: 100px min-width: 150px

🔹 サイズ別ノード

小サイズ（クライアントPC向け）

.node-small {
  position: absolute;
  background: linear-gradient(145deg, #1e2a3a 0%, #0f1722 100%);
  border: 2px solid #00e5ff;
  border-radius: 10px;
  padding: 8px 12px;
  text-align: center;
  min-width: 70px;
  z-index: 10;
}
.node-small .node-icon { font-size: 20px; margin-bottom: 4px; }
.node-small .node-name { font-size: 10px; color: white; }

.pos-pc1 { top: 500px; left: 100px; }

<div class="node-small pos-pc1">
  <div class="node-icon">💻</div>
  <div class="node-name">PC-001</div>
</div>

大サイズ（メインサーバー向け）

.node-large {
  position: absolute;
  background: linear-gradient(145deg, #1e2a3a 0%, #0f1722 100%);
  border: 4px solid #00ff88;
  border-radius: 20px;
  padding: 20px 30px;
  text-align: center;
  min-width: 140px;
  z-index: 10;
}
.node-large .node-icon { font-size: 42px; margin-bottom: 10px; }
.node-large .node-name { font-size: 16px; font-weight: bold; color: white; }

.pos-main-server { top: 200px; left: 50%; transform: translateX(-50%); }

<div class="node-large pos-main-server">
  <div class="node-icon">🏢</div>
  <div class="node-name">Main Server</div>
</div>

🔹 機器タイプ別カラー

/* インターネット（水色） */
.node-internet { border-color: #00bfff; }

/* ファイアウォール（赤） */
.node-firewall { border-color: #ff5252; }

/* ルーター（緑） */
.node-router { border-color: #00ff88; }

/* スイッチ（紫） */
.node-switch { border-color: #b388ff; }

/* サーバー（オレンジ） */
.node-server { border-color: #ff9800; }

/* データベース（ピンク） */
.node-database { border-color: #ff4081; }

/* クライアント（シアン） */
.node-client { border-color: #00e5ff; }

/* 警告状態（黄色） */
.node-warning { border-color: #ffc107; }

/* エラー状態（赤点滅） */
.node-error { 
  border-color: #ff1744;
  animation: blink 1s infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

<div class="node node-firewall pos-fw">
  <div class="node-icon">🛡️</div>
  <div class="node-name">Firewall</div>
</div>

🔹 よく使うアイコン一覧

機器 アイコン 機器 アイコン インターネット ☁️ サーバー 🖥️ ファイアウォール 🛡️ データベース 🗄️ ルーター 📡 ストレージ 💾 スイッチ 🔀 PC 💻 ロードバランサー ⚖️ プリンター 🖨️ Webサーバー 🌐 監視 👁️ メールサーバー 📧 VPN 🔐 アプリサーバー ⚙️ WiFi 📶

2. 接続線

🔹 基本の線スタイル

/* 線の共通スタイル */
.line {
  position: absolute;
  z-index: 1;
  opacity: 0.8;
}

/* 縦線 */
.line-v {
  width: 4px;
  /* height: 個別指定 */
}

/* 横線 */
.line-h {
  height: 4px;
  /* width: 個別指定 */
}

🔹 縦線のバリエーション

短い縦線（機器間50px）

.line-v-short {
  top: 150px;    /* 開始位置 */
  left: 247px;   /* 横位置 */
  height: 50px;  /* 長さ */
  width: 4px;
  background: #00ff88;
}

中くらいの縦線（機器間100px）

.line-v-medium {
  top: 150px;
  left: 247px;
  height: 100px;
  width: 4px;
  background: #00ff88;
}

長い縦線（機器間200px）

.line-v-long {
  top: 150px;
  left: 247px;
  height: 200px;
  width: 4px;
  background: #00ff88;
}

<div class="line line-v-short"></div>
<div class="line line-v-medium"></div>
<div class="line line-v-long"></div>

🔹 横線のバリエーション

短い横線（機器間80px）

.line-h-short {
  top: 267px;    /* 縦位置 */
  left: 200px;   /* 開始位置 */
  width: 80px;   /* 長さ */
  height: 4px;
  background: #ff9800;
}

中くらいの横線（機器間150px）

.line-h-medium {
  top: 267px;
  left: 200px;
  width: 150px;
  height: 4px;
  background: #ff9800;
}

長い横線（機器間300px）

.line-h-long {
  top: 267px;
  left: 200px;
  width: 300px;
  height: 4px;
  background: #ff9800;
}

🔹 斜め線

.line-diagonal {
  top: 200px;
  left: 250px;
  width: 150px;
  height: 4px;
  background: #1e90ff;
  transform: rotate(30deg);        /* 角度 */
  transform-origin: left center;   /* 回転の基準点 */
}

📝 角度の目安

角度 見た目 rotate(15deg) ゆるやかな斜め rotate(30deg) 普通の斜め rotate(45deg) 45度斜め rotate(-30deg) 逆向き斜め

🔹 線の色バリエーション

/* インターネット接続（水色・発光） */
.line-internet {
  background: linear-gradient(90deg, #00bfff, #0080ff);
  box-shadow: 0 0 10px rgba(0,191,255,0.5);
}

/* ファイアウォール通過（赤） */
.line-firewall {
  background: linear-gradient(90deg, #ff5252, #ff1744);
  box-shadow: 0 0 10px rgba(255,82,82,0.5);
}

/* 内部ネットワーク（緑） */
.line-internal {
  background: linear-gradient(90deg, #00ff88, #00e676);
  box-shadow: 0 0 10px rgba(0,255,136,0.5);
}

/* データベース接続（紫） */
.line-database {
  background: linear-gradient(90deg, #b388ff, #7c4dff);
  box-shadow: 0 0 10px rgba(179,136,255,0.5);
}

/* 警告（黄色・点滅） */
.line-warning {
  background: #ffc107;
  animation: pulse 1.5s infinite;
}

/* エラー（赤・点滅） */
.line-error {
  background: #ff1744;
  animation: pulse 0.8s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

🔹 点線（論理接続向け）

.line-dashed {
  top: 300px;
  left: 200px;
  width: 150px;
  height: 0;
  border-top: 3px dashed #00e5ff;
}

🔹 トラフィックアニメーション

/* 流れるアニメーション */
@keyframes traffic-flow {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

.line-animated {
  animation: traffic-flow 2s ease-in-out infinite;
}

/* 遅延を付けて順番に流れるように */
.line1 { animation-delay: 0s; }
.line2 { animation-delay: 0.3s; }
.line3 { animation-delay: 0.6s; }

3. ステータスバッジ

🔹 基本のステータス

.status {
  font-size: 10px;
  margin-top: 5px;
  padding: 3px 8px;
  border-radius: 10px;
  display: inline-block;
}

/* 正常（緑） */
.status-ok {
  background: rgba(0,255,136,0.2);
  color: #00ff88;
  border: 1px solid #00ff88;
}

/* 警告（黄色） */
.status-warning {
  background: rgba(255,193,7,0.2);
  color: #ffc107;
  border: 1px solid #ffc107;
}

/* エラー（赤） */
.status-error {
  background: rgba(255,82,82,0.2);
  color: #ff5252;
  border: 1px solid #ff5252;
}

/* 情報（青） */
.status-info {
  background: rgba(0,191,255,0.2);
  color: #00bfff;
  border: 1px solid #00bfff;
}

/* オフライン（グレー） */
.status-offline {
  background: rgba(158,158,158,0.2);
  color: #9e9e9e;
  border: 1px solid #9e9e9e;
}

<div class="node pos-server1">
  <div class="node-icon">🖥️</div>
  <div class="node-name">Server-01</div>
  <div class="status status-ok">Online</div>
</div>

🔹 詳細ステータス（CPU、メモリ等）

.status-detail {
  font-size: 9px;
  color: #aaa;
  margin-top: 3px;
}

<div class="node pos-server1">
  <div class="node-icon">🖥️</div>
  <div class="node-name">App Server</div>
  <div class="status status-ok">Running</div>
  <div class="status-detail">CPU: 45% | MEM: 62%</div>
</div>

🔹 点滅ステータス

.status-blink {
  animation: status-blink 1s infinite;
}

@keyframes status-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

<div class="status status-error status-blink">Critical</div>

4. ゾーン（エリア表示）

🔹 基本のゾーン

.zone {
  position: absolute;
  border: 2px dashed;
  border-radius: 15px;
  z-index: 0;
}

🔹 ゾーンサイズ別

小ゾーン

.zone-small {
  top: 150px;
  left: 100px;
  width: 200px;
  height: 120px;
  border-color: #ff9800;
  background: rgba(255,152,0,0.05);
}

中ゾーン

.zone-medium {
  top: 150px;
  left: 50px;
  width: 400px;
  height: 200px;
  border-color: #00ff88;
  background: rgba(0,255,136,0.05);
}

大ゾーン（横幅いっぱい）

.zone-large {
  top: 150px;
  left: 30px;
  right: 30px;      /* 左右30pxの余白 */
  height: 250px;
  border-color: #00e5ff;
  background: rgba(0,229,255,0.05);
}

🔹 ゾーンラベル

.zone-label {
  position: absolute;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 5px;
  z-index: 5;
}

/* DMZラベル */
.label-dmz {
  top: 155px;      /* ゾーンの少し内側 */
  left: 110px;
  color: #ff9800;
  background: rgba(255,152,0,0.2);
  border: 1px solid #ff9800;
}

/* 内部ネットワークラベル */
.label-internal {
  top: 300px;
  left: 60px;
  color: #00ff88;
  background: rgba(0,255,136,0.2);
  border: 1px solid #00ff88;
}

<div class="zone zone-medium"></div>
<div class="zone-label label-dmz">📦 DMZ</div>

🔹 よく使うゾーン構成

/* インターネットゾーン */
.zone-internet {
  top: 20px; left: 30px; right: 30px; height: 100px;
  border-color: #00bfff;
  background: rgba(0,191,255,0.05);
}

/* DMZゾーン */
.zone-dmz {
  top: 140px; left: 30px; right: 30px; height: 150px;
  border-color: #ff9800;
  background: rgba(255,152,0,0.05);
}

/* 内部ネットワークゾーン */
.zone-internal {
  top: 310px; left: 30px; right: 30px; height: 200px;
  border-color: #00ff88;
  background: rgba(0,255,136,0.05);
}

/* クライアントゾーン */
.zone-client {
  top: 530px; left: 30px; right: 30px; height: 120px;
  border-color: #00e5ff;
  background: rgba(0,229,255,0.05);
}

5. 凡例（レジェンド）

🔹 基本の凡例

.legend {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(30,42,58,0.95);
  border: 2px solid #00ff88;
  border-radius: 15px;
  padding: 15px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  z-index: 20;
}

.legend-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #00ff88;
  text-align: center;
}

.legend-item {
  display: flex;
  align-items: center;
  margin: 6px 0;
  gap: 10px;
}

.legend-color {
  width: 20px;
  height: 4px;
  border-radius: 2px;
}

.legend-text {
  font-size: 11px;
  color: #ccc;
}

<div class="legend">
  <div class="legend-title">📊 Network Zones</div>
  
  <div class="legend-item">
    <div class="legend-color" style="background: #00bfff;"></div>
    <div class="legend-text">Internet</div>
  </div>
  
  <div class="legend-item">
    <div class="legend-color" style="background: #ff5252;"></div>
    <div class="legend-text">Firewall</div>
  </div>
  
  <div class="legend-item">
    <div class="legend-color" style="background: #00ff88;"></div>
    <div class="legend-text">Internal</div>
  </div>
</div>

🔹 凡例の位置バリエーション

/* 右下（デフォルト） */
.legend-bottom-right {
  bottom: 20px;
  right: 20px;
}

/* 左下 */
.legend-bottom-left {
  bottom: 20px;
  left: 20px;
}

/* 右上 */
.legend-top-right {
  top: 80px;
  right: 20px;
}

/* 左上 */
.legend-top-left {
  top: 80px;
  left: 20px;
}

🔹 ステータス凡例

.legend-status .legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;  /* 丸にする */
}

<div class="legend legend-status">
  <div class="legend-title">📊 Status</div>
  
  <div class="legend-item">
    <div class="legend-color" style="background: #00ff88;"></div>
    <div class="legend-text">Online / OK</div>
  </div>
  
  <div class="legend-item">
    <div class="legend-color" style="background: #ffc107;"></div>
    <div class="legend-text">Warning</div>
  </div>
  
  <div class="legend-item">
    <div class="legend-color" style="background: #ff5252;"></div>
    <div class="legend-text">Error / Down</div>
  </div>
</div>

6. ラベル・テキスト

🔹 タイトル

.map-title {
  text-align: center;
  color: #00ff88;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
  text-shadow: 0 0 20px rgba(0,255,136,0.5);
  letter-spacing: 3px;
}

<div class="map-title">🌐 Network Topology</div>

🔹 サブタイトル

.map-subtitle {
  text-align: center;
  color: #aaa;
  font-size: 14px;
  margin-top: -20px;
  margin-bottom: 30px;
}

<div class="map-subtitle">Last Updated: 2025-01-18 10:30</div>

🔹 フローティングラベル（任意の位置に配置）

.floating-label {
  position: absolute;
  font-size: 11px;
  color: #888;
  background: rgba(0,0,0,0.5);
  padding: 3px 8px;
  border-radius: 5px;
}

.label-bandwidth {
  top: 180px;
  left: 280px;
}

<div class="floating-label label-bandwidth">1Gbps</div>

🔹 接続線のラベル（帯域表示など）

.line-label {
  position: absolute;
  font-size: 10px;
  color: #00ff88;
  background: rgba(0,0,0,0.7);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

.label-line1 {
  top: 175px;
  left: 255px;
}

<div class="line-label label-line1">100Mbps</div>

7. 位置・サイズ調整早見表

🔹 位置指定チートシート

やりたいこと CSS 上から100pxに配置 top: 100px; 下から50pxに配置 bottom: 50px; 左から200pxに配置 left: 200px; 右から100pxに配置 right: 100px; 水平中央に配置 left: 50%; transform: translateX(-50%); 垂直中央に配置 top: 50%; transform: translateY(-50%); 完全中央に配置 top: 50%; left: 50%; transform: translate(-50%, -50%); 画面の30%の位置 left: 30%;

🔹 サイズ指定チートシート

やりたいこと CSS 幅を固定 width: 150px; 最小幅を指定 min-width: 100px; 最大幅を指定 max-width: 200px; 親要素の幅いっぱい width: 100%; 左右に余白を持たせて広げる left: 30px; right: 30px;

🔹 よく使う数値の目安

機器間の距離

距離 用途 50px 密接な接続（冗長構成など） 100px 標準的な間隔 150px ゆったりした間隔 200px 階層間（Web→App→DBなど）

ノードサイズ

サイズ min-width padding 用途 小 70px 8px 12px PC、プリンター 中 100px 15px 20px サーバー、スイッチ 大 140px 20px 30px メインサーバー、DC

アイコンサイズ

サイズ font-size 用途 小 20px 小ノード用 中 32px 標準ノード用 大 42px 大ノード用

🔹 レスポンシブ対応

/* パーセント指定で柔軟に */
.pos-flexible {
  top: 15%;
  left: 25%;
}

/* 右基準で配置（右端からの距離が固定） */
.pos-right-based {
  top: 200px;
  right: 100px;   /* leftではなくright */
}

/* 両端に配置 */
.pos-left-item { left: 10%; }
.pos-right-item { right: 10%; }

🎁 コピペ用テンプレート集

テンプレート1: 新規機器追加セット

/* ========================================
   [機器名] 
======================================== */
/* 位置 */
.pos-newdevice {
  top: 000px;     /* ← 変更 */
  left: 000px;    /* ← 変更 */
}

/* 色（必要なら） */
.node-newtype {
  border-color: #00ff88;  /* ← 変更 */
}

<!-- [機器名] -->
<div class="node pos-newdevice">
  <div class="node-icon">🖥️</div>
  <div class="node-name">Device Name</div>
  <div class="status status-ok">Online</div>
</div>

テンプレート2: 接続線追加セット

/* [接続元] → [接続先] */
.line-new {
  top: 000px;     /* ← 変更 */
  left: 000px;    /* ← 変更 */
  height: 000px;  /* 縦線の場合 */
  /* width: 000px;  横線の場合 */
  width: 4px;     /* 縦線の場合 */
  /* height: 4px;   横線の場合 */
  background: #00ff88;
}

<div class="line line-new"></div>

テンプレート3: ゾーン追加セット

/* [ゾーン名] */
.zone-new {
  top: 000px;
  left: 30px;
  right: 30px;
  height: 150px;
  border-color: #00ff88;   /* ← 変更 */
  background: rgba(0,255,136,0.05);  /* ← 変更 */
}

.label-new {
  top: 000px;    /* zone-newのtop + 5px */
  left: 40px;
  color: #00ff88;
  background: rgba(0,255,136,0.2);
  border: 1px solid #00ff88;
}

<div class="zone zone-new"></div>
<div class="zone-label label-new">📦 Zone Name</div>

まとめ

部品 ポイント 機器ノード position: absolute + .pos-xxx で位置指定 接続線 縦線は height、横線は width で長さ指定 ステータス 緑/黄/赤の3色で状態を表現 ゾーン border: dashed + 薄い背景色 凡例 右下配置が基本、位置は変更可能

困ったときは、この記事をCtrl+Fで検索！ 🔍

#Splunk #Dashboard #CSS #UI部品 #ネットワーク図 #逆引き #コピペ