Fox village by aki310

For the future of someone, somewhere

BootstrapによるHP製作についてのメモ

BootstrapはCSSの「フレームワーク」であり,このCSSJavascriptのコードを利用する事で初心者でも簡単にレスポンシブなWeb制作が可能.

欲しい機能を実装する時に,BootstrapのCSS構造体を探すだけで済み,一からCSSを組み合わせて実装する手間が省ける.

 

今回実装しようとした機能は,サブナビの位置をウィンドウが

スマホタブレットサイズではページ上部に固定

②PCサイズではページ左側かつページと共に移動(css的にはfixed)

というこのライブラリにないものである.

以下のサイトにほぼ答えがあった.

 

Bootstrapで固定サイドバーを作成(レスポンシブ対応)
http://note.chiebukuro.yahoo.co.jp/detail/n224852

 

しかし,これを実装した場合,タブレットサイズの時に,ナビバーの高さが変化する時にサイドナビを塗りつぶしてしまう問題が発生する.ナビを製作するコードの何らかの形で影響しているかと考えられる.