09 ホームページ中級講座 footerを下部に固定

2020年4月14日2023年12月22日

URLをコピーしました！

動画で学ぶWebデザイン教室　 Fuku…

08 ホームページ中級講座 floatを使った周り込み | 動画で学ぶWebデザイン教室　 Fukuokamiyako 前回「07 ホームページ中級講座」の続きとなります。 HTMLとCSSは前回のファイルを引き続き使いますので用意しておきましょう。ここでは、cssの周り込みのプロパティ「flo…

今回は、ページ一番下に常に配置するfooter要素を、一番最下部に固定する状態を作ります。

最近のWebサイトは、スマホサイトの影響もあって、縦に長いLP（ランディングページ）が多く作られています。Webサイトの場合、トップページはコンテンツが集中しやすいデザインが多いのですが、サブページに至っては、コンテンツが少ないが、ページは存在する・・・となると、一番下にあるfooter 部分が上にあがってくるので、多少不恰好に見えてしまいます。

そこで、footer 上のコンテンツ部分の縦の長さがそこまで長くない場合、footer 部分を常に下に固定しておきたい場合の設定です。

footer って、あのcopy right とかがある下のところですか

そうです。footer 上の部分の縦の長さがそんなに長くない時　footer が上で終わると格好が悪いので、下に固定しておきたい場合によく使います。

footer 固定を行う場合のHTMLマークアップ

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ネットワークサービス　株式会社</title>
    <link rel="stylesheet" href="style_a.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,700,800&display=swap" rel="stylesheet">
</head>
<body>
　　　　　　　<!--class=contentをbody 直下に指定　footer の下で</div>は終了-->
    <div class="content">
        <header>
            <h1>NewWorkService</h1>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Service</a></li>
                    <li><a href="#">Access</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
            </nav>
        </header>
        <article>
            <div class="box1">
                <p>枠組みも対象文を列挙し記事ますんため、引用するられるフリーを検証毎厳格の活用内容をするれても満たすあっ、記事の原則は、利用作るメディアと陳述しこととして著作自由ないでてなりますあれ。しかし、疑義の出版作も、ペディアの決議即し前記有効ある原則を一見し、そのルールであたりてtheで依頼掲げることが決議よれれます。ただしで、引用下が利用されるている文章をそのままさ満たすことは、決議でなけれ、場合に対しては該当日の既存としてライセンス上の問題は含むことに、本投稿会は、可能の引用をするて要件に制裁さたておくますます。</p>
           
                <p>方針の方針が公開するれる以下を重要ます目的ですばとするから、企業を著作するます状態を文章ないを既存するて、さらにありななか。著作権が削除あるれん言語だあるば問題はたかもしなます。ただし、既存権と該当さればください文章を主題なで修正行わば、「文献が、これでも著作が明瞭」ますFree文字をしに対する条件の形式を引用示しでます。</p>
            </div>    
        </article>
        <footer>
            <p><small>
Copyright © 2019 NET WORK SERVICE .All rights reserved.
</small></p>
        </footer>
    </div>
</body>
</html>

footer を含む　外側にdiv class=”content”

.content {
     width: 800px;
     margin: 0 auto;
     border-left: 5px solid #999;
     border-right: 5px solid #999;
　　　　　　　　　/*.content が基準となるように relativeを指定*/
     position: relative;
　　　　　　　　　/*一番小さい高さがブラウザの高さ100vh*/
     min-height: 100vh;
     padding-bottom: 100px;
     box-sizing: border-box;
     }

一番下のfooter部分に

footer{
     background-image: linear-gradient(
     to bottom,
     #ddd,#fff,#aaa);
     padding:1em 0;
     position: absolute;
     bottom:0;
     width:790px;
 }

position:absolute というのが位置が絶対位置になった。ということで、今までのような相対位置　margin とかで設定していたものから離れて、絶対的にこの位置にいるというポジションです。これがbottom:0 下から0の位置にいるということで、ブラウザの下の位置にいるということになります。