レスポンシブWebデザイン導入（Parllet の場合 データ削除ダイアログ（番外編－２）） [公開アプリ]
※ 注意！ このエントリは ブログラミング（ブログを書きながらプログラミング）です。筆者がポストした時には気づいていない誤り等が後から発覚する恐れがあります。（過去の事例：2014年 1/4
の誤りに 1/9 に気づいて訂正、等 ^^; ）
世間はエイプリルフールのようですが、気の利いた嘘のひとつもつけない sakashushu です。
いつものように参ります(^_^;
Parllet（個人で作成・公開しているアルファ版のWeb家計簿） のレスポンシブWebデザイン導入シリーズは番外編が続く展開になってまいりました。
今回は、前回（3/31） のブログラミング（ブログを書きながらプログラミング）中に気になったレイアウト、これはやっぱり変更しようと思いまして。
スポンサードリンク
■ ざっくり環境
OS：Windows 7 Home Premium
Play Flamework：1.2.4
ブラウザ：IE 11.0
Github公開リポジトリ のCommitバージョン（スタート時点）：こちら
■ 現状
前回（3/31） のデータ削除ダイアログの幅のレスポンシブ化の対応では floar: left していながら clear していなかったミスに対応しました。
このぐらいの幅まで縮めて、一応レイアウトの崩れ自体は解消されたんですが・・・、
歳のせいか、どうも見づらいような気が・・・。
ということでやっぱり float での手法をやめて、見た目を表形式に変えてしまおうと思います。
いつものように体当たりで学びながら進めていきます。
■ 体当たり開始
Parllet（パレット） で CSS の display: table-cell; で実装している表形式は残高表・日計表・明細表と結構ありますが、何れも初期に体当たりで調べて組んだので、うろ覚えでしかも最初から理解が浅いです。
当時の検索結果のページを参考に、<ul> ・ <li> ・<div> に CSS を設定して実現した記憶があります。
理解を深めるために今回もう一度検索からやり直してみます。
ということで検索してみたんですが、いまいち表形式にする手法の検索結果が出てきませんでした。
私がイメージしているのは <table> ・ <tr> ・ <td> で出来る表です。
１行目のセルの幅を変えたら２行目以降もそれに準じると。
それをレスポンシブでパーセンテージで実現したかったんですが、「displey table-cell」での検索結果を参考にざっと組んでも、それぞれのセルが独立したような動きしかできません。
探し方が下手ってことかな？まあそれは間違いないが
ようやく見つけたのが以下のページ。
（前略）
via: [css][html] divでtableを作る tableの行全体をリンクにする divの高さとborder-bottomを揃える display:table-cellは神です。：レスペス・トランクィル
<style type="text/css">
body { margin:5px;
background-color:#999;
border-collapse:collapse;
}
#table {
display:table;
}
.row {
display:table-row;
}
.row>div {
display:table-cell;
margin:15px;
padding:15px;
border:10px solid;
background-color:#eee;
}
</style>
<div id="table">
<div class="row">
<div> u1 </div>
<div> u2 </div>
</div>
<div class="row">
<div> b1 </div>
<div> b2</div>
</div>
</div>
（後略）
ほぉ！
<ul> とか <li> とか要らないんだ？！（今となっては当時の参考元すら分からないけど・・・。）
しかも、display: table-row; ってのも初見。
それが無くても作れちゃってはいたけど、今回の形のほうがオジサンの頭には入って来やすい！
今回はこの形を真似させてもらいま～す！
Parllet/app/views/DetailList/dl_header.html 内の編集（太字の部分）
<div id="dialog-delRec" class="invisible">
<p><span class="ui-icon ui-icon-info" style="float: left; margin: 0 7px 5px 0;"></span>&{'dialog.message.info.del.text1'} </p>
<br />
<div id="divTbl">
<div class="divTblRow">
<div class="left">&{'payment_date'}</div>
<div><span id="spnPayDate"></span></div>
</div>
<div class="divTblRow">
<div>&{'balance_type_mst'}</div>
<div><span id="spnBType"></span></div>
</div>
<div class="divTblRow">
<div>&{'handling_mst'}</div>
<div><span id="spnHdlg"></span></div>
</div>
<div class="divTblRow">
<div>&{'parllet_mst'}</div>
<div><span id="spnPrlt"></span></div>
</div>
<div class="divTblRow">
<div>&{'item_mst'}</div>
<div><span id="spnItem"></span></div>
</div>
<div class="divTblRow">
<div>&{'amount'}</div>
<div class="numeric"><span id="spnAmnt"></span></div>
</div>
<div class="divTblRow">
<div>&{'debit_date'}</div>
<div><span id="spnDebDate"></span></div>
</div>
<div class="divTblRow">
<div>&{'content'}</div>
<div><span id="spnCntnt"></span></div>
</div>
<div class="divTblRow">
<div>&{'store'}</div>
<div><span id="spnStore"></span></div>
</div>
<div class="divTblRow">
<div>&{'remarks'}</div>
<div><span id="spnRmrks"></span></div>
</div>
</div>
<br />
<p id="pConfirm">&{'dialog.message.del.confirm'}</p>
</div> <!-- dialog-form -->
Parllet/public/stylesheets/main.css 内への追記
#dialog-delRec #divTbl {
display: table;
width: 100%;
border-collapse: collapse;
}
#dialog-delRec #divTbl .divTblRow {
display: table-row;
}
#dialog-delRec #divTbl .divTblRow>div {
display: table-cell;
vertical-align: middle;
border: solid 1px #CCC;
}
#dialog-delRec #divTbl .divTblRow>div:first-child {
text-align: center;
background: #ddd;
font-weight: bold;
}
#dialog-delRec #divTbl .divTblRow>div:nth-child(2) {
padding: 0 0.5em;
}
#dialog-delRec #divTbl .divTblRow>.left {
width: 40%;
}
わたし的にはほんのちょっとだけマシになった気がしてるんですが、どうですかね？
はい、以上です。
お疲れ様でした。
いつも最後まで読んでいただいてありがとうございますm(_ _)m
何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)
またお越しくださいませませ！
コメント 0