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

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

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

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

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

こんばんは。

【WordBonch】第4回勉強会に何も準備せずに参加して、スゴイ勢いでチンプンカンプンだった @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/243f82fde11c471f820553bd23e3274d6c9bdb42

■ 現状

前回スマホサイズでリロードした残高表は以下の状態です。

表の部分だけで言うと、真ん中部分だけ残すことに成功した状態です。（少なくとも見た目上は。）

次は日付入力部分や合計行をレスポンシブ化してみようかな、という段階ですね。

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

■ 体当たり開始

イメージしているのは、スマホサイズ（480px）以下になったらページ全体としてレスポンシブ化する感じです。

大外の要素は .btMainInner で、基本的にはその配下の要素で

width: ***;

で固定しているものを、

width: ***%;

に変えていきます。（あくまでスマホサイズ以下になったらね。）

それでは早速・・・

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

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

（中略）

.btMainInner {
    width: 100%;
}

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

    （中略）

    .btMainInner {
        width: 980px;
    }
}

スマホサイズで開いていた残高表をリロードすると、

この時点で日付部分は追随して中央寄せされました。

次は合計行で幅固定されているところの対応を。

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

（中略）

.btMainInner, #btRemTotal {
    width: 100%;
}
#btRemTotal li div {
    width: 50%;
}

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

    （中略）

    .btMainInner {
        width: 980px;
    }
    #btRemTotal {
        width: 920px;
    }
    #btRemTotal li div {
        width: 459px;
    }
}

残高表をリロード！

あら・・。

#btRemTotal li div { width: 50%; } が効いてない感じですね。

先祖要素を width: 100%; で辿ってみましょうか。

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

（中略）

.btMainInner, #btRemTotal {
    width: 100%;
}
#btRemTotal ul, #btRemTotal li {
    width: 100%;
}
#btRemTotal li div {
    width: 50%;
}

リロード！

・・・。

若干変わりましたが、やっぱりだめですね。

display: table-cell; だと幅のパーセント指定は出来ないのかな？

と思って検索したところ、

またtable-cellのもう１つの便利な点は、「table-cell要素だけで%指定ができる」ということです。

via: レスポンシブ化するなら知っておきたいtable-cellの使い方 | スマートフォン＆モバイルEC事例ノウハウ集｜モバイルファーストラボ

むぅ、ちゃんと出来るみたいですね。

何でかな～と、上記参考ページのサンプルを見ていたところ・・。

display: table-row; ってのが目に留まりました！

「あ・・、これやったことある・・。」

自分のブログ内を検索したところ、 4/1 のブログラミング で使ってましたね！（汗）

「<ul> とか <li> とか要らない」ってところでの作り変えは今回は後回しということで。

取りあえず display: table-cell; の親要素に display: table-row; を設定します。

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

（中略）

#btRemTotal ul, #btRemTotal li {
    width: 100%;
}
#btRemTotal li {
    display: table-row;
}
#btRemTotal li div {
    width: 50%;
}