Part-3 Step-6 で発生する問題(ブレークポイントのバグ)について

「3-6」の4分18秒あたりから、少し触れているのですが、「マスターを適用したり、外したりすると、一番狭いブレークポイントのページに配置した要素がずれてしまう」問題があります(バグの可能性あり)。

そこで、「3-7」では回避策を解説しました。
一番狭いブレークポイントだけがずれてしまうので、ダミーのブレークポイント(例えば500pxなど)を設定してから、マスターを適用(もしくは外す)、その後、ダミーのブレークポイントを削除します。


手順を簡単に提示してみたいと思います。

[01]下図は、Part-3「Step-6」で作成したページです。最も幅の狭いブレークポイント(750px)のページを表示しています。



[02]マスターを適用してみます。ページを右クリックして、メニューから[マスター]→[ブレークポイント]を選びます。



[03]マスターを適用すると、最も幅の狭いブレークポイントだけ、ページ上に配置したテキストや画像がずれてしまいます。他のブレークポイントには影響ありません。




回避策です。「3-7」で解説したとおり再現してみます。

[01]最も幅の狭いブレークポイントだけ影響を受けますので、ダミーのブレークポイントを設定します。例えば、600pxなど、750pxより狭いブレークポイントにします。



[02]マスターを適用してみます。ページを右クリックして、メニューから[マスター]→[ブレークポイント]を選びます。



[03]いま設定したダミーのブレークポイントのページでは、ずれてますが、幅750pxのブレークポイントのページは、下図のとおり影響を受けていません(ずれていません)。



[04]調整の作業が終わり、マスターが必要なくなったら、ダミーのブレークポイントを削除します。ブレークポイントのバーを右クリックして、メニューから[ブレークポイントを削除]を選びます。



という手順で、マスターを適用したり、外す必要がある場合、最も幅の狭いダミーのブレークポイントを設定しておけば、それ以上の幅のブレークポイントでは影響がありませんので、とりあえず、この方法を覚えておいてください。

現在、海外のMLなどで確認中です。

同様の症状で悩んでいる人がいらっしゃるのですが、手作業でずれを直しているようで、バグとして認識されていない可能性がありそうですね...



シンクゼロマガジンとは?

筆者:
Creative Edge School Books