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

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/

cotolier_risa
良いと思ってもすぐ忘れるのでQiitaに記録していけたらなぁと思います。 ミスや不具合等ありましたらお気軽にご指摘いただけると助かります。
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした