00.cssフレームワークbulma用テンプレート:03.ヘッダーnavbarとフッターfooter
差分
このページの2つのバージョン間の差分を表示します。
次のリビジョン | 前のリビジョン | ||
00.cssフレームワークbulma用テンプレート:03.ヘッダーnavbarとフッターfooter [2020/11/24] – 作成 adash333 | 00.cssフレームワークbulma用テンプレート:03.ヘッダーnavbarとフッターfooter [2021/01/08] (現在) – [サンプルコード] adash333 | ||
---|---|---|---|
行 5: | 行 5: | ||
https:// | https:// | ||
フッターを、画面下に固定 | フッターを、画面下に固定 | ||
+ | |||
+ | < | ||
+ | .main { | ||
+ | display: flex; | ||
+ | min-height: 100vh; | ||
+ | flex-direction: | ||
+ | } | ||
+ | |||
+ | .section { | ||
+ | flex: 1; | ||
+ | } | ||
+ | And then adjust your template like this: | ||
+ | |||
+ | <body class=" | ||
+ | <div class=" | ||
+ | ... | ||
+ | </ | ||
+ | <footer class=" | ||
+ | ... | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== サンプルコード ===== | ||
+ | |||
+ | index.html | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta charset=" | ||
+ | <meta name=" | ||
+ | < | ||
+ | <link rel=" | ||
+ | <link rel=" | ||
+ | | ||
+ | <script defer src=" | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | <body class=" | ||
+ | | ||
+ | <nav class=" | ||
+ | <div class=" | ||
+ | <a class=" | ||
+ | Bulmaテンプレート | ||
+ | </a> | ||
+ | </ | ||
+ | </ | ||
+ | | ||
+ | <section class=" | ||
+ | <div class=" | ||
+ | <!-- ここにコンテンツを記載 --> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <footer class=" | ||
+ | <div class=" | ||
+ | <a href=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | style.css | ||
+ | < | ||
+ | .main { | ||
+ | display: flex; | ||
+ | min-height: 100vh; | ||
+ | flex-direction: | ||
+ | } | ||
+ | |||
+ | .section { | ||
+ | flex: 1; | ||
+ | } | ||
+ | |||
+ | .footer { | ||
+ | background-color: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | {{ : | ||
00.cssフレームワークbulma用テンプレート/03.ヘッダーnavbarとフッターfooter.1606236803.txt.gz · 最終更新: 2020/11/24 by adash333