Edited at

Pug(Jade)の基本記法について

More than 1 year has passed since last update.

Pug(jade)は独特の記法なので、最初ちょっと覚えるの大変ですよね。

これだけ覚えれば、普通のHTML書くのに困らない、

基本のコードをpickupしてまとめました。


はじめの一歩


  • <>不要、閉じタグ不要

  • タグの後ろにスペースをいれてタグ内テキスト

▼Pug(Jade)

p ほげほげ

▽HTML

<P>ほげほげ</P>


ネスト(入れ子)


  • 改行+インデントで要素の入れ子を作る

▼Pug(Jade)

ul

li アイテム
li アイテム

▽HTML

<ul>

<li>アイテム</li>
<li>アイテム</li>
</ul>

 


タグ内でテキストを改行する


  • 「 | 」を使う

▼Pug(Jade)

p 吾輩は猫である。

br
| 名前はまだない。
br
| どこで生れたかとんと見当けんとうがつかぬ。

▽HTML

<p>吾輩は猫である。<br>

名前はまだない。<br>
どこで生れたかとんと見当けんとうがつかぬ。
</p>


idやclassをつける


  • id=""不要、class=""不要

  • タグのすぐ後ろに、「#id名」、「.class名」でつける

  • divは省略できる

▼Pug(Jade)

#box

h1.title タイトル
p.lead ほげほげ

▽HTML

<div id="box">

<h1 class="title">タイトル</h1>
<p class="lead">ほげほげ</p>
</div>


属性の書き方


  • タグの後ろ()をつけて、内に書きます。

▼Pug(Jade)

a(href="https://google.com" target="blank") ほげリンク

img(src="./sample.img")

▽HTML

<a href="https://google.com" target="blank">ほげリンク</a>

<img src="./sample.img">


ネスト(入れ子)する時、改行とインデントを省略する


  • タグの後ろにスペースを入れて「:」を入れるとネストできる

  • navを作る時に便利

  • 2つ以上も使用可能(ただし、テキストの後には「:」は使えないので注意)

▼Pug(Jade)

ul

li: a(href="#")
li: a(href="#"): span ほげ
li: a(href="#"): img(src="")

▽HTML

<ul>

<li><a href="#"></a></li>
<li><a href="#"><span>ほげ</span></a></li>
<li><a href="#"><img src=""></a></li>
</ul>


コメント


  • 2種類あり

  • コンパイルした後、HTMLに残すもの

  • コンパイルした後、HTMLに残さないもの(Pugでのみ表示)

▼Pug(Jade)

// コンパイルした後、HTMLに残すもの

//- コンパイルした後、HTMLに残さないもの(Pugでのみ表示)

▽HTML

<!-- コンパイルした後、HTMLに残すもの-->


ジェネレータを使う

やっぱり慣れなくてストレス溜まるー!って方はまずはこちらで感覚をつかむのをオススメします。


HTML -> Pug(Jade)を自動変換サイト

HTML to Jade converter

http://html2jade.aaron-powell.com/


Pug(Jade) -> HTML 自動変換サイト

Online Jade Template Editor

http://aramboyajyan.github.io/online-jade-template-editor/