Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと

榊原

2014.03.26

2. スマホの固定ナビゲーション対策にはjQuery Mobileを導入する

「特にスマホ専用の見え方はしなくていいです」というオーダーに小躍りしていた内藤。しかしクライアント様から「スマホだと固定ナビがスクロールしちゃうんですけど」という報告を受けて一転、ピンチを迎えます。

iPhoneやAndroidは、2014年3月20日現在で正式にはfixedというcssをサポートしていません。スマホでも固定にしたいので、jQuery Mobileをインクルードすることにしました。

fixedをサポートするためだけのコードを取得する方法

jQuery Mobile公式サイトにアクセスし、トップページ右側の「Custom download」ボタンをクリックします

jQuery Moble

http://jquerymobile.com/

下記の3項目にチェックを入れて…

Toolbars: Fixed
Toolbars: Fixed: Workarounds
Toolbars: Fixed

jQuery Mobile

一番下の「Build my download」ボタンを押します。これでスマホの固定ナビゲーション対策はひと段落しました。

3. ブラウザの印刷機能にも気を配る

これはクライアント様の確認時に先方が画面をプリントアウトされたことで発覚した問題なのですが、「印刷すると見えなくなってしまう場所があるんですけど」と言われました。

なるほど、固定されたナビゲーションが改ページごとに登場し、一部が隠れてしまっていたので、たしかにちょっと見づらいです。

そこで印刷用CSSを利用し、見えなくすることにしました。さらに、「このページのトップへ」も印刷時には見えなくていいので、こちらも見えないように対処。

#header,
#footer,
#goTop {
display: none;
}

これでOKが出た次第です。

最近はブラウザの印刷機能にPDFで保存する機能がついていたりもして、意外に印刷用cssの重要性が高まっている気がします。

4. YouTubeの動画を埋め込む時の落とし穴とその回避法

YouTube動画の埋込コードをそのまま使っていたら、「なんか表示が変なのですぐチェックしてください！」とクライアント様から連絡が来てしまいました。

現在のChrome/Safariでは確認できない問題ですが、IE11やFireFoxでは注意が必要です。YouTubeの埋込コードを下図のように取得してそのまま使うと困ったことが起きるのでした。

YouTubeの埋込コード

これをこのまま使うと…

固定ナビゲーションの上をスクロールする

そうなんです、スクロールすると動画がz-indexを無視するように固定ナビゲーションの上を通過してしいたのです。

この現象に対しては、YouTubeから取得したコードのリンク先に、下記コードを追加することで回避可能でした。

<!-- そのままのコード -->
<iframe width="560" height="315" src="//www.youtube.com/embed/DbPAW_gKJmM?rel=0" frameborder="0" allowfullscreen></iframe>

<!-- リンクの最後に　&wmode=transparent　を追加する -->
<iframe width="560" height="315" src="//www.youtube.com/embed/DbPAW_gKJmM?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>

比較的簡単な修正で済んで助かった！