メインコンテンツへスキップ

Splunk Classic Dashboard:オリジナルチャートやUI部品の作成方法いろいろ

    # Splunk Classic Dashboard:ネットワーク構成図の作り方【完全解説・コメント付き】
    
    ## 🎯 このガイドで学べること
    
    1. **複雑なネットワーク構成図の作り方**
    2. **サーバー・スイッチ・クライアントの配置方法**
    3. **接続線の引き方と計算方法**
    4. **コード1行ずつの詳細解説**
    
    ---
    
    ## 📐 設計図:何を作るか
    
    ```
    サーバー1         サーバー2
     (青)              (青)
      │                │
      └────┐      ┌────┘
           │      │
        ┌──────────┐
        │ スイッチ │
        │  (緑)   │
        └──────────┘
           │  │  │
       ┌───┘  │  └───┐
       │      │      │
      PC1    PC2    PC3
     (灰色) (灰色) (灰色)
    ```
    
    ---
    
    ## 🎨 完全版コード(超詳細コメント付き)
    
    ```xml
    <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つのボックスを作る
    
    ```xml
    <div class="server server1">
      サーバー1
    </div>
    ```
    
    ```css
    .server1 {
      top: 50px;
      left: 80px;
    }
    ```
    
    ---
    
    ### ステップ2:2つ目のボックスを追加
    
    ```xml
    <div class="server server2">
      サーバー2
    </div>
    ```
    
    ```css
    .server2 {
      top: 50px;
      right: 80px;  /* 右基準で配置 */
    }
    ```
    
    ---
    
    ### ステップ3:線を1本引く
    
    ```xml
    <div class="line line-v line1"></div>
    ```
    
    ```css
    .line1 {
      top: 200px;    /* サーバー1の下 */
      left: 168px;   /* サーバー1の中央 */
      height: 80px;  /* 線の長さ */
    }
    ```
    
    ---
    
    ### ステップ4:繰り返す
    
    同じ手順で、ボックスと線を追加していく
    
    ---
    
    ## 💡 よくある間違いと解決法
    
    ### 間違い1:線がズレる
    
    **原因:**
    ```css
    /* 中央位置の計算ミス */
    .line1 {
      left: 170px;  /* ← 168pxが正解 */
    }
    ```
    
    **解決:**
    ```
    left = ボックスのleft + (幅 ÷ 2) - (線の太さ ÷ 2)
         = 80 + 90 - 1.5
         = 168px  ✓
    ```
    
    ---
    
    ### 間違い2:親要素に `position: relative` がない
    
    **原因:**
    ```css
    .container {
      /* position: relative; が抜けている */
      width: 1000px;
    }
    ```
    
    **結果:** 子要素が画面全体基準で配置される
    
    **解決:**
    ```css
    .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`(縦線) |
    
    ---
    
    **このコードをコピペして、自分の構成図を作ってみよう!** 🚀
    # Splunk Dashboard UI部品 逆引きリファレンス【コピペ用パーツ集】
    
    ## 📚 目次
    
    1. [基本図形パーツ](#基本図形パーツ)
    2. [サイズバリエーション](#サイズバリエーション)
    3. [位置指定パターン](#位置指定パターン)
    4. [線・矢印パーツ](#線矢印パーツ)
    5. [複合パーツ](#複合パーツ)
    6. [編集方法ガイド](#編集方法ガイド)
    
    ---
    
    ## 🎨 基本図形パーツ {#基本図形パーツ}
    
    ### 📦 四角ボックス(基本)
    
    ```xml
    <!-- ========================================== -->
    <!-- 使い方:基本的な四角ボックス -->
    <!-- 編集:top, left で位置、width, height でサイズ変更 -->
    <!-- ========================================== -->
    <style>
      .box-basic {
        position: absolute;
        /* ★編集ポイント1:位置 */
        top: 50px;        /* 上からの距離 */
        left: 50px;       /* 左からの距離 */
        
        /* ★編集ポイント2:サイズ */
        width: 150px;     /* 横幅 */
        height: 100px;    /* 縦幅 */
        
        /* 見た目(変更可) */
        background: #42A5F5 ;    /* 背景色 */
        border-radius: 12px;    /* 角の丸み */
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        color: white;
        font-weight: bold;
        
        /* 文字を中央に */
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
    
    <div class="box-basic">
      テキスト  <!-- ★編集ポイント3:表示文字 -->
    </div>
    ```
    
    **編集例:**
    ```css
    /* 大きくしたい場合 */
    width: 250px;
    height: 150px;
    
    /* 位置を右に移動 */
    left: 300px;
    
    /* 色を赤に変更 */
    background: #E53935 ;
    ```
    
    ---
    
    ### ⭕ 円形ボックス
    
    ```xml
    <!-- ========================================== -->
    <!-- 使い方:円形のボックス -->
    <!-- 編集:width と height を同じ値にすること! -->
    <!-- ========================================== -->
    <style>
      .box-circle {
        position: absolute;
        /* 位置 */
        top: 50px;
        left: 250px;
        
        /* ★重要:幅と高さを同じにする */
        width: 100px;
        height: 100px;
        
        /* ★必須:50%で円形になる */
        border-radius: 50%;
        
        background: #4CAF50 ;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        color: white;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
    
    <div class="box-circle">
      円形
    </div>
    ```
    
    **編集例:**
    ```css
    /* 大きい円にしたい */
    width: 150px;
    height: 150px;  /* widthと同じ値 */
    
    /* 小さい円にしたい */
    width: 60px;
    height: 60px;   /* widthと同じ値 */
    ```
    
    ---
    
    ### 📏 横長バー
    
    ```xml
    <!-- ========================================== -->
    <!-- 使い方:横長のバー(ヘッダーやタイトル用) -->
    <!-- 編集:width を広く、height を狭く -->
    <!-- ========================================== -->
    <style>
      .box-bar-h {
        position: absolute;
        top: 50px;
        left: 50px;
        
        /* ★横長にする */
        width: 400px;     /* 広い */
        height: 60px;     /* 狭い */
        
        background: #1976D2 ;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        color: white;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
    
    <div class="box-bar-h">
      横長バー
    </div>
    ```
    
    ---
    
    ### 📐 縦長バー
    
    ```xml
    <!-- ========================================== -->
    <!-- 使い方:縦長のバー(サイドバーやメニュー用) -->
    <!-- 編集:width を狭く、height を広く -->
    <!-- ========================================== -->
    <style>
      .box-bar-v {
        position: absolute;
        top: 50px;
        left: 50px;
        
        /* ★縦長にする */
        width: 80px;      /* 狭い */
        height: 300px;    /* 広い */
        
        background: #388E3C ;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        color: white;
        font-weight: bold;
        font-size: 14px;
        
        /* 縦書き風にする場合 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    </style>
    
    <div class="box-bar-v">
      <div>縦</div>
      <div>長</div>
      <div>バー</div>
    </div>
    ```
    
    ---
    
    ## 📏 サイズバリエーション {#サイズバリエーション}
    
    ### サイズ早見表
    
    ```xml
    <!-- ========================================== -->
    <!-- サイズパターン集 -->
    <!-- コピーして使いたいサイズを選ぶ -->
    <!-- ========================================== -->
    <style>
      /* 極小 */
      .size-xs {
        width: 60px;
        height: 40px;
        font-size: 10px;
      }
      
      /* 小 */
      .size-s {
        width: 100px;
        height: 70px;
        font-size: 12px;
      }
      
      /* 中(デフォルト) */
      .size-m {
        width: 150px;
        height: 100px;
        font-size: 14px;
      }
      
      /* 大 */
      .size-l {
        width: 200px;
        height: 140px;
        font-size: 16px;
      }
      
      /* 特大 */
      .size-xl {
        width: 280px;
        height: 200px;
        font-size: 20px;
      }
    </style>
    ```
    
    **使い方:**
    ```html
    <!-- 小さいボックス -->
    <div class="box size-s">小</div>
    
    <!-- 大きいボックス -->
    <div class="box size-l">大</div>
    ```
    
    ---
    
    ## 📍 位置指定パターン {#位置指定パターン}
    
    ### パターン1:左上基準
    
    ```css
    /* ========================================== */
    /* 左上からの距離で指定 */
    /* 最も基本的な方法 */
    /* ========================================== */
    .pos-top-left {
      /* 上から50px */
      top: 50px;
      
      /* 左から50px */
      left: 50px;
    }
    ```
    
    ---
    
    ### パターン2:右上基準
    
    ```css
    /* ========================================== */
    /* 右上からの距離で指定 */
    /* 右寄せのレイアウトに便利 */
    /* ========================================== */
    .pos-top-right {
      /* 上から50px */
      top: 50px;
      
      /* ★右から50px(leftではなくright) */
      right: 50px;
    }
    ```
    
    ---
    
    ### パターン3:左下基準
    
    ```css
    /* ========================================== */
    /* 左下からの距離で指定 */
    /* フッターなどに便利 */
    /* ========================================== */
    .pos-bottom-left {
      /* ★下から50px(topではなくbottom) */
      bottom: 50px;
      
      /* 左から50px */
      left: 50px;
    }
    ```
    
    ---
    
    ### パターン4:右下基準
    
    ```css
    /* ========================================== */
    /* 右下からの距離で指定 */
    /* ========================================== */
    .pos-bottom-right {
      /* 下から50px */
      bottom: 50px;
      
      /* 右から50px */
      right: 50px;
    }
    ```
    
    ---
    
    ### パターン5:中央配置
    
    ```css
    /* ========================================== */
    /* 完全中央に配置 */
    /* ★必ず transform とセットで使う */
    /* ========================================== */
    .pos-center {
      /* 左から50%の位置 */
      left: 50%;
      
      /* 上から50%の位置 */
      top: 50%;
      
      /* ★重要:自分のサイズの半分だけ戻す */
      transform: translate(-50%, -50%);
    }
    ```
    
    ---
    
    ### パターン6:上部中央
    
    ```css
    /* ========================================== */
    /* 上部の中央(ヘッダーなど) */
    /* ========================================== */
    .pos-top-center {
      /* 上から50px */
      top: 50px;
      
      /* 左から50% */
      left: 50%;
      
      /* ★横だけ中央に */
      transform: translateX(-50%);
    }
    ```
    
    ---
    
    ### パターン7:下部中央
    
    ```css
    /* ========================================== */
    /* 下部の中央(フッターなど) */
    /* ========================================== */
    .pos-bottom-center {
      /* 下から50px */
      bottom: 50px;
      
      /* 左から50% */
      left: 50%;
      
      /* 横だけ中央に */
      transform: translateX(-50%);
    }
    ```
    
    ---
    
    ### パターン8:左側中央
    
    ```css
    /* ========================================== */
    /* 左側の中央(サイドバーなど) */
    /* ========================================== */
    .pos-left-center {
      /* 左から50px */
      left: 50px;
      
      /* 上から50% */
      top: 50%;
      
      /* ★縦だけ中央に */
      transform: translateY(-50%);
    }
    ```
    
    ---
    
    ### パターン9:右側中央
    
    ```css
    /* ========================================== */
    /* 右側の中央 */
    /* ========================================== */
    .pos-right-center {
      /* 右から50px */
      right: 50px;
      
      /* 上から50% */
      top: 50%;
      
      /* 縦だけ中央に */
      transform: translateY(-50%);
    }
    ```
    
    ---
    
    ## 🔗 線・矢印パーツ {#線矢印パーツ}
    
    ### 横線(水平線)
    
    ```xml
    <!-- ========================================== -->
    <!-- 使い方:横向きの線 -->
    <!-- 編集:width で長さ、height で太さ -->
    <!-- ========================================== -->
    <style>
      .line-h {
        position: absolute;
        /* 位置 */
        top: 100px;       /* ★縦位置 */
        left: 50px;       /* ★開始位置 */
        
        /* サイズ */
        width: 200px;     /* ★長さ */
        height: 4px;      /* ★太さ */
        
        /* 色 */
        background: #999 ;
      }
    </style>
    
    <div class="line-h"></div>
    ```
    
    **編集例:**
    ```css
    /* 長くしたい */
    width: 400px;
    
    /* 太くしたい */
    height: 8px;
    
    /* 色を変える */
    background: #E53935 ;  /* 赤 */
    ```
    
    ---
    
    ### 縦線(垂直線)
    
    ```xml
    <!-- ========================================== -->
    <!-- 使い方:縦向きの線 -->
    <!-- 編集:height で長さ、width で太さ */
    <!-- ========================================== -->
    <style>
      .line-v {
        position: absolute;
        /* 位置 */
        top: 50px;        /* ★開始位置 */
        left: 100px;      /* ★横位置 */
        
        /* サイズ */
        width: 4px;       /* ★太さ */
        height: 200px;    /* ★長さ */
        
        /* 色 */
        background: #999 ;
      }
    </style>
    
    <div class="line-v"></div>
    ```
    
    ---
    
    ### 点線
    
    ```xml
    <!-- ========================================== -->
    <!-- 使い方:点線(破線) -->
    <!-- 編集:border-style で線の種類を変更 */
    <!-- ========================================== -->
    <style>
      .line-dashed {
        position: absolute;
        top: 100px;
        left: 50px;
        width: 200px;
        height: 0;  /* ★高さは0 */
        
        /* ★点線スタイル */
        border-top: 3px dashed #999 ;
      }
    </style>
    
    <div class="line-dashed"></div>
    ```
    
    **線の種類:**
    ```css
    border-top: 3px solid #999 ;   /* 実線 */
    border-top: 3px dashed #999 ;  /* 破線 */
    border-top: 3px dotted #999 ;  /* 点線 */
    border-top: 3px double #999 ;  /* 二重線 */
    ```
    
    ---
    
    ### 右向き矢印
    
    ```xml
    <!-- ========================================== -->
    <!-- 使い方:右向きの矢印 */
    <!-- 編集:border-width で大きさ変更 */
    <!-- ========================================== -->
    <style>
      .arrow-right {
        position: absolute;
        top: 100px;
        left: 250px;
        
        /* 矢印の形(三角形) */
        width: 0;
        height: 0;
        
        /* ★矢印のサイズと向き */
        border-style: solid;
        border-width: 10px 0 10px 15px;  /* 上 右 下 左 */
        border-color: transparent transparent transparent #999 ;
        /* 透明 透明 透明 色付き = 左が色付き = 右向き矢印 */
      }
    </style>
    
    <div class="arrow-right"></div>
    ```
    
    **サイズ変更:**
    ```css
    /* 大きい矢印 */
    border-width: 20px 0 20px 30px;
    
    /* 小さい矢印 */
    border-width: 5px 0 5px 8px;
    ```
    
    ---
    
    ### 下向き矢印
    
    ```xml
    <!-- ========================================== -->
    <!-- 使い方:下向きの矢印 -->
    <!-- ========================================== -->
    <style>
      .arrow-down {
        position: absolute;
        top: 150px;
        left: 100px;
        
        width: 0;
        height: 0;
        border-style: solid;
        
        /* ★下向き矢印 */
        border-width: 15px 10px 0 10px;  /* 上が色付き */
        border-color: #999  transparent transparent transparent;
      }
    </style>
    
    <div class="arrow-down"></div>
    ```
    
    ---
    
    ### 左向き矢印
    
    ```xml
    <style>
      .arrow-left {
        position: absolute;
        top: 100px;
        left: 300px;
        
        width: 0;
        height: 0;
        border-style: solid;
        
        /* ★左向き矢印 */
        border-width: 10px 15px 10px 0;  /* 右が色付き */
        border-color: transparent #999  transparent transparent;
      }
    </style>
    
    <div class="arrow-left"></div>
    ```
    
    ---
    
    ### 上向き矢印
    
    ```xml
    <style>
      .arrow-up {
        position: absolute;
        top: 200px;
        left: 100px;
        
        width: 0;
        height: 0;
        border-style: solid;
        
        /* ★上向き矢印 */
        border-width: 0 10px 15px 10px;  /* 下が色付き */
        border-color: transparent transparent #999  transparent;
      }
    </style>
    
    <div class="arrow-up"></div>
    ```
    
    ---
    
    ## 🎨 複合パーツ {#複合パーツ}
    
    ### サーバーボックス(2行テキスト)
    
    ```xml
    <!-- ========================================== -->
    <!-- 使い方:サーバーやデバイス表示用 -->
    <!-- 編集:タイトルとサブタイトルを変更 -->
    <!-- ========================================== -->
    <style>
      .server-box {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 180px;
        height: 120px;
        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;
      }
      
      .server-title {
        font-size: 16px;
        margin-bottom: 8px;
      }
      
      .server-subtitle {
        font-size: 12px;
        opacity: 0.9;
      }
    </style>
    
    <div class="server-box">
      <div class="server-title">サーバー1</div>
      <div class="server-subtitle">Web Server</div>
    </div>
    ```
    
    ---
    
    ### ステータス付きボックス
    
    ```xml
    <!-- ========================================== -->
    <!-- 使い方:ステータス(OK/NG)を表示 -->
    <!-- 編集:ステータスに応じてクラスを変更 -->
    <!-- ========================================== -->
    <style>
      .status-box {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 150px;
        height: 100px;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        color: white;
        font-weight: bold;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      
      /* ★ステータス別の色 */
      .status-ok {
        background: #4CAF50 ;  /* 緑 */
      }
      
      .status-ng {
        background: #E53935 ;  /* 赤 */
      }
      
      .status-warn {
        background: #FFA726 ;  /* オレンジ */
      }
      
      .status-info {
        background: #42A5F5 ;  /* 青 */
      }
      
      .status-name {
        font-size: 14px;
        margin-bottom: 6px;
      }
      
      .status-state {
        font-size: 20px;
      }
    </style>
    
    <!-- OK の場合 -->
    <div class="status-box status-ok">
      <div class="status-name">国道16号</div>
      <div class="status-state">OK</div>
    </div>
    
    <!-- NG の場合 -->
    <div class="status-box status-ng">
      <div class="status-name">東名高速</div>
      <div class="status-state">NG</div>
    </div>
    ```
    
    ---
    
    ### ラベル付きボックス
    
    ```xml
    <!-- ========================================== -->
    <!-- 使い方:上部にラベル付きのボックス -->
    <!-- ========================================== -->
    <style>
      .labeled-box-container {
        position: absolute;
        top: 50px;
        left: 50px;
      }
      
      .box-label {
        background: #1976D2 ;
        color: white;
        padding: 8px 16px;
        border-radius: 6px 6px 0 0;
        font-weight: bold;
        font-size: 12px;
        text-align: center;
      }
      
      .box-content {
        background: white;
        border: 2px solid #1976D2 ;
        border-top: none;
        border-radius: 0 0 6px 6px;
        padding: 20px;
        min-height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #333 ;
        font-weight: bold;
      }
    </style>
    
    <div class="labeled-box-container">
      <div class="box-label">ラベル</div>
      <div class="box-content">内容</div>
    </div>
    ```
    
    ---
    
    ### 数値表示ボックス(メーター風)
    
    ```xml
    <!-- ========================================== -->
    <!-- 使い方:数値や割合を大きく表示 -->
    <!-- ========================================== -->
    <style>
      .metric-box {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 160px;
        height: 140px;
        background: white;
        border: 3px solid #1976D2 ;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      
      .metric-value {
        font-size: 48px;
        font-weight: bold;
        color: #1976D2 ;
        line-height: 1;
      }
      
      .metric-unit {
        font-size: 16px;
        color: #666 ;
        margin-top: 8px;
      }
      
      .metric-label {
        font-size: 12px;
        color: #999 ;
        margin-top: 12px;
      }
    </style>
    
    <div class="metric-box">
      <div class="metric-value">87</div>
      <div class="metric-unit">%</div>
      <div class="metric-label">稼働率</div>
    </div>
    ```
    
    ---
    
    ## 📖 編集方法ガイド {#編集方法ガイド}
    
    ### 編集パターン1:位置を変える
    
    ```css
    /* ========================================== */
    /* 元のコード */
    /* ========================================== */
    .my-box {
      top: 50px;
      left: 50px;
    }
    
    /* ========================================== */
    /* 右に100px移動したい */
    /* ========================================== */
    .my-box {
      top: 50px;
      left: 150px;  /* 50 + 100 = 150 */
    }
    
    /* ========================================== */
    /* 下に50px移動したい */
    /* ========================================== */
    .my-box {
      top: 100px;   /* 50 + 50 = 100 */
      left: 50px;
    }
    ```
    
    ---
    
    ### 編集パターン2:サイズを変える
    
    ```css
    /* ========================================== */
    /* 元のコード */
    /* ========================================== */
    .my-box {
      width: 150px;
      height: 100px;
    }
    
    /* ========================================== */
    /* 2倍の大きさにしたい */
    /* ========================================== */
    .my-box {
      width: 300px;   /* 150 × 2 */
      height: 200px;  /* 100 × 2 */
    }
    
    /* ========================================== */
    /* 半分の大きさにしたい */
    /* ========================================== */
    .my-box {
      width: 75px;    /* 150 ÷ 2 */
      height: 50px;   /* 100 ÷ 2 */
    }
    ```
    
    ---
    
    ### 編集パターン3:色を変える
    
    ```css
    /* ========================================== */
    /* 色の変え方 */
    /* ========================================== */
    
    /* 背景色を変える */
    background: #4CAF50 ;  /* 緑 */
    background: #E53935 ;  /* 赤 */
    background: #FFA726 ;  /* オレンジ */
    background: #42A5F5 ;  /* 青 */
    background: #9C27B0 ;  /* 紫 */
    
    /* 文字色を変える */
    color: white;   /* 白 */
    color: #333 ;    /* 濃いグレー */
    color: black;   /* 黒 */
    ```
    
    **よく使う色コード:**
    ```css
    /* Material Design Colors */ #F44336   /* 赤 */ #E91E63   /* ピンク */ #9C27B0   /* 紫 */ #673AB7   /* 深紫 */ #3F51B5   /* インディゴ */ #2196F3   /* 青 */ #03A9F4   /* 水色 */ #00BCD4   /* シアン */ #009688   /* ティール */ #4CAF50   /* 緑 */ #8BC34A   /* 黄緑 */ #CDDC39   /* ライム */ #FFEB3B   /* 黄色 */ #FFC107   /* 琥珀 */ #FF9800   /* オレンジ */ #FF5722   /* 深オレンジ */ #795548   /* 茶色 */ #9E9E9E   /* グレー */ #607D8B   /* 青灰色 */
    ```
    
    ---
    
    ### 編集パターン4:角の丸みを変える
    
    ```css
    /* ========================================== */
    /* 角の丸み調整 */
    /* ========================================== */
    
    /* 角ばった四角 */
    border-radius: 0;
    
    /* 少し丸い */
    border-radius: 6px;
    
    /* 普通の丸み */
    border-radius: 12px;
    
    /* とても丸い */
    border-radius: 24px;
    
    /* 完全な円形 */
    border-radius: 50%;  /* width と height が同じ場合のみ */
    ```
    
    ---
    
    ### 編集パターン5:影を調整
    
    ```css
    /* ========================================== */
    /* 影の調整 */
    /* box-shadow: X軸 Y軸 ぼかし 色; */
    /* ========================================== */
    
    /* 影なし */
    box-shadow: none;
    
    /* 薄い影 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    
    /* 普通の影 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    
    /* 濃い影 */
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    
    /* 浮いた感じ */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    ```
    
    ---
    
    ### 編集パターン6:文字サイズを変える
    
    ```css
    /* ========================================== */
    /* 文字サイズの調整 */
    /* ========================================== */
    
    /* とても小さい */
    font-size: 10px;
    
    /* 小さい */
    font-size: 12px;
    
    /* 普通 */
    font-size: 14px;
    
    /* 大きい */
    font-size: 18px;
    
    /* とても大きい */
    font-size: 24px;
    
    /* 見出しサイズ */
    font-size: 32px;
    ```
    
    ---
    
    ## 🎓 実践例:編集してみよう
    
    ### 例題1:ボックスを右下に移動
    
    ```css
    /* ========================================== */
    /* 元のコード */
    /* ========================================== */
    .my-box {
      top: 50px;
      left: 50px;
      width: 150px;
      height: 100px;
    }
    
    /* ========================================== */
    /* 右下に移動(手順) */
    /* ========================================== */
    
    /* ステップ1:top を bottom に変更 */
    .my-box {
      bottom: 50px;  /* ← top から変更 */
      left: 50px;
      width: 150px;
      height: 100px;
    }
    
    /* ステップ2:left を right に変更 */
    .my-box {
      bottom: 50px;
      right: 50px;   /* ← left から変更 */
      width: 150px;
      height: 100px;
    }
    ```
    
    ---
    
    ### 例題2:線を長くする
    
    ```css
    /* ========================================== */
    /* 元のコード(横線) */
    /* ========================================== */
    .my-line {
      top: 100px;
      left: 50px;
      width: 100px;   /* ← これを変える */
      height: 4px;
      background: #999 ;
    }
    
    /* ========================================== */
    /* 2倍に長くする */
    /* ========================================== */
    .my-line {
      top: 100px;
      left: 50px;
      width: 200px;   /* 100 × 2 = 200 */
      height: 4px;
      background: #999 ;
    }
    ```
    
    ---
    
    ### 例題3:円を大きくする
    
    ```css
    /* ========================================== */
    /* 元のコード */
    /* ========================================== */
    .my-circle {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }
    
    /* ========================================== */
    /* 大きくする(重要:widthとheightを同じ値に!) */
    /* ========================================== */
    .my-circle {
      width: 120  /* ← 同じ値 */
      height: 120px;/* ← 同じ値 /
     border-radius: 50%;  / ← これは変えない */
    }
    
    ``
    
    ---
    
    ## 📝 チェックリスト
    
    ### 位置がおかしい時
    
    ```
    □ position: absolute がついているか?
    □ 親要素に position: relative があるか?
    □ top/bottom と left/right が混在していないか?
    □ 数値が大きすぎて画面外に出ていないか?
    ```
    
    ### サイズがおかしい時
    
    ```
    □ width と height を両方指定したか?
    □ 円形の場合、width と height が同じか?
    □ 単位(px)を忘れていないか?
    ```
    
    ### 色が変わらない時
    
    ```
    □ background(背景色)を指定したか?
    □ カラーコードは正しいか?(# を忘れていないか)
    □ 透明(transparent)になっていないか?
    ```
    
    ---
    
    ## 💡 よくある質問
    
    ### Q1:ボックスが表示されない
    
    **A:** チェックポイント
    ```css
    /* 1. サイズが指定されているか? */
    width: 150px;   /* ← ないと見えない */
    height: 100px;  /* ← ないと見えない */
    
    /* 2. 背景色があるか? */
    background: #42A5F5 ;  /* ← ないと透明 */
    
    /* 3. 親要素の中にあるか? */
    /* containerの外に出ていないか確認 */
    ```
    
    ---
    
    ### Q2:線が見えない
    
    **A:** チェックポイント
    ```css
    /* 横線の場合 */
    width: 200px;    /* ← 長さがあるか? */
    height: 4px;     /* ← 太さがあるか? */
    background: #999 ; /* ← 色があるか? */
    
    /* 縦線の場合 */
    width: 4px;      /* ← 太さがあるか? */
    height: 200px;   /* ← 長さがあるか? */
    ```
    
    ---
    
    ### Q3:中央揃えがうまくいかない
    
    **A:** transformを忘れていないか確認
    ```css
    /* ❌ これだけではダメ */
    left: 50%;
    top: 50%;
    
    /* ✅ transformが必要 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);  /* ← これが必須 */
    ```
    
    ---
    
    **このリファレンスを使って、自由にUIを作ってみよう!** 🎨

    あなたへのおすすめ