以下はご要望どおりの 英訳（フル翻訳・構成維持） です。
技術ドキュメント用途・社内共有・Qiita / GitHub README にそのまま使える表現にしています。

Splunk Classic Dashboard: How to Create a Network Topology Diagram

Complete Guide with Detailed Comments

🎯 What You Will Learn from This Guide

How to build complex network topology diagrams
How to place servers, switches, and client devices
How to draw connection lines and calculate their positions
A detailed, line-by-line explanation of the code

📐 Design Blueprint: What We Are Building

Server 1            Server 2
 (Blue)              (Blue)
   │                  │
   └────┐        ┌────┘
        │        │
     ┌──────────────┐
     │    Switch    │
     │   (Green)    │
     └──────────────┘
        │   │   │
    ┌───┘   │   └───┐
    │       │       │
   PC1     PC2     PC3
 (Gray)  (Gray)   (Gray)

🎨 Complete Code (With Extremely Detailed Comments)

<dashboard version="1.1">
  <!-- ========================================== -->
  <!-- Dashboard title -->
  <!-- Displayed at the top of the screen -->
  <!-- ========================================== -->
  <label>[Detailed Guide] How to Create a Network Topology Diagram</label>
  
  <!-- ========================================== -->
  <!-- row: horizontal layout container -->
  <!-- Allows panels to be arranged side by side -->
  <!-- ========================================== -->
  <row>
    
    <!-- ========================================== -->
    <!-- panel: individual display area -->
    <!-- Container for charts, tables, or HTML -->
    <!-- ========================================== -->
    <panel>
      
      <!-- ========================================== -->
      <!-- html: area for HTML and CSS -->
      <!-- Used for custom designs -->
      <!-- ========================================== -->
      <html>
        
        <!-- ========================================== -->
        <!-- style: CSS definitions -->
        <!-- Rules that control visual appearance -->
        <!-- ========================================== -->
        <style>
          
          /* ========================================== */
          /* .container: parent container */
          /* Base container for positioning all elements */
          /* ========================================== */
          .container {
            /* Use relative positioning as the reference */
            position: relative;
            
            /* Container width */
            width: 1000px;
            
            /* Container height */
            height: 700px;
            
            /* Background color */
            background: #fafafa;
            
            /* Center horizontally with margins */
            margin: 30px auto;
            
            /* Border styling */
            border: 2px solid #ddd;
          }
          
          /* ========================================== */
          /* .server: server box */
          /* Represents database or web servers */
          /* ========================================== */
          .server {
            position: absolute;
            width: 180px;
            height: 140px;
            background: #1976D2;
            border-radius: 8px;
            box-shadow: 0 6px 15px rgba(0,0,0,0.3);
            color: white;
            font-weight: bold;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }
          
          /* ========================================== */
          /* .switch: network switch */
          /* Can also represent hubs or routers */
          /* ========================================== */
          .switch {
            position: absolute;
            width: 200px;
            height: 60px;
            background: #388E3C;
            border-radius: 6px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            color: white;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          
          /* ========================================== */
          /* .client: client PC */
          /* Represents end-user devices */
          /* ========================================== */
          .client {
            position: absolute;
            width: 100px;
            height: 100px;
            background: #757575;
            border-radius: 50%;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            color: white;
            font-weight: bold;
            font-size: 12px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }
          
          /* ========================================== */
          /* .line: connection line */
          /* Connects servers, switches, and clients */
          /* ========================================== */
          .line {
            position: absolute;
            background: #999;
          }
          
          /* Horizontal line */
          .line-h {
            height: 3px;
          }
          
          /* Vertical line */
          .line-v {
            width: 3px;
          }
          
          /* ========================================== */
          /* Element positioning */
          /* ========================================== */
          
          /* Server 1 (top-left) */
          .server1 {
            top: 50px;
            left: 80px;
          }
          
          /* Server 2 (top-right) */
          .server2 {
            top: 50px;
            right: 80px;
          }
          
          /* Switch (center) */
          .switch1 {
            top: 280px;
            left: 400px; /* (1000 - 200) / 2 */
          }
          
          /* Clients (bottom) */
          .client1 {
            bottom: 80px;
            left: 100px;
          }
          
          .client2 {
            bottom: 80px;
            left: 350px;
          }
          
          .client3 {
            bottom: 80px;
            right: 100px;
          }
          
          /* ========================================== */
          /* Connection line positioning */
          /* ========================================== */
          
          .line1 {
            top: 200px;
            left: 168px;
            height: 80px;
          }
          
          .line2 {
            top: 200px;
            right: 168px;
            height: 80px;
          }
          
          .line3 {
            top: 308px;
            left: 268px;
            width: 132px;
          }
          
          .line4 {
            top: 308px;
            left: 600px;
            width: 152px;
          }
          
          .line5 {
            top: 350px;
            left: 498px;
            height: 100px;
          }
          
          .line6 {
            top: 450px;
            left: 150px;
            width: 348px;
          }
          
          .line7 {
            top: 450px;
            left: 400px;
            width: 98px;
          }
          
          .line8 {
            top: 450px;
            left: 500px;
            width: 300px;
          }
          
          /* Sub-label text (IP addresses, etc.) */
          .sublabel {
            font-size: 11px;
            margin-top: 4px;
            opacity: 0.9;
          }
          
        </style>
        
        <!-- ========================================== -->
        <!-- HTML Structure -->
        <!-- ========================================== -->
        <div class="container">
          
          <!-- Servers -->
          <div class="server server1">
            <div>Server 1</div>
            <div class="sublabel">Web Server</div>
          </div>
          
          <div class="server server2">
            <div>Server 2</div>
            <div class="sublabel">DB Server</div>
          </div>
          
          <!-- Switch -->
          <div class="switch switch1">
            Core Switch
          </div>
          
          <!-- Clients -->
          <div class="client client1">
            <div>PC-1</div>
            <div class="sublabel">192.168.1.10</div>
          </div>
          
          <div class="client client2">
            <div>PC-2</div>
            <div class="sublabel">192.168.1.11</div>
          </div>
          
          <div class="client client3">
            <div>PC-3</div>
            <div class="sublabel">192.168.1.12</div>
          </div>
          
          <!-- Connection lines -->
          <div class="line line-v line1"></div>
          <div class="line line-v line2"></div>
          <div class="line line-h line3"></div>
          <div class="line line-h line4"></div>
          <div class="line line-v line5"></div>
          <div class="line line-h line6"></div>
          <div class="line line-h line7"></div>
          <div class="line line-h line8"></div>
          
        </div>
        
      </html>
    </panel>
  </row>
</dashboard>

📊 How Line Position Calculations Work

Vertical Line Horizontal Position

left = box_left + (box_width ÷ 2) - (line_thickness ÷ 2)

Horizontal Line Vertical Position

top = box_top + (box_height ÷ 2) - (line_thickness ÷ 2)

Line Length (Horizontal)

width = end_left - start_left

🎓 Beginner-Friendly Step-by-Step Approach

Create one box
Add another box
Draw a single connection line
Repeat the pattern

💡 Common Mistakes and Fixes

Incorrect center calculations
Missing position: relative on the container
Forgetting to subtract line thickness

📝 Summary

3 Steps to Build Complex Network Diagrams

Step	Task	Key Point
1	Place boxes	Use `position: absolute`
2	Calculate line positions	Center = left + (width ÷ 2) - (thickness ÷ 2)
3	Draw lines	`.line-h` and `.line-v`

🚀 Copy this code and start building your own network topology diagram!

Splunk Classic Dashboard：ネットワーク構成図の作り方【完全解説・コメント付き】

🎯 このガイドで学べること

複雑なネットワーク構成図の作り方
サーバー・スイッチ・クライアントの配置方法
接続線の引き方と計算方法
コード1行ずつの詳細解説

📐 設計図：何を作るか

サーバー1         サーバー2
 (青)              (青)
  │                │
  └────┐      ┌────┘
       │      │
    ┌──────────┐
    │ スイッチ │
    │  (緑)   │
    └──────────┘
       │  │  │
   ┌───┘  │  └───┐
   │      │      │
  PC1    PC2    PC3
 (灰色) (灰色) (灰色)

🎨 完全版コード（超詳細コメント付き）

<dashboard version="1.1">
  <!-- ========================================== -->
  <!-- ダッシュボードのタイトル -->
  <!-- 画面上部に表示される -->
  <!-- ========================================== -->
  <label>【詳細解説】ネットワーク構成図の作り方</label>
  
  <!-- ========================================== -->
  <!-- row：横一列のエリア -->
  <!-- 複数のパネルを横に並べることができる -->
  <!-- ========================================== -->
  <row>
    
    <!-- ========================================== -->
    <!-- panel：個別の表示エリア -->
    <!-- グラフや表、HTMLを入れる箱 -->
    <!-- ========================================== -->
    <panel>
      
      <!-- ========================================== -->
      <!-- html：HTMLとCSSを書くエリア -->
      <!-- ここにカスタムデザインを書く -->
      <!-- ========================================== -->
      <html>
        
        <!-- ========================================== -->
        <!-- style：CSS（スタイル）定義エリア -->
        <!-- 見た目を決めるルールを書く -->
        <!-- ========================================== -->
        <style>
          
          /* ========================================== */
          /* .container：親コンテナ */
          /* 全ての要素を配置する基準となる箱 */
          /* ========================================== */
          .container {
            /* position: relative で基準点にする */
            /* これがないと absolute が画面全体基準になる */
            position: relative;
            
            /* コンテナの横幅：1000ピクセル */
            width: 1000px;
            
            /* コンテナの縦幅：700ピクセル */
            height: 700px;
            
            /* 背景色：薄いグレー（#fafafa） */
            background: #fafafa;
            
            /* 余白：上下左右30ピクセル、左右は自動（中央揃え） */
            margin: 30px auto;
            
            /* 枠線：2ピクセルの実線、色は薄いグレー */
            border: 2px solid #ddd;
          }
          
          /* ========================================== */
          /* .server：サーバーボックス */
          /* データベースサーバーやWebサーバーを表現 */
          /* ========================================== */
          .server {
            /* 絶対位置：親要素（container）を基準に配置 */
            position: absolute;
            
            /* サーバーボックスの横幅：180ピクセル */
            width: 180px;
            
            /* サーバーボックスの縦幅：140ピクセル */
            /* クライアントより大きくして重要性を表現 */
            height: 140px;
            
            /* 背景色：濃い青（#1976D2） */
            /* サーバーは青系で表現することが多い */
            background: #1976D2;
            
            /* 角丸：8ピクセル */
            /* 少し丸みをつけて柔らかい印象に */
            border-radius: 8px;
            
            /* 影：X軸0、Y軸6px、ぼかし15px、色は半透明黒 */
            /* 立体感を出す */
            box-shadow: 0 6px 15px rgba(0,0,0,0.3);
            
            /* 文字色：白 */
            color: white;
            
            /* 文字の太さ：太字 */
            font-weight: bold;
            
            /* Flexboxを使って中身を配置 */
            display: flex;
            
            /* 中身を縦方向に並べる */
            flex-direction: column;
            
            /* 縦方向の中央揃え */
            justify-content: center;
            
            /* 横方向の中央揃え */
            align-items: center;
          }
          
          /* ========================================== */
          /* .switch：ネットワークスイッチ */
          /* ハブやルーターとしても使える */
          /* ========================================== */
          .switch {
            /* 絶対位置で配置 */
            position: absolute;
            
            /* スイッチの横幅：200ピクセル */
            /* 横長にしてスイッチらしく */
            width: 200px;
            
            /* スイッチの縦幅：60ピクセル */
            /* 薄めにする */
            height: 60px;
            
            /* 背景色：緑（#388E3C） */
            /* ネットワーク機器は緑系が多い */
            background: #388E3C;
            
            /* 角丸：6ピクセル */
            border-radius: 6px;
            
            /* 影をつける */
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            
            /* 文字色：白 */
            color: white;
            
            /* 文字の太さ：太字 */
            font-weight: bold;
            
            /* Flexboxで中央揃え */
            display: flex;
            justify-content: center;
            align-items: center;
          }
          
          /* ========================================== */
          /* .client：クライアントPC */
          /* エンドユーザーのパソコンを表現 */
          /* ========================================== */
          .client {
            /* 絶対位置で配置 */
            position: absolute;
            
            /* PCの横幅：100ピクセル */
            /* サーバーより小さく */
            width: 100px;
            
            /* PCの縦幅：100ピクセル */
            /* 正方形に近い形 */
            height: 100px;
            
            /* 背景色：グレー（#757575） */
            /* クライアントは灰色で表現 */
            background: #757575;
            
            /* 角丸：50% = 円形 */
            /* PCを円形で表現 */
            border-radius: 50%;
            
            /* 影をつける */
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            
            /* 文字色：白 */
            color: white;
            
            /* 文字の太さ：太字 */
            font-weight: bold;
            
            /* 文字サイズ：12ピクセル */
            /* 小さめにする */
            font-size: 12px;
            
            /* Flexboxで配置 */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }
          
          /* ========================================== */
          /* .line：接続線 */
          /* サーバー・スイッチ・PCを繋ぐ線 */
          /* ========================================== */
          .line {
            /* 絶対位置で配置 */
            position: absolute;
            
            /* 線の色：濃いグレー（#999） */
            background: #999;
          }
          
          /* ========================================== */
          /* .line-h：横線 */
          /* 水平方向の接続線 */
          /* ========================================== */
          .line-h {
            /* 横線の高さ（太さ）：3ピクセル */
            height: 3px;
            /* 幅は個別に指定 */
          }
          
          /* ========================================== */
          /* .line-v：縦線 */
          /* 垂直方向の接続線 */
          /* ========================================== */
          .line-v {
            /* 縦線の幅（太さ）：3ピクセル */
            width: 3px;
            /* 高さは個別に指定 */
          }
          
          /* ========================================== */
          /* 各要素の位置指定 */
          /* ここで実際の配置場所を決める */
          /* ========================================== */
          
          /* ========================================== */
          /* サーバー1の位置（左上） */
          /* ========================================== */
          .server1 {
            /* 上から50ピクセル */
            top: 50px;
            
            /* 左から80ピクセル */
            left: 80px;
          }
          
          /* ========================================== */
          /* サーバー2の位置（右上） */
          /* ========================================== */
          .server2 {
            /* 上から50ピクセル（サーバー1と同じ高さ） */
            top: 50px;
            
            /* 右から80ピクセル */
            /* leftではなくrightを使う */
            right: 80px;
          }
          
          /* ========================================== */
          /* スイッチの位置（中央） */
          /* ========================================== */
          .switch1 {
            /* 上から280ピクセル */
            top: 280px;
            
            /* 左から400ピクセル */
            /* 中央に配置するための計算： */
            /* (1000 - 200) / 2 = 400 */
            left: 400px;
          }
          
          /* ========================================== */
          /* クライアント1の位置（左下） */
          /* ========================================== */
          .client1 {
            /* 下から80ピクセル */
            /* bottomを使うと下基準で配置できる */
            bottom: 80px;
            
            /* 左から100ピクセル */
            left: 100px;
          }
          
          /* ========================================== */
          /* クライアント2の位置（中央下） */
          /* ========================================== */
          .client2 {
            /* 下から80ピクセル（client1と同じ高さ） */
            bottom: 80px;
            
            /* 左から350ピクセル */
            left: 350px;
          }
          
          /* ========================================== */
          /* クライアント3の位置（右下） */
          /* ========================================== */
          .client3 {
            /* 下から80ピクセル */
            bottom: 80px;
            
            /* 右から100ピクセル */
            right: 100px;
          }
          
          /* ========================================== */
          /* 接続線の配置 */
          /* 線の位置とサイズを計算で決める */
          /* ========================================== */
          
          /* ========================================== */
          /* line1：サーバー1 → スイッチ（縦線） */
          /* ========================================== */
          .line1 {
            /* 線の開始位置（上端） */
            /* サーバー1の下端：50 + 140 = 190 */
            /* 少し余白：190 + 10 = 200 */
            top: 200px;
            
            /* 線の横位置 */
            /* サーバー1の中央：80 + (180/2) = 170 */
            /* 線の太さ分調整：170 - (3/2) = 168 */
            left: 168px;
            
            /* 線の長さ（高さ） */
            /* スイッチまでの距離：280 - 200 = 80 */
            height: 80px;
          }
          
          /* ========================================== */
          /* line2：サーバー2 → スイッチ（縦線） */
          /* ========================================== */
          .line2 {
            /* 線の開始位置 */
            /* サーバー1と同じ計算 */
            top: 200px;
            
            /* 右基準で配置 */
            /* サーバー2の中央：80 + (180/2) = 170 */
            /* 線の太さ分調整：170 - (3/2) = 168 */
            right: 168px;
            
            /* 線の長さ */
            height: 80px;
          }
          
          /* ========================================== */
          /* line3：サーバー1 → スイッチ（横線・左側） */
          /* ========================================== */
          .line3 {
            /* 線の縦位置 */
            /* スイッチの中央：280 + (60/2) = 310 */
            /* 線の太さ分調整：310 - (3/2) = 308 */
            top: 308px;
            
            /* 線の開始位置（左端） */
            /* サーバー1の右端：80 + 180 = 260 */
            /* 少し余白：260 + 8 = 268 */
            left: 268px;
            
            /* 線の長さ（幅） */
            /* スイッチまでの距離：400 - 268 = 132 */
            width: 132px;
          }
          
          /* ========================================== */
          /* line4：サーバー2 → スイッチ（横線・右側） */
          /* ========================================== */
          .line4 {
            /* 線の縦位置（スイッチの中央） */
            top: 308px;
            
            /* 線の開始位置（左端） */
            /* スイッチの右端：400 + 200 = 600 */
            left: 600px;
            
            /* 線の長さ */
            /* サーバー2の左端まで */
            /* 計算：1000 - 80 - 180 - 600 = 140 */
            /* 余白調整：140 + 12 = 152 */
            width: 152px;
          }
          
          /* ========================================== */
          /* line5：スイッチ → クライアント群（縦線） */
          /* ========================================== */
          .line5 {
            /* 線の開始位置 */
            /* スイッチの下端：280 + 60 = 340 */
            /* 少し余白：340 + 10 = 350 */
            top: 350px;
            
            /* 線の横位置 */
            /* スイッチの中央：400 + (200/2) = 500 */
            /* 線の太さ分調整：500 - (3/2) = 498 */
            left: 498px;
            
            /* 線の長さ */
            /* クライアント群までの距離：100ピクセル */
            height: 100px;
          }
          
          /* ========================================== */
          /* line6：スイッチ → クライアント1（横線） */
          /* ========================================== */
          .line6 {
            /* 線の縦位置 */
            /* line5の下端：350 + 100 = 450 */
            top: 450px;
            
            /* 線の開始位置 */
            /* クライアント1の中央：100 + (100/2) = 150 */
            left: 150px;
            
            /* 線の長さ */
            /* line5の位置まで：498 - 150 = 348 */
            width: 348px;
          }
          
          /* ========================================== */
          /* line7：スイッチ → クライアント2（横線） */
          /* ========================================== */
          .line7 {
            /* 線の縦位置 */
            top: 450px;
            
            /* 線の開始位置 */
            /* クライアント2の中央：350 + (100/2) = 400 */
            left: 400px;
            
            /* 線の長さ */
            /* line5まで：498 - 400 = 98 */
            width: 98px;
          }
          
          /* ========================================== */
          /* line8：スイッチ → クライアント3（横線） */
          /* ========================================== */
          .line8 {
            /* 線の縦位置 */
            top: 450px;
            
            /* 線の開始位置 */
            /* line5の右側：500 */
            left: 500px;
            
            /* 線の長さ */
            /* クライアント3の中央まで */
            /* 計算：(1000 - 100 - 100/2) - 500 = 300 */
            width: 300px;
          }
          
          /* ========================================== */
          /* テキストスタイル */
          /* ========================================== */
          
          /* サブラベル（IPアドレスなど） */
          .sublabel {
            /* 文字サイズ：11ピクセル */
            font-size: 11px;
            
            /* 上に余白：4ピクセル */
            margin-top: 4px;
            
            /* 透明度：90%（少し薄く） */
            opacity: 0.9;
          }
          
        </style>
        
        <!-- ========================================== -->
        <!-- HTML構造 -->
        <!-- 実際に表示される要素 -->
        <!-- ========================================== -->
        <div class="container">
          
          <!-- ========================================== -->
          <!-- サーバー部分 -->
          <!-- ========================================== -->
          
          <!-- サーバー1：Webサーバー -->
          <!-- classを2つ指定：server（共通スタイル）+ server1（位置） -->
          <div class="server server1">
            <!-- メインテキスト -->
            <div>サーバー1</div>
            <!-- サブテキスト（役割） -->
            <div class="sublabel">Web Server</div>
          </div>
          
          <!-- サーバー2：DBサーバー -->
          <div class="server server2">
            <div>サーバー2</div>
            <div class="sublabel">DB Server</div>
          </div>
          
          <!-- ========================================== -->
          <!-- スイッチ部分 -->
          <!-- ========================================== -->
          
          <!-- コアスイッチ -->
          <div class="switch switch1">
            Core Switch
          </div>
          
          <!-- ========================================== -->
          <!-- クライアントPC部分 -->
          <!-- ========================================== -->
          
          <!-- PC-1 -->
          <div class="client client1">
            <!-- PC名 -->
            <div>PC-1</div>
            <!-- IPアドレス -->
            <div class="sublabel">192.168.1.10</div>
          </div>
          
          <!-- PC-2 -->
          <div class="client client2">
            <div>PC-2</div>
            <div class="sublabel">192.168.1.11</div>
          </div>
          
          <!-- PC-3 -->
          <div class="client client3">
            <div>PC-3</div>
            <div class="sublabel">192.168.1.12</div>
          </div>
          
          <!-- ========================================== -->
          <!-- 接続線部分 -->
          <!-- 全8本の線を配置 -->
          <!-- ========================================== -->
          
          <!-- サーバー1からスイッチへの縦線 -->
          <div class="line line-v line1"></div>
          
          <!-- サーバー2からスイッチへの縦線 -->
          <div class="line line-v line2"></div>
          
          <!-- サーバー1からスイッチへの横線 -->
          <div class="line line-h line3"></div>
          
          <!-- サーバー2からスイッチへの横線 -->
          <div class="line line-h line4"></div>
          
          <!-- スイッチからクライアント群への縦線 -->
          <div class="line line-v line5"></div>
          
          <!-- スイッチからクライアント1への横線 -->
          <div class="line line-h line6"></div>
          
          <!-- スイッチからクライアント2への横線 -->
          <div class="line line-h line7"></div>
          
          <!-- スイッチからクライアント3への横線 -->
          <div class="line line-h line8"></div>
          
        </div>
        
      </html>
    </panel>
  </row>
</dashboard>

📊 線の位置計算方法（詳細解説）

計算式テンプレート

縦線の横位置を計算

left = ボックスのleft + (ボックスの幅 ÷ 2) - (線の太さ ÷ 2)

例：サーバー1の中央

サーバー1：left = 80px, width = 180px
線の太さ：3px

計算：
left = 80 + (180 ÷ 2) - (3 ÷ 2)
     = 80 + 90 - 1.5
     = 168px

横線の縦位置を計算

top = ボックスのtop + (ボックスの高さ ÷ 2) - (線の太さ ÷ 2)

例：スイッチの中央

スイッチ：top = 280px, height = 60px
線の太さ：3px

計算：
top = 280 + (60 ÷ 2) - (3 ÷ 2)
    = 280 + 30 - 1.5
    = 308px

線の長さを計算

横線の場合：

width = 終点のleft - 始点のleft

例：line3（サーバー1 → スイッチ）

始点：サーバー1の右端 = 80 + 180 = 260
終点：スイッチの左端 = 400

計算：
width = 400 - 260 - 余白
      = 140 - 8（余白）
      = 132px

🎓 初心者向け：段階的な作り方

ステップ1：まず1つのボックスを作る

<div class="server server1">
  サーバー1
</div>

.server1 {
  top: 50px;
  left: 80px;
}

ステップ2：2つ目のボックスを追加

<div class="server server2">
  サーバー2
</div>

.server2 {
  top: 50px;
  right: 80px;  /* 右基準で配置 */
}

ステップ3：線を1本引く

<div class="line line-v line1"></div>

.line1 {
  top: 200px;    /* サーバー1の下 */
  left: 168px;   /* サーバー1の中央 */
  height: 80px;  /* 線の長さ */
}

ステップ4：繰り返す

同じ手順で、ボックスと線を追加していく

💡 よくある間違いと解決法

間違い1：線がズレる

原因：

/* 中央位置の計算ミス */
.line1 {
  left: 170px;  /* ← 168pxが正解 */
}

解決：

left = ボックスのleft + (幅 ÷ 2) - (線の太さ ÷ 2)
     = 80 + 90 - 1.5
     = 168px  ✓

間違い2：親要素に `position: relative` がない

原因：

.container {
  /* position: relative; が抜けている */
  width: 1000px;
}

結果： 子要素が画面全体基準で配置される

解決：

.container {
  position: relative;  /* ← これを追加 */
  width: 1000px;
}

間違い3：線の太さを忘れる

間違った計算：

left = 80 + 90 = 170px  ← 線の太さ分がズレる

正しい計算：

left = 80 + 90 - 1.5 = 168px  ✓

📝 まとめ

複雑なネットワーク図を作る3ステップ

Step	やること	ポイント
1	ボックスを配置	`position: absolute` で自由配置
2	線の位置を計算	中央位置 = left + (幅÷2) - (太さ÷2)
3	線を描画	`.line-h`（横線）、`.line-v`（縦線）

このコードをコピペして、自分の構成図を作ってみよう！ 🚀