search
LoginSignup
90

More than 3 years have passed since last update.

posted at

updated at

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

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/

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
90