# 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 {
position: relative;
width: 1000px;
height: 700px;
background: #fafafa ;
margin: 30px auto;
border: 2px solid #ddd ;
}
.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 {
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 {
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 {
position: absolute;
background: #999 ;
}
.line-h {
height: 3px;
}
.line-v {
width: 3px;
}
.server1 {
top: 50px;
left: 80px;
}
.server2 {
top: 50px;
right: 80px;
}
.switch1 {
top: 280px;
left: 400px;
}
.client1 {
bottom: 80px;
left: 100px;
}
.client2 {
bottom: 80px;
left: 350px;
}
.client3 {
bottom: 80px;
right: 100px;
}
.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;
}
.sublabel {
font-size: 11px;
margin-top: 4px;
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;
left: 168px;
height: 80px;
}
```
---
### ステップ4:繰り返す
同じ手順で、ボックスと線を追加していく
---
## 💡 よくある間違いと解決法
### 間違い1:線がズレる
**原因:**
```css
.line1 {
left: 170px;
}
```
**解決:**
```
left = ボックスのleft + (幅 ÷ 2) - (線の太さ ÷ 2)
= 80 + 90 - 1.5
= 168px ✓
```
---
### 間違い2:親要素に `position: relative` がない
**原因:**
```css
.container {
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;
top: 50px;
left: 50px;
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;
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: 60px;
height: 60px;
```
---
### 📏 横長バー
```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 {
top: 50px;
left: 50px;
}
```
---
### パターン2:右上基準
```css
.pos-top-right {
top: 50px;
right: 50px;
}
```
---
### パターン3:左下基準
```css
.pos-bottom-left {
bottom: 50px;
left: 50px;
}
```
---
### パターン4:右下基準
```css
.pos-bottom-right {
bottom: 50px;
right: 50px;
}
```
---
### パターン5:中央配置
```css
.pos-center {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
```
---
### パターン6:上部中央
```css
.pos-top-center {
top: 50px;
left: 50%;
transform: translateX(-50%);
}
```
---
### パターン7:下部中央
```css
.pos-bottom-center {
bottom: 50px;
left: 50%;
transform: translateX(-50%);
}
```
---
### パターン8:左側中央
```css
.pos-left-center {
left: 50px;
top: 50%;
transform: translateY(-50%);
}
```
---
### パターン9:右側中央
```css
.pos-right-center {
right: 50px;
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;
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;
}
.my-box {
top: 50px;
left: 150px;
}
.my-box {
top: 100px;
left: 50px;
}
```
---
### 編集パターン2:サイズを変える
```css
.my-box {
width: 150px;
height: 100px;
}
.my-box {
width: 300px;
height: 200px;
}
.my-box {
width: 75px;
height: 50px;
}
```
---
### 編集パターン3:色を変える
```css
background: #4CAF50 ; /* 緑 */
background: #E53935 ; /* 赤 */
background: #FFA726 ; /* オレンジ */
background: #42A5F5 ; /* 青 */
background: #9C27B0 ; /* 紫 */
color: white;
color: #333 ; /* 濃いグレー */
color: black;
```
**よく使う色コード:**
```css
#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%;
```
---
### 編集パターン5:影を調整
```css
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;
}
.my-box {
bottom: 50px;
left: 50px;
width: 150px;
height: 100px;
}
.my-box {
bottom: 50px;
right: 50px;
width: 150px;
height: 100px;
}
```
---
### 例題2:線を長くする
```css
.my-line {
top: 100px;
left: 50px;
width: 100px;
height: 4px;
background: #999 ;
}
.my-line {
top: 100px;
left: 50px;
width: 200px;
height: 4px;
background: #999 ;
}
```
---
### 例題3:円を大きくする
```css
.my-circle {
width: 80px;
height: 80px;
border-radius: 50%;
}
.my-circle {
width: 120
height: 120px;
}
``
---
## 📝 チェックリスト
### 位置がおかしい時
```
□ position: absolute がついているか?
□ 親要素に position: relative があるか?
□ top/bottom と left/right が混在していないか?
□ 数値が大きすぎて画面外に出ていないか?
```
### サイズがおかしい時
```
□ width と height を両方指定したか?
□ 円形の場合、width と height が同じか?
□ 単位(px)を忘れていないか?
```
### 色が変わらない時
```
□ background(背景色)を指定したか?
□ カラーコードは正しいか?(# を忘れていないか)
□ 透明(transparent)になっていないか?
```
---
## 💡 よくある質問
### Q1:ボックスが表示されない
**A:** チェックポイント
```css
width: 150px;
height: 100px;
background: #42A5F5 ;
```
---
### Q2:線が見えない
**A:** チェックポイント
```css
width: 200px;
height: 4px;
background: #999 ;
width: 4px;
height: 200px;
```
---
### Q3:中央揃えがうまくいかない
**A:** transformを忘れていないか確認
```css
left: 50%;
top: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
```
---
**このリファレンスを使って、自由にUIを作ってみよう!** 🎨