Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
90
Help us understand the problem. What is going on with this article?

More than 3 years have passed since last update.

@cotolier_risa

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/

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
90
Help us understand the problem. What is going on with this article?