元Webデザイナー兼コーダーの備忘録

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

トップ > HTML入門 > Pugの学習メモ

Pugの学習メモ

HTML入門

Pugは、HTMLの拡張言語です。pug-cliを使って、Pugを試します。Pugはそのままではブラウザに表示されません。HTMLに変換する必要があります。

インストール

npm global add pug-cli

準備

Pugファイルを保存すると自動でHTMLファイルを出力するコマンド。

pug -w ./ -o ./html -P
  • オプション
    • -w:監視
    • -o:出力
    • -P:整形

DOCTYPE宣言

HTMLの場合

doctype html
<!DOCTYPE html>

XMLの場合

doctype xml
<?xml version="1.0" encoding="utf-8" ?>

HTML Transitionalの場合

doctype transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

基本

  • インデントで入れ子関係を表現する
  • タグ名 テキストでテキストを挿入する
    • ex.)h1 Hello HTML!
doctype html
html
  head
  body
    h1 Hello HTML!
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>Hello HTML!</h1>
  </body>
</html>

テキストを複数行記述する場合

改行したあとの最初の英単語をHTMLタグに変換する問題がある。

doctype html
html
  head
  body
    h1 Hello HTML!
    p This is paragrah tag
      and this is a new line
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>Hello HTML!</h1>
    <p>This is paragrah tag
      <and>this is a new line</and>
    </p>
  </body>
</html>

以下のように記述すると良い。

タグ名.
  テキスト
  テキスト

タグ名の後にドット(.)を付ける。次の行でインデントして、テキストを書く。

doctype html
html
  head
  body
    h1 Hello HTML!
    p.
      This is paragrah tag
      and this is a new line
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>Hello HTML!</h1>
    <p>
      This is paragrah tag
      and this is a new line
    </p>
  </body>
</html>

リストタグの書き方

doctype html
html
  head
  body
    ul
      li リスト #1
      li リスト #2
      li リスト #3
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <ul>
      <li>リスト #1</li>
      <li>リスト #2</li>
      <li>リスト #3</li>
    </ul>
  </body>
</html>

IDとCLASS

doctype html
html
  head
  body
    h1#pageTitle タイトル
    p.big-para.
      1行目のテキスト
      2行目のテキスト
    p.big-para.
      Here is some MORE text for
      2行目のテキスト
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1 id="pageTitle">タイトル</h1>
    <p class="big-para">
      1行目のテキスト
      2行目のテキスト
    </p>
    <p class="big-para">
      1行目のテキスト
      2行目のテキスト
    </p>
  </body>
</html>

タグを省略してID、CLASSを付ける場合

タグを省略してIDまたはCLASSを書くと、divタグの属性として出力される。省略時のデフォルトは、divタグになる。

doctype html
html
  head
  body
    #myDiv
    .display-box
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div id="myDiv"></div>
    <div class="display-box"></div>
  </body>
</html>

属性(attribute)の指定

  • タグ名(属性=値)で指定する
  • スペース区切りで複数の属性を指定できる
doctype html
html
  head
  body
    input(type="password" name="pwd")
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <input type="password" name="pwd">
  </body>
</html>

属性値にJavaScriptを埋め込む

doctype html
html
  head
  body
    input(type="password" name="pwd" data-js=`${ 5 > 2 ? "OK" : "NOT OK!" }`)
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <input type="password" name="pwd" data-js="OK">
  </body>
</html>

data-js=`${ 1 > 2 ? "OK" : "NOT OK!" }`

にすると

doctype html
html
  head
  body
    input(type="password" name="pwd" data-js=`${ 1 > 2 ? "OK" : "NOT OK!" }`)
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <input type="password" name="pwd" data-js="NOT OK!">
  </body>
</html>

データ属性の値を切り替えられる。

JavaScriptのコードを記述する

  • 行頭に-を書く
doctype html
html
  head
  body
    - const myClasses = ["class1", "class2", "class3"]
    div(class=myClasses)
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div class="class1 class2 class3"></div>
  </body>
</html>

初期のクラスを指定する

タグに初期のクラスを指定できるし、クラスリストにクラスを追加できる。

doctype html
html
  head
  body
    - const myClasses = ["class1", "class2", "class3"]
    div.my-div(class=myClasses)
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div class="my-div class1 class2 class3"></div>
  </body>
</html>

インラインスタイルの指定

style属性の値をJavaScriptのオブジェクトとして定義する。

doctype html
html
  head
  body
    - const myStyles = {"color": "red", "background-color": "blue"}
    div(style=myStyles)
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div style="color:red;background-color:blue;"></div>
  </body>
</html>

imgタグの属性の指定

doctype html
html
  head
  body
    - const myAttributes = {"src": "myPhoto.png", "alt": "写真"}
    img&attributes(myAttributes)
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <img src="myPhoto.png" alt="写真">
  </body>
</html>

属性とboolean

HTMLのバージョンがtransitionalの場合、属性値にbooleanの値が使える。

doctype transitional
html
  head
  body
    input(type="text" disabled=false)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head></head>
  <body>
    <input type="text"/>
  </body>
</html>

inputタグのdisabled属性をtrueにすると以下のようになる。

input(type="text" disabled=true)
<input type="text" disabled="disabled"/>

CSS

index.htmlファイルと同じ階層にstyle.cssファイルを作成する。

CSSファイルを読み込む

/* style.css */
body{
  background: black;
  font-size: 36px;
  color: white;
}

doctype html
html
  head
    link(rel="stylesheet" href="style.css")
  body
    p これはHTMLファイルです!

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p>これはHTMLファイルです!</p>
  </body>
</html>

styleタグ

doctype html
html
  head
    style.
      p{
        color: red;
        text-decoration: underline;
      }
  body
    p これはHTMLファイルです!
<!DOCTYPE html>
<html>
  <head>
    <style>
      p{
        color: red;
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <p>これはHTMLファイルです!</p>
  </body>
</html>

インラインCSS

doctype html
html
  head
  body
    p(style="text-align:center; text-transform:uppercase;") これはHTMLファイルです!
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <p style="text-align:center; text-transform:uppercase;">これはHTMLファイルです!</p>
  </body>
</html>

スタイルをJavaScriptのオブジェクトで定義する。

doctype html
html
  head
  body
    - const pStyles = { "text-align": "center", "text-transform": "uppercase" }
    p(style=pStyles) これはHTMLファイルです!
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <p style="text-align:center;text-transform:uppercase;">これはHTMLファイルです!</p>
  </body>
</html>

繰り返し処理

doctype html
html
  head
  body
    h1 For\Each Loop
    each n, i in [50, 2, 3, 4, 5]
      p= n + " - " + i
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>For\Each Loop</h1>
    <p>50 - 0</p>
    <p>2 - 1</p>
    <p>3 - 2</p>
    <p>4 - 3</p>
    <p>5 - 4</p>
  </body>
</html>

nは値、iはインデックス。

配列の場合

doctype html
html
  head
  body
    h1 For\Each Loop
    - const names = ["Hoge", "Fuga", "Piyo"];
    each n, i in names
      p= n + " - " + i
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>For\Each Loop</h1>
    <p>Hoge - 0</p>
    <p>Fuga - 1</p>
    <p>Piyo - 2</p>
  </body>
</html>

オブジェクトの場合

doctype html
html
  head
  body
    h1 For\Each Loop
    - const grade = {"国語": 85, "数学": 76};
    each n, i in grade
      p= n + " - " + i
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>For\Each Loop</h1>
    <p>85 - 国語</p>
    <p>76 - 数学</p>
  </body>
</html>

for

doctype html
html
  head
  body
    h1 For\Each Loop
    - const grade = {"国語": 85, "数学": 76};
    for n, i in grade
      p= n + " - " + i
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>For\Each Loop</h1>
    <p>85 - 国語</p>
    <p>76 - 数学</p>
  </body>
</html>

for-else

doctype html
html
  head
  body
    h1 For\Each Loop
    for n, i in []
      p= n + " - " + i
    else
      strong "値なし"
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>For\Each Loop</h1><strong>"値なし"</strong>
  </body>
</html>

条件分岐

ログイン済みか、最終ログインはいつかを確認する。ログイン済みの場合、以下のようになる。

doctype html
html
  head
    title Conditionals in Pug
  body
    h2 My Web Application
    - let user = { name: "Hoge", loggedIn: true, lastLogin: 6 }
    if user.loggedIn
      p
        | Welcom back,
        strong #{ user.name }
    else if user.lastLogin < 10
      p Your last login was #{ user.lastLogin } minutes ago
      p
        a(href="/login") Log In Agrain
    else
      a(href="/login") Log In
<!DOCTYPE html>
<html>
  <head>
    <title>Conditionals in Pug</title>
  </head>
  <body>
    <h2>My Web Application</h2>
    <p>Welcom back,<strong>Hoge</strong></p>
  </body>
</html>

ログインしていない場合、以下のようになる。

- let user = { name: "Hoge", loggedIn: false, lastLogin: 6 }
<!DOCTYPE html>
<html>
  <head>
    <title>Conditionals in Pug</title>
  </head>
  <body>
    <h2>My Web Application</h2>
    <p>Your last login was 6 minutes ago</p>
    <p><a href="/login">Log In Agrain</a></p>
  </body>
</html>

ログインしておらず、最終ログインから11分以上経っていたら以下のようになる。

- let user = { name: "Hoge", loggedIn: false, lastLogin: 11 }
<!DOCTYPE html>
<html>
  <head>
    <title>Conditionals in Pug</title>
  </head>
  <body>
    <h2>My Web Application</h2><a href="/login">Log In</a>
  </body>
</html>

場合分け

doctype html
html
  head
    title Caser Statement in Pug
  body
    // orderStatus => Pending || In_Transit || Completed
    - const orderStatus = 'Random'

    case orderStatus
      when 'Pending'
        p 注文が確定され、まもなく発送されます。
      when 'In_Transit'
        p ご注文は現在進行中です。まもなくお手元に届くはずです!
      when 'Completed'
        p ご注文が完了しました。
      default
        p 申し訳ございません。ご注文に何が起こったのかわかりません...
<!DOCTYPE html>
<html>
  <head>
    <title>Caser Statement in Pug</title>
  </head>
  <body>
    <!-- orderStatus => Pending || In_Transit || Completed-->
    <p>申し訳ございません。ご注文に何が起こったのかわかりません...</p>
  </body>
</html>

whenに指定する値

whenに指定する値は、数値でも良い。

doctype html
html
  head
    title Caser Statement in Pug
  body
    // orderStatus => Pending || In_Transit || Completed
    - const orderStatus = 2

    case orderStatus
      when 1
        p 注文が確定され、まもなく発送されます。
      when 2
        p ご注文は現在進行中です。まもなくお手元に届くはずです!
      when 3
        p ご注文が完了しました。
      default
        p 申し訳ございません。ご注文に何が起こったのかわかりません...
<!DOCTYPE html>
<html>
  <head>
    <title>Caser Statement in Pug</title>
  </head>
  <body>
    <!-- orderStatus => Pending || In_Transit || Completed-->
    <p>ご注文は現在進行中です。まもなくお手元に届くはずです!</p>
  </body>
</html>

インクルード

HTMLの一部を共通部品化する。ここでは、ナビゲーションを部品化する。

// index.pug
doctype html
html
  head
    title Include in Pug
  body
    h1 Company Name
    nav
      a(href="index.html") Home
      a(href="about.html") About us
      a(href="#") Contact Us
<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Include in Pug</title>
  </head>
  <body>
    <h1>Company Name</h1>
    <nav><a href="index.html">Home</a><a href="about.html">About us</a><a href="#">Contact Us</a></nav>
  </body>
</html>

// about.pug
doctype html
html
  head
    title About - Include in Pug
  body
    h1 Company Name
    nav
      a(href="index.html") Home
      a(href="about.html") About us
      a(href="#") Contact Us
    h3 About Us
<!-- about.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>About - Include in Pug</title>
  </head>
  <body>
    <h1>Company Name</h1>
    <nav><a href="index.html">Home</a><a href="about.html">About us</a><a href="#">Contact Us</a></nav>
    <h3>About Us</h3>
  </body>
</html>

共通部品を作る

  • includesフォルダの作成
  • includesフォルダの配下に、nav.pugを作成する
// includes/nav.pug
h1 Company Name
nav
  a(href="index.html") Home
  a(href="about.html") About us
  a(href="#") Contact Us
// index.pug
doctype html
html
  head
    title Include in Pug
  body
    // include includes/nav.pug
    include includes/nav
// about.pug
doctype html
html
  head
    title About - Include in Pug
  body
    include includes/nav
    h3 About Us

mixin

mixinは、関数のようなもの。ここでは、コメントをmixinに定義してみる。

mixin comment(commentData)
  .comment
    .date= commentData.date
    .author= commentData.author
    .text= commentData.text

doctype html
html
  head
    title Mixins in Pug
    style.
      .comment{
        font-family: sans-serif;
        line-height: 1.5;
        padding: 10px;
        border: 1px solid #555555;
        width: 250px;
      }
      .date{
        font-size: 85%;
        text-align: right;
      }
      .author{
        font-size: 110%;
        font-weight: bold;
      }
      .text{
        font-size: 100%;
      }
  body
    - const c = { date: '04-02-2022', author: 'ほげ', text: 'コメントです。' }
    +comment(c)
    - const c1 = { date: '04-02-2022', author: 'ふが', text: 'こんにちは。' }
    +comment(c1)
<!DOCTYPE html>
<html>
  <head>
    <title>Mixins in Pug</title>
    <style>
      .comment{
        font-family: sans-serif;
        line-height: 1.5;
        padding: 10px;
        border: 1px solid #555555;
        width: 250px;
      }
      .date{
        font-size: 85%;
        text-align: right;
      }
      .author{
        font-size: 110%;
        font-weight: bold;
      }
      .text{
        font-size: 100%;
      }
    </style>
  </head>
  <body>
    <div class="comment">
      <div class="date">04-02-2022</div>
      <div class="author">ほげ</div>
      <div class="text">コメントです。</div>
    </div>
    <div class="comment">
      <div class="date">04-02-2022</div>
      <div class="author">ふが</div>
      <div class="text">こんにちは。</div>
    </div>
  </body>
</html>

mixin+条件分岐

管理人によるコメントだった場合、そのことを表示する。

mixin comment(commentData)
  .comment
    if commentData.postedByAdmin
      em (Posted by Admin)
    .date= commentData.date
    .author= commentData.author
    .text= commentData.text

doctype html
html
  head
    title Mixins in Pug
    style.
      .comment{
        font-family: sans-serif;
        line-height: 1.5;
        padding: 10px;
        border: 1px solid #555555;
        width: 250px;
      }
      .date{
        font-size: 85%;
        text-align: right;
      }
      .author{
        font-size: 110%;
        font-weight: bold;
      }
      .text{
        font-size: 100%;
      }
  body
    - const c = { postedByAdmin: true, date: '04-02-2022', author: 'ほげ', text: 'コメントです。' }
    +comment(c)
    - const c1 = { date: '04-02-2022', author: 'ふが', text: 'こんにちは。' }
    +comment(c1)
<!DOCTYPE html>
<html>
  <head>
    <title>Mixins in Pug</title>
    <style>
      .comment{
        font-family: sans-serif;
        line-height: 1.5;
        padding: 10px;
        border: 1px solid #555555;
        width: 250px;
      }
      .date{
        font-size: 85%;
        text-align: right;
      }
      .author{
        font-size: 110%;
        font-weight: bold;
      }
      .text{
        font-size: 100%;
      }
    </style>
  </head>
  <body>
    <div class="comment"><em>(Posted by Admin)</em>
      <div class="date">04-02-2022</div>
      <div class="author">ほげ</div>
      <div class="text">コメントです。</div>
    </div>
    <div class="comment">
      <div class="date">04-02-2022</div>
      <div class="author">ふが</div>
      <div class="text">こんにちは。</div>
    </div>
  </body>
</html>

参考サイト

おすすめ記事

HTML入門のまとめ記事なら... » HTML入門まとめ

» HTML入門のまとめはこちらです。