Webアプリのスマホ対応（Parllet の場合 残高表－８） [公開アプリ]
※ 注意！ このエントリは ブログラミング（ブログを書きながらプログラミング）です。筆者がポストした時には気づいていない誤り等が後から発覚する恐れがあります。（過去の事例：2014年 1/4
の誤りに 1/9 に気づいて訂正、等 ^^; ）
こんばんは。
@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/9e9340d7f590df877a11423b64342afa5b782786
■ 現状
前回
の最後で、実残高の名称と金額の比率が６：４ぐらいになったけれども、
微妙に各セルの高さが大きくなって下の罫線も消えちゃっいました・・。
いつものように体当たりでブログラミング（ブログを書きながらプログラミング）していきます。
■ 体当たり開始
まず、今回の問題の「微妙に高さが大きくなる」の原因について。
あたくし、全くもって見当もついておりません。
見当ついてないんですが、取りあえず一つ修正したい箇所があります。
それは表のヘッダーに当たる部分。「実際の残高」のところです。
このセルも高さが大きくなっていますが、前回改修を加えた
Parllet/public/stylesheets/main.css
の以下の部分も影響の一つと思われますが、
#divBtStkdReal > .child {
width: 100%;
display: table;
}
私が width: 100%; と display: table; を適用させたかったのは、表のヘッダー以外の明細行の部分だけでした。
ので、まずはそこの指定を #divBtStkdReal の子要素の２番目だけにします。（太字の部分）
/* 共通のスタイル */
（中略）
#divBtStkdReal > .child:nth-child(2) {
width: 100%;
display: table;
}
#divBtStkdReal > .child > div {
width: 100%;
display: table-row;
}
スマホサイズで開いていた残高表をリロード！
ふーん・・・。
ヘッダーセルの高さが元に戻りましたね。
なんなんだろう、これは？
width: 100%; と display: table; のどっちが悪さをしてたのか分からないから、今後のためにF12ツールで見てみます。
width: 100%; を設定してみたところ、
高さは大きくなりません。そのままです。
display: table; を設定すると、
高さが大きくなりました！
レイアウトで見てみると、
border を除いた高さが 27px になっています。
5/25
に box-sizing: border-box; を設定しているのに何で？
ちなみに display: table; のチェックを外すだけで、
border を除いた高さが 25px（つまりborder を含んだ高さが 27px）になるので、box-sizing: border-box; がちゃんと効いています。
「box-sizing border-box display table」とかで検索もしてみましたが、この理由は分からないですね。
もし「理由が分かる！」って方が居ましたら、是非教えてください！
はい。そんなんで～、今回はヘッダーの部分だけでしたが、ここまでです！
お疲れ様でした！
■ 今途中まで読んでる・・
"「ガンダム」を創った男たち。" です。
元々は小野和俊さんのツイートで知って、
速攻でAmazonでポチりました。
ガンダムにも不遇の時代があったことを知るのは、少なからず励みになります！
TEL：
08034662740
メール：
sakashushu@gmail.com
ツイッター：
https://twitter.com/sakashushu
フェイスブック：
https://www.facebook.com/sakashushu
ご連絡・フォロー・友達申請 等、いつでもお気軽にどうぞ！
またお越しくださいませませ！
コメント 0