レスポンシブWebデザイン導入（Parllet の場合 明細表（収支明細）－７） [公開アプリ]
※ 注意！ このエントリは ブログラミング（ブログを書きながらプログラミング）です。筆者がポストした時には気づいていない誤り等が後から発覚する恐れがあります。（過去の事例：2014年 1/4
の誤りに 1/9 に気づいて訂正、等 ^^; ）
sakashushu です。
2/8 からParllet（個人で作成・公開しているアルファ版のWeb家計簿） のレスポンシブWebデザイン導入シリーズは明細表篇のブログラミング（ブログを書きながらプログラミング）に入っています。
スポンサードリンク
■ ざっくり環境
OS：Windows 7 Home Premium
Play Flamework：1.2.4
ブラウザ：IE 11.0
Github公開リポジトリ
■ 現状
2/7 に現時点のParllet（パレット）（GithubのこのCommitバージョン ）の収支明細を元に、スナップショットを兼ねてサンプル収支明細１ を作りました。
ここがスタート地点です。
前回（2/14） までに、タブレットサイズ（768px）以下になった時の機能として以下を実装しました。
- １行目のヘッダーは ロゴ と 会員メニュー のみ残し、２行目に 大分類 ＞ 小分類 の形のパンくずリストで表示。
- 大分類（明細表）・小分類（収支明細）をクリック時にスライドメニューが開く。
- コンテンツ部分はParllet（パレット） ログインページでの手法（ここら辺）で分かりやすい要素から順々に設定している途中。
今回も、いつものように体当たりで学びながら進めていきます。
（1/11 に提示した新手法の方で実施するので、以前のようにサンプルページを元にして編集はしません。あくまで元になるのはGithubのこのCommitバージョン です。）
■ 体当たり開始
沿っていくのは2/6の案 です。
前回（2/14） は収支明細の枠までレスポンシブ化を完了しました。
いよいよ「一番の体当たりポイント」と感じている「表全体のレスポンシブ化」に入ります。
ただ、スマホサイズまで表全体を縮めた時の列幅は相当狭い気もしているので、試した上で別の作戦に切り替える可能性はかなり大きいとは思います。
今回は勉強を兼ねての体当たりといったところでしょうか。（いつもかもしれませんが ^^; ）
現時点でこの状態です。
日付・収支種類～備考までの列の幅は、width: ○○px; の形で設定しています。
全体の幅が width: 100%; になったので、それに合わせてそれぞれ縮むためにパーセンテージを割り振ってみます。
ちょうど10項目あるのでまずはザックリ、全ての列幅を10%で。
Parllet/app/views/DetailList/dl_header.html 内の <style> ～ </style> の
/* 共通のスタイル */ に追記
.dl_common_column, .dl_balance_type, .dl_payment_date, .dl_amount, .dl_content {
min-width: 0;
width: 10%;
}
・・・・・・。
・・・・・・汗・・汗・・汗。
・・・・・・。
し・・・初っ端から強烈・・・。
ヘッダーの方は問題無さそうで、明細行の部分が縮まり過ぎですね・・・。
私は逆に、縮めていったときのヘッダーの入力ボックスの方を心配していたんですけど、それ以前の問題。
でも何か良く見たら、ヘッダーも明細行も、中身の大きさに左右されてるような気が・・・。
自分の力不足が原因ですが、どうも CSS は直感的に理解できないですね～。
でも・・・、何かちょっと、記憶が蘇ってきた。
上記で「min-width: 0;」と指定したのは、現時点のそれぞれの項目が「min-width: ○○px;」の形で指定されていたからでした。
そもそも何で min-width を指定したかといいうと、上記の問題にぶち当たったからだったかも！
その当時はこうしてブログラミング（ブログを書きながらプログラミング）していなかったから、うろ覚えの記憶頼りですが。
う～む、とにかく、幅を決め打ちなら min-width の指定で良かったですが、レスポンシブでは駄目と。
勉強を兼ねた体当たりとは言え、いろいろ検索してみても解決策が見つかる気配がありません。
今回は上の方で書いた通り作戦を切り替える可能性もあるので、このまま縮めて「スマホサイズまで表全体を縮めた時の列幅は相当狭い」の見た目もチェックしてみたいと思います。
ヘッダーと明細行の幅に違いがあることはともかく、明細行だけを見てもちょっと、成り立たない感じですね。
表全体のレスポンシブ化は諦めて、表の部分だけは横スクロールする方向性にするのが良さそうです。
今回はここまでで、次回に表の部分だけ横スクロールする状態のチェックをしていきたいと思います。
※ 毎度の念のための断りですが、今回編集した内容は現時点（2014/2/15）では公開しているParllet（パレット） の方には反映しておりません。
次回に続きます！
2/16 追記
続きを書きました。
いつも最後まで読んでいただいてありがとうございますm(__)m
何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)
またお越しくださいませませ！
コメント 0