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

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

榊原

榊原

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>

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

最後に

いかがでしたでしょうか。知識の浅さを露呈してしまい誠に遺憾ではございますが、どなたかのお役に立てれば光栄に存じます。

最後までお付き合いくださり、ありがとうございました。

LIGでは、エンジニアを絶賛募集中!
LIGのエンジニアに応募してみる!

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

生まれも育ちも横浜のホエールズ狂。DB技術者・プログラマを経てWeb技術者。デザイナの相棒と"webや"をやっています。[http://web-ya.works/]|[最近のヒット!(過去のブログ)]|[webや]

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL