なんてことない土曜日の話
新しいサイトのレイアウトの参考にと、にじいろクリップを眺めていた時のことでした。
なんかこう、ビビッ!!とくるサイトないかなぁ……
そう、某「いつでも、どこでも、誰とでも」なハイブリッドゲーム機のHD振動みたいに
心の芯が揺さぶられるような……ん？
そう、見つけてしまったのです。シノビリフレのサイトを！
こ、こいつは……下端固定メニューだと！？
そこに書かれていたのは、衝撃的な事実でした。
なんと810円にプライスダウンされていた！
上端のメニューを一部だけ固定するのは比較的簡単にできます。
body
header
nav
div#body
footer
といったタグ構成（header+navでヘッダー）の場合
nav {
position: sticky;
top: 0;
}
だけで大体終わります。
一定位置までスクロールしたらfixedのnavを表示するとかは必要ありません。
IEユーザは文句を言う前に、対応ブラウザへ移行しましょう。
今回の下端固定メニューの場合も実際には、
body
header
div#body
nav
footer
nav {
position: sticky;
bottom: 0;
}
だけで済む話なんです。ええ。
それではシノビリフレのタグ構成を見てみましょう。
body
header
div#body
footer
nav
others (最下部にした時に表示されるもの)
そこに書かれていたのは、衝撃的な事実(タグ構成)でした。
ちなみにnavのみ表示されている時は、footerに.fixedが付いています。
さて、貴方ならどうやって実装しますか？ 少しだけ考えてみてください。
特定の条件を満たすと「裏オプション」も
どう実装されているかを確認するより、どう実装するかを考えた方が勉強になります。
というわけで、タグ構成はこのままでチャレンジしてみました。
とりあえずCSSだけで頑張った
footer.fixed {
position: sticky;
bottom: 0;
}
footer.fixed > :not(nav) {
display: none;
}
見た目上と表示上はいい感じに再現されたものの、最下部に来るとスクロール領域が増えてスクロールバーがぴょこぴょこします。
シノビリフレはそんなことしない！
仕方なくjsでも手を加えた
ぴょこぴょこしない方法は分かっているのです。
footer.fixed {
position: sticky;
bottom: XXXX; // -(othersのheight)px
}
とすれば良いのですが、XXXXは決め打ち以外にcssで当てようがありません。
どうせ.fixedの着脱時にDOMやwindowのサイズを使用しているので、js側で直接footerにbottomだけstyle付与しました。
これで大体シノビリフレと同じ挙動になってくれます。
ところで、.fixedなのにposition: sticky;ってどんな裏仕様ですか？
実際のところどうなのか
詳細までは見る気が起きなかったですが、以下の特徴を見るにサイズは決め打ちでしょうね。
footerに
position:absolute;
footer.fixedにposition:fixed;
bodyにfooter用のpadding-bottom指定
無駄に勉強させてもらった感じとなりました。
CSSが思い通りに当たらない場合は、HTMLのタグ構成から見直すべき
途中にも書きましたが、stickyを使えば上端固定メニューも下端固定メニューも結構簡単に実装できます。
ですが、適当に書いたHTMLと、それを無理矢理デザインに寄せたCSSの場合は、大体うまく行かずにどこかが崩れます。そんな場合は、どんなに詳しくてもCSSだけで対処するのではなく、HTMLのタグ構成から見直してはどうでしょう？ それくらいサイトデザインとHTMLは密接な関係にあるんですよ！というお話でした。
あるいは全タグにidを振ってデザイン管理しましょう！(ﾏﾃ
体形を見ただけで３サイズを当てられる特技は無くてもいいですから、
適当なサイトを眺めるだけで、おおよそのタグ構成が想像できるようになると良いですよね！