#たんぽぽ乗せは辛いよ
めったに新規サイトを作成しないたんぽぽ乗せの為のオレオレスニペットです
たんぽぽはせっかく覚えたモダンな組み方をすぐ忘れる……
See the Pen VRXPPL by H.NOTSU (@H_NOTSU) on CodePen.
##とりまHTML基本
index.pug
doctype html
html(class="no-js" lang="ja")
head
meta(charset="utf-8")
meta(http-equiv="x-ua-compatible" content="ie=edge")
title タイトル
meta(name="description" content="説明文")
meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no")
link(rel="manifest" href="site.webmanifest")
link(rel="apple-touch-icon" href="icon.png")
//- favicon.icoはルートディレクトに配置
link(rel="stylesheet" href="css/normalize.css")
link(rel="stylesheet" href="css/main.css")
body
//- ここにサイトやアプリのコンテンツ
header
.container
main
.container
footer
.container
script(src="js/vendor/modernizr-3.5.0.min.js")
script(src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous")
script.
window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')
script(src="js/plugins.js")
script(src="js/main.js")
//- Google Analytics: UA-XXXXX-YをあなたのIDに変更
script.
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
script(src="https://www.google-analytics.com/analytics.js" async defer)
###参考サイト
最新版!Webページを作成する時のベースになる、最小限の構成で記述されたHTML5のテンプレート
上記リンクのソースをpug用に書き直して追加修正
##とりまCSS基本
main.scss
//normalize.css調整
p
margin: 0
ul
margin: 0
padding: 0
li
list-style: none
// mixin
// 共通パーツ
.container
margin: 0 auto
max-width: 960px
//専用パーツ
body
//要素少ない際のレイアウト用
display: flex
flex-direction: column
min-height: 100vh
header
height: [header-height]
width: 100%
.container
main
.container
//要素少ない際のレイアウト用
min-height: calc( 100vh - ( [header-height] + [footer-height] ) )
width: 100%
// paddingの外への飛び出しを防ぐ
box-sizing: border-box
padding:
footer
//要素少ない際のレイアウト用
margin-top: auto
height: [footer-height]
.container
###参考サイト
CSSでコンテンツが少なくてもフッターをウィンドウ下部に表示する方法
上記を参考に以下略
追加ポイントはmainのmin-height: calc( 100vh - ( [header] + [footer] ) )
要素が少ない際に背景がめいっぱい広がってくれなくて大変ブサイクになったので……
headerとfooterの高さが無くてもなんとかできる方法が知りたいけども、ここまで指定がないのも珍しいので今のところは大丈夫かな