diff --git a/style.css b/style.css index f6a2814..8895ea0 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,5 @@ /* =============================== - 全体デザイン + 全体デザイン(変更なし) ================================= */ body { @@ -11,7 +11,7 @@ } /* =============================== - index.html のフォームデザイン + index.html ================================= */ .container { @@ -68,7 +68,7 @@ } /* =============================== - map4.html レイアウト + map4.html ================================= */ #mapContainer { @@ -76,7 +76,6 @@ height: calc(100vh - 60px); } -/* メンバー一覧 */ #sidebar { width: 230px; background: white; @@ -114,15 +113,14 @@ background: #e6edff; } -/* オンライン / オフライン */ .online { border-left: 4px solid #4a9a3d; } + .offline { border-left: 4px solid #a4a4a4; } -/* メンバーアイコン(丸) */ .member-icon { width: 12px; height: 12px; @@ -130,30 +128,28 @@ border-radius: 50%; } -/* =============================== - 地図 -================================= */ #map { flex: 1; } /* =============================== - ピンデザイン(DivIcon) + ピンのラベル ================================= */ -/* ピン名ラベル */ +.custom-pin { + text-align: center; +} + .pin-label { - background: rgba(0, 0, 0, 0.7); + background: rgba(0, 0, 0, 0.75); color: white; font-size: 12px; padding: 2px 6px; border-radius: 6px; margin-bottom: 2px; - text-align: center; width: max-content; } -/* ピン画像 */ .pin-image { width: 35px; } @@ -161,6 +157,7 @@ /* =============================== 退出ボタン ================================= */ + #exitBtn { width: 100%; padding: 10px; @@ -178,16 +175,9 @@ } /* =============================== - アニメ削除 → 残骸を無効化 + スマホ対応 ================================= */ -.pulse-marker { - animation: none !important; -} - -/* =============================== - スマホ向けレスポンシブ -================================= */ @media (max-width: 768px) { #mapContainer { flex-direction: column; @@ -206,8 +196,9 @@ } /* =============================== - フェードイン演出(フォーム用) + フェードイン ================================= */ + @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); }