Webアプリのスマホ対応（Parllet の場合　残高表－４）：sakashushuの取りあえずブログ：So-netブログ

	ブログをはじめるログイン

Webアプリのスマホ対応（Parllet.. ｜Webアプリのスマホ対応（Parllet.. ブログトップ

Webアプリのスマホ対応（Parllet の場合　残高表－４）　[公開アプリ] [編集]

※ 注意！　このエントリは ブログラミング（ブログを書きながらプログラミング）です。筆者がポストした時には気づいていない誤り等が後から発覚する恐れがあります。（過去の事例：2014年 1/4 の誤りに 1/9 に気づいて訂正、等 ^^; ）

こんばんは。

今日は CoderDojo Miyazaki vol.1 on Zusaar（小中学生向けのプログラミング教室）に息子たちを連れて行って、勝手に満足度の上がっている @sakashushu です。

Parllet（個人で作成・公開しているアルファ版のWeb家計簿）の、5/20 にポストしたスマホ対応案の ブログラミング（ブログを書きながらプログラミング）の４回目になります。

スポンサードリンク

■ ざっくり環境

OS：Windows 7 Home Premium
Play Flamework：1.2.4
ブラウザ：IE 11.0
Github公開リポジトリのCommitバージョン（スタート時点）： https://github.com/sakashushu/Parllet/tree/57ee59d35bd7a64b208a312c4543519a58a58842

■ 現状

前回日付入力部分と合計行のレスポンシブ化はうまく行った感じで、

でも、前々回にちょっと心配してたように、スクロールバーが消えてないです。

いつものように体当たりでブログラミング（ブログを書きながらプログラミング）していきます。

■ 体当たり開始

よく考えてみたら、前回は表の部分の大外を見ていませんでした。

まずは大外に当たる要素、#bt_tbl_flm をレスポンシブ化します。

Parllet/public/stylesheets/main.css に以下のように追記（太字の部分）

/* スマホのスタイル */

（中略）

#btRemTotal li div {
    width: 50%;
}
#bt_tbl_flm {
    width: 100%;
}

/* タブレットのスタイル */
@media all and (min-width: 480px) {

    （中略）

    #btRemTotal li div {
        width: 459px;
    }
    #bt_tbl_flm {
        width: 920px;
    }
}

スマホサイズで開いていた残高表をリロード！

ん・・っと。

スクロール消えませんでしたけど、残り僅かって感じですね。

スクロールバー引っ張ってみると、動いたの1pxって感じ・・。

1～2px のズレって、border って感じ・・・。

こりゃ、以前から、延ばし延ばしにしてたあれかな。

去年の 11/28 に初めて知って、現時点では明細表系にだけ適用している

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

をやると上手く行くパターンかな。

ちょっと試しに、残高表にも適用してみます。

Parllet/app/views/DailyAccount/balanceTable.html に以下のように追記（太字の部分）

/* 共通のスタイル */
.bt-menu-trigger {
    display: none;
}
*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}