Help us understand the problem. What is going on with this article?

Pugの記法まとめ

HTMLをPugで書くメリット

  • 閉じタグを書かなくて良いので、書き忘れることが無くなる
  • Classを「.」、IDを「#」と書くので、Class名やID名変更時の置換が楽になる
  • ヘッダー、フッターなど共通部分を別ファイルで管理できる
  • 変数や条件分岐ができる

HTMLをPugで書くデメリット

  • 変換する環境が必要

変換は、npm-scriptsやGulpを使いましょう。npm-scriptsの記事書きました。
GUIでの変換が良い方は、Preprosがオススメです。

Pug←→HTML変換サービス

環境を作らずにPugの書き方を練習できます。

HTMLをPugに変換

html2pug - convert your html code to pug
https://html2pug.now.sh/

PugをHTMLに変換

PugHtml - Pug and HTML online converter in realtime
https://pughtml.com/

タグ

  • タグ名はHTMLタグになる タグ要素名はそのまま記述
  • 要素ごとに改行する
  • タグの中のテキストは半角スペース1つ空けて、続けて書く

タグの中で特殊なもの

div

divタグは省略可能

pug
 .test ああああ

↓変換

html
<div class="test">ああああ</div>

br

pug
p ああああ
  br
  | ああああ

↓変換

html
<p>ああああ<br>ああああ</p>

doctype宣言

pug
doctype html

↓変換

html
<!DOCTYPE html>

入れ子(子要素)

改行せずに入れ子

「:」 + 半角スペース

pug
li: a(href="#") あああ

↓変換

html
<li><a href="#">あああ</a></li>

改行して入れ子

改行をしてインデントをつければ入れ子になる
インデントとタブが混在すると変換時にエラーになるので、EditorConfigなどで整形すると良いです。

pug
 div ああああ
 div ああああ

 div ああああ
  div ああああ

↓変換

html
<div>ああああ</div>
<div>ああああ</div>

<div>ああああ
  <div>ああああ</div>
</div>

IDとClass

Classは「.」、IDは「#」で表します。
classやidは要素に続けて記述します。

pug
section#main
.content.picture

↓変換

html
<section id="main"></section>
<div class="content picture"></div>

属性

属性は丸括弧内に記述する
属性と値は要素に続けて(attr=”value”)という形で記述
IDとClassも属性なので、同じように書くことができます。

pug
link(rel="stylesheet" link="css/style.css")
script(src="js/main.js")
a(href="#") Top
input(
  type="radio"
  name="test"
  checked
)

↓変換

html
<link rel="stylesheet" link="css/style.css"/>
<script src="js/main.js"></script>
<a href="#">Top</a>
<input type="radio" name="test" checked="checked"/>

エスケープ

イコール(=)を使って5種類の記号「&」 「<」「 >」「"」「'」をエスケープできます。
パイプライン(|)が入るとエスケープは解除されます。

pug
p= "& < > > >"
p "& < > > >"

↓変換

html
<p>&amp; &lt; &gt; &gt; &gt;</p>
<p>"& < > > >"</p>

外部ファイルの読み込み

includeで共通化したファイルを挿入できます。
相対パスで指定します。(ルートパスでは指定できません)

pug
include directory/header.pug

HTMLをそのままPugファイル内で使う

HTMLはドット(.)で終わる要素の中に入れておけばそのまま出せます。

pug
.
  <iframe width="560" height="315" src="https://www.youtube.com/embed/9xLvF6xoG30" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

HTML以外、例えばphpも書くことができます。(拡張子はphpにする必要があります)

変数

head内のmeta情報など、ページごとに違う内容の場合は、変数を使う事ができます。
定義はページの一番上に書きます。

pug
- var pagename='ページ名'

title #{pagename}

html
 <title>ページ名</title>

プロパティで変数を使う

「- var 変数名 = 変数の中身」で定義

pug
- var classname='aaa'

div(class=classname)
div(class=`${classname}`)

↓変換

html
<div class="aaa"></div>
<div class="aaa"></div>

ループ

for

pug
- for (var x = 0; x < 5; x++)
  li number#{x}

↓変換

html
<li>number0</li>
<li>number1</li>
<li>number2</li>
<li>number3</li>
<li>number4</li>

each

pug
each value in ["yamada", "suzuki", "sato", "ito", "tanaka"]
  li #{value}

↓変換

html
<li>yamada</li>
<li>suzuki</li>
<li>sato</li>
<li>ito</li>
<li>tanaka</li>

条件分岐

if

pug
 - var name = '山田'

 if name=='鈴木'
   p 私は鈴木です
 else if name=='佐藤'
   p 私は佐藤です
 else
   p 私は鈴木でも佐藤でもありません

↓変換

html
 <p>私は鈴木でも佐藤でもありません</p>

switch

pug
- var name = '山田'

case name
  when '鈴木'
    p 私は鈴木です
    break
  when '佐藤'
    p 私は佐藤です
    break
  default
    p 私は鈴木でも佐藤でもありません

↓変換

html
<p>私は鈴木でも佐藤でもありません</p>

コメントアウト

コメントにはHTMLとして出力されるものと、されないものがある

pug
// HTMLに出す
//- HTMLに出さない

↓変換

html
<!-- HTMLに出す-->
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away