/* ========================================================== 1. 全要素の基本設定 ========================================================== */ /* * は、ページ内のすべてのHTML要素を対象にするセレクター。 box-sizing: border-box; widthやheightに、paddingとborderの幅を含めて計算する。 例えばwidth: 100pxの場合、 paddingやborderを追加しても、全体の幅は基本的に100pxになる。 要素の大きさを管理しやすくするための設定。 */ * { box-sizing: border-box; } /* ========================================================== 2. CSS変数の定義 ========================================================== */ /* :root は、HTML文書全体で参照できるCSS変数を定義する場所。 --gold などの名前で色を保存しておくと、 複数の場所で同じ色を使用できる。 色を変更したい場合も、ここを変更するだけでよい。 */ :root { /* 金色。枠線や装飾などに使用する。 */ --gold: #d7b66f; /* 明るい金色。タイトルなどを目立たせるために使用する。 */ --gold-light: #f5dfa7; /* 基本となる文字色。 */ --text: #f4e8cd; } /* ========================================================== 3. ページ全体の設定 ========================================================== */ body { /* ブラウザー標準の外側の余白を0にする。 */ margin: 0; /* ページの最低高さを画面の高さ以上にする。 vhはビューポートの高さを表す単位。 100vhは画面の高さの100%を意味する。 */ min-height: 100vh; /* 文字色に、先ほど定義したCSS変数を使用する。 */ color: var(--text); /* 使用するフォントを指定する。 左から順番に、利用可能なフォントが選ばれる。 */ font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif; /* 背景を複数のグラデーションで構成する。 radial-gradient()： 円形または楕円形に色が変化するグラデーション。 linear-gradient()： 指定した方向に色が変化するグラデーション。 背景を重ねることで、アンティーク調の 暗い茶色と金色の雰囲気を作る。 */ background: radial-gradient( ellipse at 50% 18%, rgba(135, 86, 37, .38), transparent 52% ), linear-gradient( 135deg, #1c120c, #49301d 50%, #1a100a ); } /* ========================================================== 4. ヘッダー ========================================================== */ /* ヘッダー全体の配置とデザインを設定する。 */ .header { /* display: flex; 子要素をフレックスボックスで配置する。 横方向に並べたり、余白を調整したりできる。 */ display: flex; /* 子要素を左右に振り分ける。 左側にタイトル、右側にボタンなどを配置する場合に便利。 */ justify-content: space-between; /* 子要素を縦方向の中央にそろえる。 */ align-items: center; /* 子要素同士の間隔を18pxにする。 */ gap: 18px; /* 上下の余白は14px。 左右の余白はclamp()で決定する。 clamp(最小値, 推奨値, 最大値)： 画面幅に応じて値を変化させつつ、 最小値と最大値を超えないようにする。 3vwは画面幅の3%。 画面が狭くても左右の余白は14px未満にならず、 広くても42pxを超えない。 */ padding: 14px clamp(14px, 3vw, 42px); /* 透明度を持つ暗い背景色を設定する。 rgba()の最後の値は透明度で、0が透明、1が不透明。 */ background: rgba(13, 8, 5, .78); /* ヘッダー下部に薄い金色の境界線を付ける。 */ border-bottom: 1px solid rgba(215, 182, 111, .4); } /* ページの見出し。 */ h1 { /* 見出しの標準的な上下余白をなくす。 */ margin: 0; /* タイトルの文字色を明るい金色にする。 */ color: var(--gold-light); /* 画面幅に応じて文字サイズを調整する。 */ font-size: clamp(20px, 2.5vw, 30px); /* 文字同士の間隔を文字サイズの0.14倍にする。 */ letter-spacing: .14em; } /* ヘッダー内の説明文。 */ .brand p { /* 上側に5px、左右と下側に0pxの余白を設定する。 */ margin: 5px 0 0; /* 説明文を薄い金色にする。 */ color: #d7c29d; /* 文字サイズを13pxにする。 */ font-size: 13px; } /* ボタン全体の共通デザイン。 */ button { /* ボタン内部の余白を設定する。 上下11px、左右15px。 */ padding: 11px 15px; /* 金色の境界線を付ける。 */ border: 1px solid #e0c17d; /* 角を5px丸くする。 */ border-radius: 5px; /* 上下方向に色が変化する背景を設定する。 */ background: linear-gradient(#f4dda1, #b68a40); /* ボタンの文字を暗い茶色にする。 */ color: #25180b; /* 文字を太字にする。 */ font-weight: bold; /* マウスポインターを手の形にする。 */ cursor: pointer; /* ボタンの下に影を付け、立体感を出す。 #0007は、黒色に約44%の不透明度を指定する書き方。 */ box-shadow: 0 3px 9px #0007; } /* ========================================================== 5. ステータス表示 ========================================================== */ /* 左右の合計重量、重量差、メッセージをまとめる領域。 */ .status { /* 横幅の最大値を1500pxに制限する。 */ max-width: 1500px; /* 上下に12pxの余白を付け、左右は自動調整する。 左右のautoにより、領域が中央に配置される。 */ margin: 12px auto; /* 左右に14pxの内側余白を付ける。 */ padding: 0 14px; /* CSS Gridを有効にする。 行と列を使って、子要素を表のように配置できる。 */ display: grid; /* 4列のグリッドを作る。 repeat(3, minmax(90px, 145px))： 最初の3列は、それぞれ最低90px、最大145px。 1fr： 残りの幅を4列目に割り当てる。 ここにはゲームのメッセージを配置する。 */ grid-template-columns: repeat(3, minmax(90px, 145px)) 1fr; /* グリッドの列や行の間隔を9pxにする。 */ gap: 9px; /* 各子要素の高さ方向の配置をそろえる。 */ align-items: stretch; } /* .statクラスの要素と、idがmessageの要素に 共通のデザインを設定する。 */ .stat, #message { /* 最低の高さを58pxにする。 */ min-height: 58px; /* 内側の余白を設定する。 上下8px、左右12px。 */ padding: 8px 12px; /* 半透明の金色で境界線を付ける。 */ border: 1px solid rgba(215, 182, 111, .35); /* 角を6px丸くする。 */ border-radius: 6px; /* 暗い背景色を設定する。 */ background: rgba(24, 16, 10, .9); } /* ステータス欄の説明文字。 */ .stat span { /* span要素をブロック要素として表示する。 これにより、前後の文字と改行して表示される。 */ display: block; /* 説明文字を少し暗い金色にする。 */ color: #cdb78d; /* 文字サイズを12pxにする。 */ font-size: 12px; } /* ステータス欄の重量など、強調する文字。 */ .stat strong { /* strong要素をブロック要素として表示する。 */ display: block; /* 説明文字との間に3pxの余白を付ける。 */ margin-top: 3px; /* 強調する文字を明るい金色にする。 */ color: #ffe6aa; /* 文字サイズを21pxにする。 */ font-size: 21px; } /* ゲームの案内や結果を表示する領域。 */ #message { /* Flexboxを使い、メッセージを配置する。 */ display: flex; /* メッセージを縦方向の中央に配置する。 */ align-items: center; /* 他の要素と共通のmarginを個別に調整する。 */ margin: 0; /* 文字サイズを13pxにする。 */ font-size: 13px; /* 行の高さを文字サイズの1.5倍にする。 */ line-height: 1.5; } /* ========================================================== 6. ゲーム画面 ========================================================== */ .game-board { /* position: relative; この要素を、内部のabsolute要素の位置決めの基準にする。 例えば、内部の要素にleft: 50%と指定すると、 原則としてこのゲーム画面を基準に位置が計算される。 */ position: relative; /* isolation: isolate; この要素の中に独立した重なり順の範囲を作る。 内部のz-indexを管理しやすくするために使う。 */ isolation: isolate; /* 領域からはみ出した内容を隠す。 アイテムなどがゲーム画面の外側に表示されるのを防ぐ。 */ overflow: hidden; /* 横幅は1500px以下で、親要素の幅を超えないようにする。 */ width: min(1500px, 100%); /* ゲーム画面の高さを760pxにする。 */ height: 760px; /* ゲーム画面を中央に配置する。 */ margin: 0 auto; /* 収納フレームの幅をゲーム画面の19%に設定する。 子要素からvar(--frame-width)で参照できる。 */ --frame-width: 19%; /* 背景を複数のグラデーションで構成する。 */ background: radial-gradient( ellipse at 50% 30%, rgba(164, 111, 48, .14), transparent 58% ), linear-gradient( 180deg, rgba(9, 6, 4, .08), rgba(8, 5, 3, .35) ); /* 上部に薄い金色の境界線を付ける。 */ border-top: 1px solid rgba(215, 182, 111, .15); /* 下部にも薄い金色の境界線を付ける。 */ border-bottom: 1px solid rgba(215, 182, 111, .2); } /* ========================================================== 7. 左右の収納フレーム ========================================================== */ /* 左右のアイテム置き場に共通する設定。 */ .item-frame { /* position: absolute; 親要素を基準に、自由な位置へ配置する。 この場合、position: relativeが指定された .game-boardが位置決めの基準になる。 */ position: absolute; /* 重なり順を0にする。 天秤やアイテムより後ろに配置するための設定。 */ z-index: 0; /* ゲーム画面の上端から3%下に配置する。 */ top: 3%; /* フレームの横幅をCSS変数で設定する。 */ width: var(--frame-width); /* ゲーム画面の高さの91%にする。 */ height: 91%; /* フレームの内側に8pxの余白を付ける。 */ padding: 8px; /* フレームからはみ出した内容を隠す。 */ overflow: hidden; /* 外枠を3pxの金色にする。 */ border: 3px solid #b58b45; /* outlineはborderの外側に描かれる線。 枠の内側に見えるよう、位置を調整する。 */ outline: 1px solid #60401d; outline-offset: -7px; /* 角を5px丸くする。 */ border-radius: 5px; /* 暗い茶色を中心としたグラデーションを設定する。 */ background: linear-gradient( 135deg, #604025, #29180e 35%, #49301b 65%, #21130b ); /* 複数の影を重ねて立体感を出す。 inset： 要素の内側に影を描く。 0 5px 14px #0009： 下方向に影を付け、フレームが浮いているように見せる。 */ box-shadow: inset 0 0 0 2px #6f4d27, inset 0 0 18px #100904, 0 5px 14px #0009; } /* 収納フレーム内部の装飾線。 */ .item-frame::before { /* 疑似要素を表示するための必須指定。 空文字を設定すると、文字を表示しない装飾要素になる。 */ content: ""; /* 親フレームを基準に絶対配置する。 */ position: absolute; /* 上下左右10pxの位置に配置する。 */ inset: 10px; /* 内側に細い金色の枠線を描く。 */ border: 1px solid #c5a05c; /* 内側に薄い枠状の影を付ける。 */ box-shadow: inset 0 0 0 2px rgba(197, 160, 92, .18); /* 装飾要素がマウス操作の妨げにならないようにする。 */ pointer-events: none; } /* 収納フレーム左上の星形装飾。 */ .item-frame::after { /* 星の文字を表示する。 */ content: "✦"; /* フレームを基準に絶対配置する。 */ position: absolute; /* 上端から12pxの位置に配置する。 */ top: 12px; /* 左端から12pxの位置に配置する。 */ left: 12px; /* 星を明るい金色にする。 */ color: #e1c27d; /* 星の大きさを17pxにする。 */ font-size: 17px; /* 星の周囲に光るような影を付ける。 */ text-shadow: 0 0 5px #9d7135; /* 星がマウス操作の妨げにならないようにする。 */ pointer-events: none; } /* 左側の収納フレーム。 */ .left-frame { /* ゲーム画面の左端から1%の位置に配置する。 */ left: 1%; } /* 右側の収納フレーム。 */ .right-frame { /* ゲーム画面の右端から1%の位置に配置する。 */ right: 1%; } /* 収納フレームのタイトル。 */ .frame-title { /* フレームを基準に絶対配置する。 */ position: absolute; /* フレームの上端から17pxの位置に配置する。 */ top: 17px; /* 左端を0にする。 */ left: 0; /* タイトルの表示幅をフレーム全体にする。 */ width: 100%; /* 文字を中央揃えにする。 */ text-align: center; /* 文字色を金色にする。 */ color: #e4c788; /* 画面幅に応じて文字サイズを調整する。 */ font-size: clamp(9px, 1vw, 13px); /* 文字同士の間隔を少し広げる。 */ letter-spacing: .16em; /* 文字に暗い影を付け、背景から読み取りやすくする。 */ text-shadow: 0 1px 3px #000; } /* ========================================================== 8. 天秤本体の配置 ========================================================== */ /* 天秤の画像をまとめて配置する領域。 */ .scale-assembly { /* ゲーム画面を基準に絶対配置する。 */ position: absolute; /* 重なり順を1にする。 収納フレームより手前、アイテムより後ろに配置する。 */ z-index: 1; /* ゲーム画面の左端から中央へ50%移動した位置に配置する。 */ left: 50%; /* ゲーム画面の上端から8pxの位置に配置する。 */ top: 8px; /* 天秤をまとめる領域の幅を580pxにする。 */ width: 580px; /* 天秤をまとめる領域の高さを650pxにする。 */ height: 650px; /* 自身の幅の50%だけ左へ移動する。 left: 50%と組み合わせることで中央揃えになる。 */ transform: translateX(-50%); /* この領域自体はマウスやタッチ操作を受け取らない。 下にあるアイテムの操作を妨げないための設定。 */ pointer-events: none; } /* 天秤の本体画像。 */ .balance-body { /* 親要素を基準に絶対配置する。 */ position: absolute; /* 親要素の横幅の中央に配置する。 */ left: 50%; /* 親要素の上端に配置する。 */ top: 0; /* 画像の高さを650pxにする。 */ height: 650px; /* 幅は高さと画像本来の比率に応じて自動計算する。 */ width: auto; /* 親要素の幅によって画像を縮小しないようにする。 */ max-width: none; /* 画像の中心を親要素の中央に合わせる。 */ transform: translateX(-50%); /* 画像の表示方法を指定する。 containは、指定領域内に画像全体が収まるようにする。 */ object-fit: contain; } /* ========================================================== 9. 天秤の横棒 ========================================================== */ .balance-rod { /* 絶対配置する。 */ position: absolute; /* 本体より手前に表示する。 */ z-index: 1; /* 親要素の横方向の中央に配置する。 */ left: 50%; /* 親要素の上端から220pxの位置に配置する。 */ top: 220px; /* 横棒の幅を580pxにする。 */ width: 580px; /* 高さは画像本来の比率に合わせる。 */ height: auto; /* 親要素の幅による自動縮小を防ぐ。 */ max-width: none; /* 横棒を中央に合わせ、回転角度を0度にする。 JavaScriptは、このtransformを変更して 横棒の傾きを表現する。 */ transform: translateX(-50%) rotate(0deg); /* 回転の中心を、画像の横方向50%、縦方向50%にする。 つまり、画像の中央を中心として回転する。 */ transform-origin: 50% 50%; /* transformが変更されたとき、0.38秒かけて滑らかに動かす。 cubic-bezier()は、アニメーションの速度変化を指定する。 数値によって、動き始めや止まるときの加減速が変わる。 */ transition: transform .38s cubic-bezier(.2, .75, .25, 1); } /* ========================================================== 10. 天秤の針 ========================================================== */ .balance-needle { /* 絶対配置する。 */ position: absolute; /* 横棒より手前に表示する。 */ z-index: 4; /* 親要素の横方向の50.2%の位置に配置する。 */ /* 50%ではなく50.2%にして、画像の見た目に合わせている。 */ left: 50.2%; /* 親要素の上端から62pxの位置に配置する。 */ top: 62px; /* 針の画像の幅を29pxにする。 */ width: 29px; /* 針の画像の高さを230pxにする。 */ height: 230px; /* 親要素の幅による自動縮小を防ぐ。 */ max-width: none; /* 針を中央に合わせ、回転角度を0度にする。 */ transform: translateX(-50%) rotate(0deg); /* 針の回転中心を設定する。 50%は横方向の中央。 82%は上端から高さの82%の位置。 画像の中央ではなく下寄りを回転の中心にすることで、 針の根元を中心に回転しているように見せる。 */ transform-origin: 50% 82%; /* 針の回転を0.38秒かけて滑らかにする。 */ transition: transform .38s cubic-bezier(.2, .75, .25, 1); } /* ========================================================== 11. 左右の皿 ========================================================== */ /* 左右の皿に共通する設定。 */ .cup { /* 親要素を基準に絶対配置する。 */ position: absolute; /* 横棒より手前に表示する。 */ z-index: 2; /* 親要素の幅の37%を皿の幅にする。 */ width: 37%; /* 高さは画像本来の縦横比に合わせる。 */ height: auto; /* 親要素の幅による自動縮小を防ぐ。 */ max-width: none; /* 画像全体が収まるように表示する。 */ object-fit: contain; /* 横方向の位置を、自身の幅の50%だけ左へ移動する。 leftで指定した位置を画像の中央に合わせるための指定。 縦方向は0px移動する。 */ transform: translate(-50%, 0); /* topの値が変更されたとき、0.38秒かけて滑らかに移動する。 */ transition: top .38s cubic-bezier(.2, .75, .25, 1); } /* 左側の皿。 */ .left-cup { /* 親要素の中央から270px左に配置する。 calc()は、CSSで計算式を使うための関数。 50% - 270pxという計算で位置を決める。 */ left: calc(50% - 270px); /* 親要素の上端から265pxの位置に配置する。 */ top: 265px; } /* 右側の皿。 */ .right-cup { /* 親要素の中央から270px右に配置する。 */ left: calc(50% + 270px); /* 親要素の上端から265pxの位置に配置する。 */ top: 265px; } /* ========================================================== 12. アイテム配置レイヤー ========================================================== */ .items-layer { /* 絶対配置を有効にする。 この要素はゲーム画面全体に重ねて配置するための領域。 内部のアイテムは、この領域を基準に位置を指定できる。 */ position: absolute; /* 天秤本体より手前に配置する。 */ z-index: 5; /* inset: 0は、top、right、bottom、leftを すべて0にする省略記法。 そのため、親要素の上下左右いっぱいに広がる。 */ inset: 0; } /* ========================================================== 13. アイテムの基本設定 ========================================================== */ /* items-layerの中にあるitemクラスの要素を対象にする。 */ .items-layer .item { /* アイテムを自由な位置に配置できるようにする。 */ position: absolute; /* アイテムの幅を画面幅に応じて調整する。 clamp(25px, 3.5vw, 48px)： 最小25px、推奨値は画面幅の3.5%、最大48px。 画面が狭くなると小さくなり、 画面が広くなると大きくなる。 */ width: clamp(25px, 3.5vw, 48px); /* 高さも幅と同じ基準で調整する。 */ height: clamp(25px, 3.5vw, 48px); /* アイテムの内側の余白をなくす。 */ padding: 0; /* アイテムの外側の余白をなくす。 */ margin: 0; /* 画像全体が指定された幅と高さの中に収まるようにする。 縦横比を維持したまま表示する。 */ object-fit: contain; /* 画像に境界線を付けない。 */ border: 0; /* 角を丸くしない。 */ border-radius: 0; /* アイテムの背景を透明にする。 */ background: transparent; /* アイテム自体に影を付けない。 */ box-shadow: none; /* 操作できるアイテムであることを示すため、 マウスポインターを手の形にする。 */ cursor: grab; /* touch-action: none; タッチ操作の標準的なスクロールや拡大操作を抑制する。 アイテムを指でドラッグするときに、 ページのスクロールなどが起きにくくなる。 */ touch-action: none; /* 文字や画像を選択しにくくする。 */ user-select: none; /* WebKit系ブラウザーでの画像の標準ドラッグを無効にする。 */ -webkit-user-drag: none; } /* 皿に置かれていないアイテムに影を付ける。 */ .items-layer .item:not(.placed) { /* :not(.placed)は、placedクラスを持たない要素を対象にする。 drop-shadow()は、画像の不透明部分の形に沿って影を付ける。 画像の周囲に影を付けることで、置き場の背景から見分けやすくする。 */ filter: drop-shadow(0 2px 2px #0009); } /* アイテムを操作しているときのマウスポインター。 */ .items-layer .item:active { /* 押している間は、つかんでいるようなカーソルにする。 */ cursor: grabbing; } /* 皿に置かれたアイテム。 */ .items-layer .item.placed { /* 皿の上では幅を38pxにする。 */ width: 38px; /* 皿の上では高さを38pxにする。 */ height: 38px; } /* ドラッグ中のアイテム。 */ .items-layer .item.dragging { /* 重なり順を30にする。 通常のアイテムより大きい値にすることで、 ドラッグ中のアイテムを手前に表示する。 */ z-index: 30; /* 少し透明にする。 */ opacity: .94; /* ドラッグ中のアイテムを1.05倍に拡大する。 1が元の大きさ、1.05が5%拡大。 */ transform: scale(1.05); } /* ========================================================== 14. ゲーム画面内の説明文 ========================================================== */ .hint { /* 絶対配置する。 */ position: absolute; /* 重なり順を8にし、他の要素より手前に表示する。 */ z-index: 8; /* 親要素の横方向の中央に配置する。 */ left: 50%; /* ゲーム画面の下端から8pxの位置に配置する。 */ bottom: 8px; /* 自身の幅の50%だけ左へ移動し、中央揃えにする。 */ transform: translateX(-50%); /* 文字の幅に合わせて要素の幅を決める。 max-widthと組み合わせることで、 長い文章が画面からはみ出すのを抑える。 */ width: max-content; /* 最大幅を親要素の96%に制限する。 */ max-width: 96%; /* 文字を中央揃えにする。 */ text-align: center; /* 文字色を薄い金色にする。 */ color: #d7c19a; /* fontの省略記法。 12px：文字サイズ。 1.5：行の高さ。 sans-serif：ゴシック系のフォント。 */ font: 12px/1.5 sans-serif; /* 暗い影を付け、背景から文字を読みやすくする。 */ text-shadow: 0 1px 3px #000; } /* ========================================================== 15. フッター ========================================================== */ footer { /* Flexboxを有効にする。 */ display: flex; /* 子要素を横方向の中央に配置する。 */ justify-content: center; /* 子要素が1行に収まらない場合は、次の行に折り返す。 */ flex-wrap: wrap; /* 要素同士の間隔を設定する。 10px：行と行の間隔。 25px：横方向の間隔。 */ gap: 10px 25px; /* フッターの内側に14pxの余白を付ける。 */ padding: 14px; /* 文字色を設定する。 */ color: #bda780; /* 文字サイズ12px、フォントはsans-serif。 */ font: 12px sans-serif; } /* ========================================================== 16. タブレット・スマートフォン向けの設定 ========================================================== */ /* メディアクエリー。 画面幅が760px以下の場合に、 この中のCSS設定を適用する。 PCとスマートフォンで表示を切り替えるために使う。 */ @media (max-width: 760px) { /* -------------------------------------------------------- ヘッダー -------------------------------------------------------- */ .header { /* 子要素を縦方向に並べる。 */ align-items: flex-start; /* 横並びから縦並びに変更する。 */ flex-direction: column; } /* -------------------------------------------------------- ステータス表示 -------------------------------------------------------- */ .status { /* 3列を均等な幅で配置する。 */ grid-template-columns: repeat(3, 1fr); /* 左右の余白を8pxにする。 */ padding: 0 8px; } /* メッセージ欄。 */ #message { /* グリッドの1列目から最終列までを使う。 1 / -1は、最初のグリッド線から最後のグリッド線まで 広げる指定。 */ grid-column: 1 / -1; /* メッセージ欄の最低高さを44pxにする。 */ min-height: 44px; } /* -------------------------------------------------------- ゲーム画面 -------------------------------------------------------- */ .game-board { /* スマートフォンでは縦方向の高さを900pxにする。 */ height: 900px; /* 収納フレームの幅をゲーム画面の25%にする。 */ --frame-width: 25%; } /* -------------------------------------------------------- 左右の収納フレーム -------------------------------------------------------- */ .item-frame { /* 上端から2%の位置に配置する。 */ top: 2%; /* 高さをゲーム画面の94%にする。 */ height: 94%; /* 内側の余白を3pxに減らす。 */ padding: 3px; /* 枠線を2pxに細くする。 */ border-width: 2px; } /* 収納フレームの内側の装飾線。 */ .item-frame::before { /* 上下左右の余白を5pxにする。 */ inset: 5px; } /* 星形装飾。 */ .item-frame::after { /* 上端から6pxに配置する。 */ top: 6px; /* 左端から6pxに配置する。 */ left: 6px; /* 星のサイズを12pxにする。 */ font-size: 12px; } /* 収納フレームのタイトル。 */ .frame-title { /* 上端から12pxの位置にする。 */ top: 12px; /* 文字サイズを8pxにする。 */ font-size: 8px; /* 文字間隔を小さくする。 */ letter-spacing: .04em; } /* -------------------------------------------------------- 天秤本体 -------------------------------------------------------- */ .scale-assembly { /* 天秤をまとめる領域の幅を580pxに維持する。 */ width: 580px; /* translateX(-50%)で中央に配置し、 scale(.62)で全体を62%の大きさに縮小する。 scale()の値が1なら元の大きさ、 0.5なら半分、0.62なら元の62%になる。 */ transform: translateX(-50%) scale(.62); /* 縮小の基準位置を上端の中央にする。 top centerは、横方向の中央・縦方向の上端を意味する。 これにより、縮小しても上端を基準に配置できる。 */ transform-origin: top center; } /* -------------------------------------------------------- アイテム -------------------------------------------------------- */ .items-layer .item { /* スマートフォンでは幅を24～32pxの範囲で調整する。 */ width: clamp(24px, 4vw, 32px); /* 高さも同じ範囲で調整する。 */ height: clamp(24px, 4vw, 32px); } /* 皿に置かれたアイテム。 */ .items-layer .item.placed { /* 皿の上では幅を30pxにする。 */ width: 30px; /* 皿の上では高さを30pxにする。 */ height: 30px; } } /* ========================================================== 17. 小型スマートフォン向けの設定 ========================================================== */ /* 画面幅が480px以下の場合に適用する。 760px以下の設定に加えて、さらに細かい調整を行う。 */ @media (max-width: 480px) { /* -------------------------------------------------------- ゲーム画面 -------------------------------------------------------- */ .game-board { /* 収納フレームの幅を27%に広げる。 */ --frame-width: 27%; } /* -------------------------------------------------------- 置き場のアイテム -------------------------------------------------------- */ .items-layer .item { /* 小型スマートフォンでは幅を24pxに固定する。 */ width: 24px; /* 高さも24pxに固定する。 */ height: 24px; } /* -------------------------------------------------------- 皿に置かれたアイテム -------------------------------------------------------- */ .items-layer .item.placed { /* 皿の上では幅を26pxにする。 */ width: 26px; /* 皿の上では高さを26pxにする。 */ height: 26px; } /* -------------------------------------------------------- 収納フレームのタイトル -------------------------------------------------------- */ .frame-title { /* 文字サイズを8pxにする。 */ font-size: 8px; /* 文字間隔を0にし、狭い画面でも収まりやすくする。 */ letter-spacing: 0; } }