ネットワーク構成図で考えるSplunkレイアウト入門
<dashboard version="1.1">
<!-- ダッシュボードのタイトル -->
<label>🌐 ネットワーク構成図</label>
<!-- 説明文 -->
<description>HTML/CSSのみで実装した企業ネットワーク構成図</description>
<!-- 1つ目の行（Row） -->
<row>
<!-- パネル -->
<panel>
<!-- HTMLコンテンツ開始 -->
<html>
<!-- ========================================
CSSスタイル定義
======================================== -->
<style>
/* ========================================
ネットワーク図全体のコンテナ
======================================== */
.network-map {
position: relative; /* 子要素の絶対配置の基準点 */
width: 100%; /* 幅100% */
min-height: 800px; /* 最小高さ800px */
background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #0d1b2a 100%); /* グラデーション背景（濃紺） */
border-radius: 20px; /* 角を丸く */
padding: 40px; /* 内側の余白40px */
margin: 20px auto; /* 上下20px、左右は中央揃え */
overflow: hidden; /* はみ出し部分を隠す */
}
/* ========================================
タイトルエリア
======================================== */
.map-title {
text-align: center; /* 中央揃え */
color: #00ff88; /* 緑色の文字 */
font-size: 28px; /* 文字サイズ28px */
font-weight: bold; /* 太字 */
margin-bottom: 30px; /* 下に30pxの余白 */
text-shadow: 0 0 20px rgba(0,255,136,0.5); /* 発光エフェクト */
letter-spacing: 3px; /* 文字間隔 */
}
/* ========================================
ネットワーク機器（ノード）の基本スタイル
======================================== */
.node {
position: absolute; /* 絶対配置 */
background: linear-gradient(145deg, #1e2a3a 0%, #0f1722 100%); /* 暗いグラデーション */
border: 3px solid; /* 枠線3px、色は個別指定 */
border-radius: 15px; /* 角を丸く */
padding: 15px 20px; /* 上下15px、左右20pxの余白 */
box-shadow: 0 8px 32px rgba(0,0,0,0.4),
inset 0 1px 0 rgba(255,255,255,0.1); /* 影と内側のハイライト */
text-align: center; /* 文字中央揃え */
min-width: 100px; /* 最小幅100px */
transition: all 0.3s ease; /* 変化時のアニメーション */
z-index: 10; /* 重なり順（線より上に表示） */
}
/* ========================================
ノードにマウスを乗せたとき
======================================== */
.node:hover {
transform: scale(1.1) translateY(-5px); /* 1.1倍に拡大して上に移動 */
box-shadow: 0 15px 40px rgba(0,0,0,0.5),
0 0 30px rgba(0,255,136,0.3); /* 影を強く＋発光 */
z-index: 100; /* 最前面に表示 */
}
/* ========================================
ノードのアイコン
======================================== */
.node-icon {
font-size: 32px; /* アイコンサイズ32px */
margin-bottom: 8px; /* 下に8pxの余白 */
}
/* ========================================
ノード名
======================================== */
.node-name {
font-size: 12px; /* 文字サイズ12px */
font-weight: bold; /* 太字 */
color: white; /* 白文字 */
margin-top: 5px; /* 上に5pxの余白 */
}
/* ========================================
ノードのステータス表示
======================================== */
.node-status {
font-size: 10px; /* 文字サイズ10px */
margin-top: 5px; /* 上に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; /* 赤の枠 */
}
/* ========================================
接続線の基本スタイル
======================================== */
.line {
position: absolute; /* 絶対配置 */
z-index: 1; /* ノードより下に表示 */
opacity: 0.8; /* 少し透明に */
}
/* 縦の接続線 */
.line-vertical {
width: 4px; /* 幅4px */
}
/* 横の接続線 */
.line-horizontal {
height: 4px; /* 高さ4px */
}
/* ========================================
各ゾーンの色定義
======================================== */
/* インターネット（青） */
.internet {
border-color: #00bfff; /* 水色の枠 */
}
.line-internet {
background: linear-gradient(90deg, #00bfff, #0080ff); /* 水色グラデーション */
box-shadow: 0 0 10px rgba(0,191,255,0.5); /* 発光エフェクト */
}
/* ファイアウォール（赤） */
.firewall {
border-color: #ff5252; /* 赤の枠 */
}
.line-firewall {
background: linear-gradient(90deg, #ff5252, #ff1744); /* 赤グラデーション */
box-shadow: 0 0 10px rgba(255,82,82,0.5); /* 発光エフェクト */
}
/* DMZ（オレンジ） */
.dmz {
border-color: #ff9800; /* オレンジの枠 */
}
.line-dmz {
background: linear-gradient(90deg, #ff9800, #ff5722); /* オレンジグラデーション */
box-shadow: 0 0 10px rgba(255,152,0,0.5); /* 発光エフェクト */
}
/* 内部ネットワーク（緑） */
.internal {
border-color: #00ff88; /* 緑の枠 */
}
.line-internal {
background: linear-gradient(90deg, #00ff88, #00e676); /* 緑グラデーション */
box-shadow: 0 0 10px rgba(0,255,136,0.5); /* 発光エフェクト */
}
/* データベース（紫） */
.database {
border-color: #b388ff; /* 紫の枠 */
}
.line-database {
background: linear-gradient(90deg, #b388ff, #7c4dff); /* 紫グラデーション */
box-shadow: 0 0 10px rgba(179,136,255,0.5); /* 発光エフェクト */
}
/* クライアント（シアン） */
.client {
border-color: #00e5ff; /* シアンの枠 */
}
.line-client {
background: linear-gradient(90deg, #00e5ff, #00b8d4); /* シアングラデーション */
box-shadow: 0 0 10px rgba(0,229,255,0.5); /* 発光エフェクト */
}
/* ========================================
ノードの配置（座標指定）
======================================== */
/* インターネット（雲） */
.pos-internet {
top: 30px;
left: 50%;
transform: translateX(-50%);
}
/* ファイアウォール */
.pos-firewall {
top: 150px;
left: 50%;
transform: translateX(-50%);
}
/* ルーター */
.pos-router {
top: 280px;
left: 50%;
transform: translateX(-50%);
}
/* DMZ - Webサーバー */
.pos-web1 {
top: 280px;
left: 100px;
}
/* DMZ - メールサーバー */
.pos-mail {
top: 280px;
right: 100px;
}
/* L3スイッチ */
.pos-l3switch {
top: 420px;
left: 50%;
transform: translateX(-50%);
}
/* アプリサーバー1 */
.pos-app1 {
top: 550px;
left: 150px;
}
/* アプリサーバー2 */
.pos-app2 {
top: 550px;
left: 50%;
transform: translateX(-50%);
}
/* データベースサーバー */
.pos-db {
top: 550px;
right: 150px;
}
/* クライアントPC群 */
.pos-client1 {
top: 680px;
left: 80px;
}
.pos-client2 {
top: 680px;
left: 250px;
}
.pos-client3 {
top: 680px;
right: 250px;
}
.pos-client4 {
top: 680px;
right: 80px;
}
/* ========================================
接続線の配置
======================================== */
/* インターネット → ファイアウォール */
.line1 {
top: 95px;
left: 50%;
transform: translateX(-50%);
height: 55px;
}
/* ファイアウォール → ルーター */
.line2 {
top: 215px;
left: 50%;
transform: translateX(-50%);
height: 65px;
}
/* ルーター → Webサーバー */
.line3 {
top: 297px;
left: 195px;
width: 180px;
}
/* ルーター → メールサーバー */
.line4 {
top: 297px;
right: 195px;
width: 180px;
}
/* ルーター → L3スイッチ */
.line5 {
top: 345px;
left: 50%;
transform: translateX(-50%);
height: 75px;
}
/* L3スイッチ → アプリサーバー1 */
.line6 {
top: 485px;
left: 195px;
width: 180px;
}
/* L3スイッチ → アプリサーバー2 */
.line7 {
top: 485px;
left: 50%;
transform: translateX(-50%);
height: 65px;
}
/* L3スイッチ → データベース */
.line8 {
top: 485px;
right: 195px;
width: 180px;
}
/* アプリサーバー → クライアント群への線 */
.line9 {
top: 615px;
left: 50%;
transform: translateX(-50%);
height: 65px;
}
/* クライアント接続線（横） */
.line10 {
top: 697px;
left: 145px;
width: 500px;
}
/* ========================================
ゾーン表示（背景エリア）
======================================== */
.zone {
position: absolute;
border: 2px dashed;
border-radius: 15px;
opacity: 0.3;
z-index: 0;
}
/* DMZゾーン */
.zone-dmz {
top: 240px;
left: 50px;
right: 50px;
height: 120px;
border-color: #ff9800;
background: rgba(255,152,0,0.05);
}
/* 内部ネットワークゾーン */
.zone-internal {
top: 380px;
left: 50px;
right: 50px;
height: 250px;
border-color: #00ff88;
background: rgba(0,255,136,0.05);
}
/* クライアントゾーン */
.zone-client {
top: 650px;
left: 50px;
right: 50px;
height: 100px;
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;
}
.label-dmz {
top: 245px;
left: 60px;
color: #ff9800;
background: rgba(255,152,0,0.2);
border: 1px solid #ff9800;
}
.label-internal {
top: 385px;
left: 60px;
color: #00ff88;
background: rgba(0,255,136,0.2);
border: 1px solid #00ff88;
}
.label-client {
top: 655px;
left: 60px;
color: #00e5ff;
background: rgba(0,229,255,0.2);
border: 1px solid #00e5ff;
}
/* ========================================
凡例
======================================== -->
.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;
}
/* ========================================
トラフィックアニメーション
======================================== */
@keyframes traffic-flow {
0% { opacity: 0.3; }
50% { opacity: 1; }
100% { opacity: 0.3; }
}
.line {
animation: traffic-flow 2s ease-in-out infinite;
}
.line1 { animation-delay: 0s; }
.line2 { animation-delay: 0.2s; }
.line3 { animation-delay: 0.4s; }
.line4 { animation-delay: 0.4s; }
.line5 { animation-delay: 0.6s; }
.line6 { animation-delay: 0.8s; }
.line7 { animation-delay: 0.8s; }
.line8 { animation-delay: 0.8s; }
.line9 { animation-delay: 1.0s; }
.line10 { animation-delay: 1.2s; }
</style>
<!-- CSSスタイル定義終了 -->
<!-- ========================================
HTMLコンテンツ（ネットワーク図本体）
======================================== -->
<div class="network-map">
<!-- タイトル -->
<div class="map-title">🌐 Enterprise Network Topology</div>
<!-- ========================================
ゾーン（背景エリア）
======================================== -->
<div class="zone zone-dmz"></div>
<div class="zone zone-internal"></div>
<div class="zone zone-client"></div>
<!-- ゾーンラベル -->
<div class="zone-label label-dmz">📦 DMZ</div>
<div class="zone-label label-internal">🔒 Internal Network</div>
<div class="zone-label label-client">👥 Client Zone</div>
<!-- ========================================
ネットワーク機器（ノード）の配置
======================================== -->
<!-- インターネット -->
<div class="node internet pos-internet">
<div class="node-icon">☁️</div>
<div class="node-name">Internet</div>
<div class="node-status status-ok">Online</div>
</div>
<!-- ファイアウォール -->
<div class="node firewall pos-firewall">
<div class="node-icon">🛡️</div>
<div class="node-name">Firewall</div>
<div class="node-status status-ok">Active</div>
</div>
<!-- ルーター -->
<div class="node internal pos-router">
<div class="node-icon">📡</div>
<div class="node-name">Router</div>
<div class="node-status status-ok">Running</div>
</div>
<!-- DMZ - Webサーバー -->
<div class="node dmz pos-web1">
<div class="node-icon">🌐</div>
<div class="node-name">Web Server</div>
<div class="node-status status-ok">HTTP 200</div>
</div>
<!-- DMZ - メールサーバー -->
<div class="node dmz pos-mail">
<div class="node-icon">📧</div>
<div class="node-name">Mail Server</div>
<div class="node-status status-warning">High Load</div>
</div>
<!-- L3スイッチ -->
<div class="node internal pos-l3switch">
<div class="node-icon">🔀</div>
<div class="node-name">L3 Switch</div>
<div class="node-status status-ok">48 Ports</div>
</div>
<!-- アプリサーバー1 -->
<div class="node internal pos-app1">
<div class="node-icon">⚙️</div>
<div class="node-name">App Server 1</div>
<div class="node-status status-ok">CPU: 45%</div>
</div>
<!-- アプリサーバー2 -->
<div class="node internal pos-app2">
<div class="node-icon">⚙️</div>
<div class="node-name">App Server 2</div>
<div class="node-status status-error">Down</div>
</div>
<!-- データベースサーバー -->
<div class="node database pos-db">
<div class="node-icon">🗄️</div>
<div class="node-name">Database</div>
<div class="node-status status-ok">MySQL</div>
</div>
<!-- クライアントPC群 -->
<div class="node client pos-client1">
<div class="node-icon">💻</div>
<div class="node-name">PC-001</div>
<div class="node-status status-ok">Online</div>
</div>
<div class="node client pos-client2">
<div class="node-icon">💻</div>
<div class="node-name">PC-002</div>
<div class="node-status status-ok">Online</div>
</div>
<div class="node client pos-client3">
<div class="node-icon">💻</div>
<div class="node-name">PC-003</div>
<div class="node-status status-warning">Updating</div>
</div>
<div class="node client pos-client4">
<div class="node-icon">🖨️</div>
<div class="node-name">Printer</div>
<div class="node-status status-ok">Ready</div>
</div>
<!-- ========================================
接続線の配置
======================================== -->
<!-- インターネット → ファイアウォール -->
<div class="line line-vertical line-internet line1"></div>
<!-- ファイアウォール → ルーター -->
<div class="line line-vertical line-firewall line2"></div>
<!-- ルーター → Webサーバー -->
<div class="line line-horizontal line-dmz line3"></div>
<!-- ルーター → メールサーバー -->
<div class="line line-horizontal line-dmz line4"></div>
<!-- ルーター → L3スイッチ -->
<div class="line line-vertical line-internal line5"></div>
<!-- L3スイッチ → アプリサーバー1 -->
<div class="line line-horizontal line-internal line6"></div>
<!-- L3スイッチ → アプリサーバー2 -->
<div class="line line-vertical line-internal line7"></div>
<!-- L3スイッチ → データベース -->
<div class="line line-horizontal line-database line8"></div>
<!-- アプリサーバー → クライアント -->
<div class="line line-vertical line-client line9"></div>
<!-- クライアント接続線（横） -->
<div class="line line-horizontal line-client line10"></div>
<!-- ========================================
凡例
======================================== -->
<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: #ff9800;"></div>
<div class="legend-text">DMZ</div>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #00ff88;"></div>
<div class="legend-text">Internal</div>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #b388ff;"></div>
<div class="legend-text">Database</div>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #00e5ff;"></div>
<div class="legend-text">Client</div>
</div>
</div>
</div>
<!-- ネットワーク図本体終了 -->
</html>
<!-- HTMLコンテンツ終了 -->
</panel>
<!-- パネル終了 -->
</row>
<!-- 行終了 -->
</dashboard>
<!-- ダッシュボード終了 -->【Splunk】HTML/CSSでネットワーク構成図を作る！機器配置・編集・追加の実務テクニック
はじめに
Splunkのクラシックダッシュボードで、HTML/CSSを使ってネットワーク構成図を作成する方法を解説します。
この記事では特に実務で役立つ「機器の配置・編集・追加」のコツにフォーカスします。
🎯 この記事で学べること
既存機器の位置調整テクニック
新規機器の追加手順（5ステップ）
接続線の引き方のコツ
実務でよく使うパターン集
📐 基本構造を理解しよう
座標システムの考え方
┌─────────────────────────────────────┐
│ (0,0) │
│ ↓ top: 50px │
│ ┌───────┐ │
│ │ 機器 │ ← left: 100px │
│ └───────┘ │
│ │
│ ↓ top: 200px │
│ ┌───────┐ │
│ │ 機器 │ ← left: 50% │
│ └───────┘ (中央配置) │
│ │
└─────────────────────────────────────┘
ポイント: position: absolute で自由に配置できる！
🔧 既存機器の位置を編集する
Step 1: 編集したい機器のクラス名を確認
<!-- この機器を動かしたい -->
<div class="node firewall pos-firewall">
<div class="node-icon">🛡️</div>
<div class="node-name">Firewall</div>
</div>
pos-firewall が位置を決めているクラス！
Step 2: CSSで座標を変更
/* 変更前 */
.pos-firewall {
top: 150px;
left: 50%;
transform: translateX(-50%);
}
/* 変更後（右に移動） */
.pos-firewall {
top: 150px;
left: 70%; /* 50% → 70% に変更 */
transform: translateX(-50%);
}
📝 位置指定の早見表
やりたいこと CSS記述 上から100pxの位置 top: 100px; 左から200pxの位置 left: 200px; 右から100pxの位置 right: 100px; 水平中央 left: 50%; transform: translateX(-50%); 画面の30%の位置 left: 30%;
➕ 新規機器を追加する（5ステップ）
【例】監視サーバーを追加する
Step 1: 位置用のCSSクラスを作成
/* ========================================
新規追加：監視サーバーの位置
======================================== */
.pos-monitor {
top: 420px; /* 上からの距離 */
right: 100px; /* 右からの距離 */
}
Step 2: 機器の色（ゾーン）を決める
/* 監視系は黄色にする */
.monitoring {
border-color: #ffc107;
}
Step 3: HTMLに機器を追加
<!-- 監視サーバー -->
<div class="node monitoring pos-monitor">
<div class="node-icon">👁️</div>
<div class="node-name">Monitor Server</div>
<div class="node-status status-ok">Zabbix</div>
</div>
Step 4: 接続線を追加（必要な場合）
/* 監視サーバーへの接続線 */
.line-to-monitor {
top: 450px;
right: 200px;
width: 100px;
}
<div class="line line-horizontal line-internal line-to-monitor"></div>
Step 5: 凡例に追加（必要な場合）
<div class="legend-item">
<div class="legend-color" style="background: #ffc107;"></div>
<div class="legend-text">Monitoring</div>
</div>
🎨 接続線を引くコツ
縦線と横線の使い分け
/* 縦線：heightで長さを指定 */
.line-vertical {
width: 4px; /* 線の太さ */
/* heightは個別に指定 */
}
/* 横線：widthで長さを指定 */
.line-horizontal {
height: 4px; /* 線の太さ */
/* widthは個別に指定 */
}
実践例：2つの機器を繋ぐ
機器A (top: 100px, left: 200px)
│
│ ← 縦線
│
機器B (top: 250px, left: 200px)
/* 機器Aから機器Bへの縦線 */
.line-a-to-b {
top: 160px; /* 機器Aの下端あたり */
left: 247px; /* 機器の中央 */
height: 90px; /* 機器Bまでの距離 */
}
💡 線の位置計算のコツ
縦線のleft = 機器のleft + (機器の幅 / 2)
横線のtop = 機器のtop + (機器の高さ / 2)
実務Tips: 最初はざっくり配置して、ブラウザで確認しながら微調整！
📋 実務でよく使うパターン集
パターン1: サーバー群を横並びにする
.pos-server1 { top: 300px; left: 100px; }
.pos-server2 { top: 300px; left: 280px; }
.pos-server3 { top: 300px; left: 460px; }
[Server1] [Server2] [Server3]
パターン2: 冗長構成（Active/Standby）
.pos-active {
top: 200px;
left: 200px;
}
.pos-standby {
top: 200px;
left: 350px;
}
<!-- Active -->
<div class="node internal pos-active">
<div class="node-icon">⚙️</div>
<div class="node-name">App-01 (Active)</div>
<div class="node-status status-ok">Primary</div>
</div>
<!-- Standby -->
<div class="node internal pos-standby">
<div class="node-icon">⚙️</div>
<div class="node-name">App-02 (Standby)</div>
<div class="node-status status-warning">Secondary</div>
</div>
パターン3: 階層構造（3層アーキテクチャ）
/* Web層 */
.pos-web { top: 100px; left: 50%; transform: translateX(-50%); }
/* App層 */
.pos-app { top: 250px; left: 50%; transform: translateX(-50%); }
/* DB層 */
.pos-db { top: 400px; left: 50%; transform: translateX(-50%); }
[Web] ← Presentation層
│
[App] ← Application層
│
[DB] ← Database層
パターン4: 複数拠点を表現
/* 東京拠点 */
.pos-tokyo-router { top: 200px; left: 150px; }
.pos-tokyo-sw { top: 300px; left: 150px; }
/* 大阪拠点 */
.pos-osaka-router { top: 200px; right: 150px; }
.pos-osaka-sw { top: 300px; right: 150px; }
/* 拠点間接続線 */
.line-wan {
top: 217px;
left: 250px;
width: 300px;
}
🛠️ トラブルシューティング
Q1: 機器が重なってしまう
/* z-indexで重なり順を制御 */
.node {
z-index: 10; /* 基本値 */
}
.node:hover {
z-index: 100; /* ホバー時は最前面 */
}
/* 特定の機器を常に前面に */
.pos-firewall {
z-index: 50;
}
Q2: 線が機器の後ろに隠れる
/* 線のz-indexを確認 */
.line {
z-index: 1; /* 機器(10)より小さい値 */
}
Q3: 中央揃えがうまくいかない
/* 正しい中央揃え */
.pos-center {
left: 50%;
transform: translateX(-50%); /* これが必要！ */
}
Q4: レスポンシブにしたい
/* pxではなく%を使う */
.pos-flexible {
top: 20%; /* 画面の20%の位置 */
left: 30%; /* 画面の30%の位置 */
}
📝 実務で使えるチェックリスト
新規機器追加時
[ ] 位置用CSSクラス（.pos-xxx）を作成した
[ ] 色/ゾーン用CSSクラスを決めた
[ ] HTMLに機器を追加した
[ ] 接続線を追加した
[ ] 凡例を更新した
[ ] ホバー時の動作を確認した
位置調整時
[ ] top / left / right の値を変更した
[ ] 関連する接続線の位置も調整した
[ ] 他の機器と重なっていないか確認した
🎁 コピペで使えるテンプレート
新規機器テンプレート
/* ========================================
新規追加：[機器名]の位置
======================================== */
.pos-newdevice {
top: 000px; /* ← 変更 */
left: 000px; /* ← 変更 */
}
<!-- [機器名] -->
<div class="node internal pos-newdevice">
<div class="node-icon">🖥️</div>
<div class="node-name">機器名</div>
<div class="node-status status-ok">Status</div>
</div>
接続線テンプレート
/* [接続元] → [接続先] */
.line-new {
top: 000px; /* ← 変更 */
left: 000px; /* ← 変更 */
width: 000px; /* 横線の場合 */
/* height: 000px; 縦線の場合 */
}
<div class="line line-horizontal line-internal line-new"></div>
まとめ
作業 ポイント 位置編集 .pos-xxx クラスの top/left を変更 新規追加 5ステップ（CSS位置→色→HTML→線→凡例） 接続線 縦線はheight、横線はwidthで長さ指定 中央揃え left: 50% + transform: translateX(-50%)
実務では、まず大まかに配置してからブラウザで確認→微調整を繰り返すのが効率的です！
参考リンク
この記事が参考になったら「いいね」お願いします！🎉
いいなと思ったら応援しよう！
読んでくださり感謝します。
もしこの記事が紅茶一杯ぶんの価値を感じさせたなら、
チップで風速アップもできます。