読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【プラグイン不要。超カンタンにフッターを固定する方法】

フッタをコンテンツ量が少ない時は最下部に固定表示、
コンテンツ量が多い時は成り行きで表示させるスタイルシートです。

わざわざプラグインを使うまでもありません。
プラグインを使うと、プラグイン自体の js ファイルや css ファイルの
読み込みが加わるのでページの表示が遅くなる要因になります。

CSSで簡単にできることはCSSで組んだほうが良いです。

■HTML

<body>
 
<main>
  メイン コンテンツ
</main>
 
<footer>
  フッタ
</footer>
 
</body>

CSS

html {
  min-height: 100%;
  position: relative;
}
 
body {
  margin-bottom: 5em;
}
 
footer {
  bottom: 0;
  height: 5em;
  position: absolute;
}

HTMLタグがページ全体を囲むように高さを100%まで確保しておいて、
フッターを絶対座標(absolute)による指定で必ずページの一番下に
ぴったり張り付くように配置します。

そして、bodyタグにマージンを適用してフッターの高さの分だけ
ページの一番下に余白を作ります。

そうすると、そこにフッターが収まるという発想です。

↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓

【1】CODEMYマンツーマンレッスン

codemy-lesson.office-ing.net
⇒30分無料相談あり
⇒知りたいことだけ学べる個人レッスン

▼レッスンの記録をご覧いただけます。
https://www.facebook.com/codemy.lesson/
 

【2】プログラミング講座CODEMY

office-ing.hatenablog.com
⇒動画と個別添削で学べるオンラインレッスン

自分でホームページやプログラムの制作やカスタマイズをできるようなりたい方が
業種・経験・地域を問わず参加されています。

講師実績

業界大手リクルート社が運営する総合学習サイト「おしえるまなべる」
2015年、パソコンジャンルで1位評価
2016年9月「ホームページ作成のツボとコツがゼッタイにわかる本」出版

講師が執筆した本が発売されました!

『ホームページ作成のツボとコツがゼッタイにわかる本』
定価: 2,400円(税別)出版社:秀和システム
 
Amazon購入ページはこちら!