• Login

---

電脳麻将UI 〜 layout

電脳麻将 では以下の端末からのアクセスを想定し、CSSによるレスポンシブデザインで最適な表示になるよう調整しています。

PC画面

横幅が広いことを利用したレイアウトを行う。

スマホ画面

iPhone SE のアスペクト比を基準とし、それより「細い」画面も想定したレイアウトを行う。

タブレット画面

iPad Pro のアスペクト比を基準とし、それより「長い」画面も想定したレイアウトを行う。

スマホとタブレットは viewport の設定で横幅を 800px に固定します^*1。

<meta name="viewport" content="width=800">

これにより端末の差異を画面の高さでだけ判別できるようになり、描画も 800px を基本とした座標系で行うことができるようになります。 画面が縦幅に収まらないことは想定し、その場合は 電脳麻将UI 〜 scale で説明した方法で高さを調整します。

端末の種別は以下の5種類とし、それぞれでレイアウト方法を調整します。

各端末種別ごとの画面イメージは以下の通りです。

PC画面

スマホ画面(横)

タブレット画面(縦)

整理すると以下となります。 調整が必要な部分を太字で示しました。

CSSの メディアクエリ を使って端末種別を判定し、以下の調整を行います。

@media screen and (min-width: 820px)

PC画面と判定し、ボタン類と検討画面を再配置する。

@media screen and (min-height: 1000px)

スマホ・タブレット画面(縦)と認識し、検討画面を再配置する。

@media screen and (max-height: 680px)

スマホ・タブレット画面(横)と認識し、リンク類を再配置する^*3。

@media screen and (max-height: 450px)

スマホ画面(横)と認識し、麻雀卓を縮小サイズとする。

HTMLは以下の階層をしています。

  body
    #navi           /* リンク類 */
    #space          /* 余白 */
    #board          /* 縮小による高さ調整の範囲 */
      .board            /* 麻雀卓 */
      .analyzer         /* 検討画面 */
      .controller       /* ボタン類 */
    .version

具体的なレイアウト設定(Stylus で記述)は以下の通りです^*4。

body.board
    width: 800px
    margin: 0 auto
    background: black
    color: white
    #board
        display: block

body.analyzer
    #board
        .analyzer
            display: block

#space
    display: none
    background: #666

#board
    display: none
    position: relative
    .board
        width: 800px
        height: 680px
    .controller
        width: auto
        height: 40px
    .analyzer
        display: none
        position: absolute
        top 0
        transform: translate(50px, 100px)
        width: 700px
        height: 300px

/* PC画面の差分 */
@media screen and (min-width: 820px)
    body.board
        #board .controller
            position: absolute
            top: 0
            transform: translate(80px, 100px)
            width: 160px
            height: 100px
    body.analyzer
        width: 1400px
        #board .analyzer
            position: relative
            transform: none
            width: 590px
            height: 680px
        #board
            .board
                float: left
            .analyzer
                float: right

/* スマホ・タブレット画面(縦)の差分 */
@media screen and (min-height: 1000px)
    body.analyzer
        #board .analyzer
            position: relative
            transform: none
            width: auto
            height: 300px

/* スマホ・タブレット画面(横)の差分 */
@media screen and (max-height: 680px)
    body.board
        height: 100dvh
        #navi
        > .version
            display: none
        #space
            display: block
            height: 100px

/* スマホ画面(横)の差分 */
@media screen and (max-height: 450px)
    body.board
        #board
            .board
                height: 450px
            .controller
                position: absolute
                top: 0
                right: 0
                width: 40px
                height: 450px
            .analyzer
                transform: translate(30px, 30px)

#board と .analyzer はデフォルトでは非表示なことに注意してください。 body 要素にクラス board があれば #board を、さらにクラス analyzer があれば .analyzer の非表示をキャンセルします。

以下で実際の動作を確認できます(卓をクリックすると検討画面が開きます)。

• デモプログラム(layout)