skillup

技術ブログ

UI デザイン

固定されたナビ(ヘッドとサイド)

投稿日:2016年1月11日 更新日:

boostrapでサイトを作るときにヘッダーとサイドバーを固定したいときについてメモします。

ヘッダーを固定したい場合

classにnav-fixed-topを入れてあげればOKです。

サイドバーを固定したい場合

div classにaffixを入れ、bootstrap.cssに下記のCSSを追加します。

参考リンク

Navbarとサイドバーに置いたNavを固定させる

bootstrapで基本的な固定サイドメニューを作成する

Bootstrap3で固定サイドバー(affix & scrollspy)を使用する

-UI, デザイン
-,

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

no image

CSSのレイアウト例 その4 グリッドレイアウト

本日はグリッドレイアウトについて。 このサイトだけ見ても多分、デザインのイメージはわかないと思います(汗) サイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザイン …

no image

ページレイアウトに関して

今回からは単一のページレイアウトの構成の考え方やテクニックについて。 一般的な傾向として、人間の視覚上の特徴というのは下記のような傾向があげられます。 人の視線は上から下、左から右へというのがディフォ …

no image

css写経学習で感じたこと

こっちのブログでも書いてますが、CSSを最近写経してて気づいたことがいろいろあるんでメモリます。 常時追加予定。 Contents1 全体2 レスポンシブ3 レイアウト4 list系5 display …

no image

ユーザーの行動パターン

ソフトウェアデザインにおいて必要な要素の列挙 Contents1 安全な探求2 即座の喜び3 最小限での充足4 途中での方針変更5 回答の先送り6 少しずつの組み立て7 習慣化8 空間的な記憶9 展望 …

no image

CSSはまりやすいポイント ※随時更新予定

CSSにてよく確認するのネタに関して Contents1 中央寄せ2 命名3 テーブル 中央寄せ vertical-alignを指定できるのは「インライン要素」と「テーブルセル」だけ text-ali …

アーカイブ