pugとsassのオレオレテンプレート

6833 ワード
HTML CSS Sass pug HTML テキストリンク

たんぽぽ乗せは辛いよ

めったに新規サイトを作成しないたんぽぽ乗せの為のオレオレスニペットです
たんぽぽはせっかく覚えたモダンな組み方をすぐ忘れる……

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の高さが無くてもなんとかできる方法が知りたいけども、ここまで指定がないのも珍しいので今のところは大丈夫かな