レスポンシブWebデザイン導入計画（Parllet の場合 設定ページ－３） [公開アプリ]
前回 の続きです。
Parllet（個人で作成・公開しているアルファ版のWeb家計簿）
のレスポンシブ化は、トップページとログインページまでが完了していて、
前々回 から設定ページに入りました。
実装する内容は、この回にポストしたものです。
前回 までで、768px 以下になった時にヘッダーの１行目・２行目共に
ページメニューが消えて２行目にパンくずリストが表示されるようになりました。
■ ざっくり環境
OS：Windows 7 Home Premium
ブラウザ：IE 11.0
■ 現状
前々回、現時点の設定ページを元にスナップショットを兼ねてサンプル設定ページ１を作りました。
ここがスタート地点です。
今回も体当たりで学びながら進めていきます。
■ 体当たり開始
この回の案を再度記載。
幅を狭めていってタブレットサイズ（768px）以下は
１行目の大分類のヘッダーと、２行目の小分類のヘッダー
それそれを縮小する方向。
１行目のヘッダーは ロゴ と 会員メニュー のみ残し、
２行目に
大分類 ＞ 小分類
の形のパンくずリストで表示します。
上でも書きましたが前回、768px 以下になった時に１行目・２行目共に
ページメニューが消えて２行目にパンくずリストが表示されるようにしました。
この回の案に書かれた順番としては後先になりますが、先にこの辺を実装します。（理由は私がその方がやり易いというだけです。）
■ 改修案（コンテンツ部分）画像ではコンテンツ部分は放ったらかしていますが、
Parllet（パレット） ログインページページでの手法（ここら辺）
で、いい感じに縮まるようにするつもりです。
ということで、この時点で幅の固定されている箇所をレスポンシブ化します。
手法はこの回と同様。
サンプル設定ページ１ のソース内の <style> ～ </style> の部分に追記
/* 共通のスタイル */ に追記
body {
min-width: 0;
}
#hdContainer, #main, #cfHeader, #cfMain, #ftContents {
width: 95%;
max-width: 980px;
}
ん？「口座 編集」の大枠の幅が狭いっすね。
IE のF12開発者ツールでイジってみます。（F12開発者ツールに関しては、以前の回でも触れたことがあります。）
F12開発者ツールの要素の選択
重なり具合で #cfMainInner が選択されたが、
その親要素の #cfMain の幅の問題と分かる。
インラインスタイルで幅をちょっとずつ広げてみる。
#cfMain は width: 100%; で良いことが分かった。
#cfMain の親要素の #main が width: 95%; だから、
それのさらに 95% の幅になってしまっていたということか。
しかしそれなら同じく#main の子要素の #cfHeader は何故狭くなっていないか？
#cfMain と見比べて、パッと気づくのは #cfHeader は position: fixed; ということ。
「css position fixed 基準」で検索して以下を見つけました。
fixed は位置を指定した場合は表示部分全体が対象になるので absolute と同じように考えてると失敗する。
top で指定すれば表示部分の一番上、left で指定すれば親要素がセンタリングしていようが基準は表示部分の左からとなる。
なるほど、だから #cfHeader は #main に関係無く width: 95%; で良かったのか。
上記を踏まえて、/* 共通のスタイル */ に追記した部分を修正
body {
min-width: 0;
}
#hdContainer, #main, #cfHeader, #ftContents {
width: 95%;
}
#cfMain {
width: 100%;
}
#hdContainer, #main, #cfHeader, #cfMain, #ftContents {
max-width: 980px;
}
幅の固定されている箇所がレスポンシブ化されました。
今回はここまでです。
次回に続きます！
1/4 追記
続きを書きました。
1/11 追記
まとめを書きました。
いつも最後まで読んでいただいてありがとうございますm(__)m
何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)
またお越しくださいませませ！
コメント 0