Bootstrapを使ってみる。フッター編(Sticky footer)


Bootstrapを使ってみよう。フッター編(Sticky footer)

今回はBootstrapで用意されている、フッター「Sticky footer」を利用してみよう。
「Sticky footer」はメインコンテンツ部分の情報量が少なく高さが足りない場合でも画面最下部にフッターを配置できるというもの!


Bootstrap
*この記事はHTML・CSSの基本知識がある前提での備忘録のため説明に至らない部分があります、あしからず。

Bootstrap「Sticky footer」の利用HTML編

Bootstrapのサイトからコピー&ペーストする。
Bootstrapのサイトの上部グローバルナビメニューよりGetting startedを選択して開く。または、右サイドメニューより「Examples」を展開後「Custom components」をクリックする。

stickyfooter


「Custom components」のカテゴリにある「Sticky footer」をクリックしてページを表示し右クリックするなどしてページのソースを表示させる。
Sticky footerソースを表示した画面。
stickyfooter


Sticky footerを利用にするのに必要なタグをコピーしておく。
ソース画面内42行目~46行目までのfooterタグ。

コピーしたタグを自サイトに貼り付ける。
フッターなのでメインコンテンツ下部になるよう貼り付け。

stickyfooter

Bootstrap「Sticky footer」の利用CSS編

「Sticky footer」を利用するには別途CSSを用意する。
「Sticky footer」ページ、ソース内を見ると「Custom styles for this template」として「sticky-footer.css」がある。
stickyfooter


このCSSファイルを作成するため自サイトフォルダ内に新規作成しておく。
新規作成したCSSを開き以下のコードを貼り付ける。

作成したCSSを読み込むためのリンクを設定して終了。
stickyfooter


stickyfooter


この投稿へのコメント

コメントはありません。

コメントを残す

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

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL