レスポンシブWebデザイン導入（Parllet の場合 データ削除ダイアログ（番外編））

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

sakashushu です。

Parllet（個人で作成・公開しているアルファ版のWeb家計簿） のレスポンシブWebデザイン導入シリーズは今回も番外編。

今回は、前回（3/30） のブログラミング（ブログを書きながらプログラミング）中に見つかった不具合への対応です。

 

スポンサードリンク

 

 

■ ざっくり環境

OS：Windows 7 Home Premium
Play Flamework：1.2.4
ブラウザ：IE 11.0
Github公開リポジトリ のCommitバージョン（スタート時点）：こちら

 

■ 現状

前回（3/30） のデータ削除ダイアログの幅のレスポンシブ化の対応にて。

幅を縮めて行って、このぐらいまでは問題無いようですが、

 

そこからちょっとだけ縮めたこの幅では真ん中辺のレイアウトが崩れます。

 

いつものように体当たりで学びながら進めていきます。

 

■ 体当たり開始

左側のデータの項目名は、floar: left で左寄せしています。

今回は「取扱（Parllet）」が折り返された後に「：」だけが続き、改行後にそのまま項目名としての「項目」が積み重なった感じです。

要は・・・、float を使ったくせに clear をしてなかったというやつですね・・・orz

まずは単純に clear します！

 

Parllet/public/stylesheets/main.css 内への追記（太字の部分）

#dialog-delRec .lblDlgDelRec {
    display: block;
    width: 40%;
    float: left;
    text-align: right;
}
#dialog-delRec br {
    clear: left;
}
#dialog-delRec #pConfirm {
    font-weight: bold;
}

 

ん・・・、一応 clear はされましたね。

 

さらに縮めてみます。

 

clear 自体は機能したけれども、何となく見づらいような・・・。

 

ここまで幅の狭いスマホだったり、PCでここまで縮めたりすることは無いとは思うんですが・・・。

今回はこれで終わりなんですが、もしかしたら今後また方向性を変えるかもしれません (^^ゞ

 

お疲れ様でした！

 

---

 

いつも最後まで読んでいただいてありがとうございますm(_ _)m

何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)

またお越しくださいませませ！

 

タグ：ブログラミング 体当たり レスポンシブWebデザイン Parllet 公開アプリ