小野市のWEB職人によるブログ

CSSのpositionプロパティを使ったフッターやヘッダーの絶対位置への固定表示

CSSのpositionプロパティを使ったフッター部分の絶対位置への固定表示の方法

ホームページのフッター部分をに常に見える状態に固定表示させて、本文その他をスクロールさせる方法です。フッターを固定表示することで常に見せておきたい文章や画像を表示しておく事ができますので、お店の電話番号や所在地、またはお問合せ先などを載せておくと良いかもしれません。

実際にフッター固定表示を使っておられるサイトさんは、こちら
画面をスクロールしてもフッターは常に見えている状態がお分かり頂けると思います。

絶対位置への固定表示方法

フッターのCSSに以下のプロパティを追加します。
position: fixedで絶対位置の指定+固定となります。
!importantでスタイルの読み込みを優先させています。

width: 100%;                  /* 横の幅を100% */
position: fixed !important;   /* 絶対位置指定+固定 */
bottom: 0px;                  /* 絶対位置指定(左0px,下0px) */

応用すればヘッダーも常に固定表示が可能となります。

以上、最後まで見て頂きありがとうございます(‘◇’)ゞ

にほんブログ村 地域生活(街) 関西ブログへ

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

郵便番号から住所検索

-

Address

ブログ

にほんブログ村 地域生活(街) 関西ブログへ