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

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

Webアプリのスマホ対応案（Parlle.. ｜so-net ブログのタグクラウドが下書.. ブログトップ

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

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

こんばんは。

１ヶ月ほど前にまとめ買いした宇宙兄弟の電子コミックを、ナカナカ読み進められていない @sakashushu です。

Parllet（個人で作成・公開しているアルファ版のWeb家計簿）の、昨日ポストしたスマホ対応案の ブログラミング（ブログを書きながらプログラミング）に、本日から入っていきたいと思います。

スポンサードリンク

■ ざっくり環境

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

■ 現状

以下、昨日ポストした改修案から。

PCサイズでの残高表はこんな感じでして、

幅をスマホサイズぐらいまで縮めるとこうなります。（スマホでは、開いた直後がこんなイメージ）

スクロールして真ん中部分を中央に持ってくるとこんな感じです。

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

■ 体当たり開始

今回の改修はすんなり行かない気がしていて・・

って、私の力量では割と毎回そうなんですが、今回はいつもよりさらに手がかかりそうだと感じてます。

ので、逆にモロにぶつかっていきます。

私が簡単に思いつくのは、スマホサイズになった時に CSS を display: none; にすること。

隠したい要素の大枠は #divBtTblRealFlm, #divBtSvgReal, #divBtTblPrltFlm, #divBtSvgPrlt です。

まずは思いついたままやってみます。

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

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

（中略）

.tbMemberMenu {
display: block;
}
#divBtTblRealFlm, #divBtSvgReal, #divBtTblPrltFlm, #divBtSvgPrlt {
    display: none;
}

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

    （中略）

    #username-field div, #password-field div {
        width: 100%;
    }
    #divBtTblRealFlm, #divBtSvgReal, #divBtTblPrltFlm, #divBtSvgPrlt {
        display: block;
    }
}