Pugの記法を覚えてHTMLを効率よくコーディングする方法

こんにちは、株式会社Pentagonでコーダーをしているあきです。

前回の記事でPugをコンパイルする「prepros」を紹介しました。
今回はそのPugの基本的な記述方法について解説します。

【こんな人に読んで欲しい】

  • Pugの基本的な記法を知りたい
  • 静的HTMLを楽にマークアップしたい

【この記事を読むメリット】
Pugの基本的な記法が分かるようになります。
Pugを試してみたいという方は、ぜひ参考にしてみてください。

目次

Pugのメリット

Pugでコーディングをするメリットをまとめました。

  • 閉じタグ、山括弧が不要
  • インデントで構造を管理
  • 共通パーツを別ファイルで管理できる

Pugの導入

Pugはコンパイルさせる必要があります。
楽に導入したいという場合は前回の記事で紹介したpreprosがあるので、こちらの記事を参考にしてください。
ScssやPugをコンパイルしてくれる「Preoros」の紹介

Pugの基本的な記法

これからPugの基本的な記法を紹介します。
HTMLのような閉じカッコがなかったり、属性・クラスなどの記法がHTMLと違いますが
慣れるととても楽にコーディングを進めることが出来ます。

カッコなしで記述する

pug

p pugの記述の練習

HTML

<p>pugの記述の練習</p>

インデントを付けると入れ子になる

pug

ul
  li バナナ
  li リンゴ

HTML

<ul>
  <li>バナナ</li>
  <li>リンゴ</li>
</ul>

属性は「()」を付ける

pug

a(href="/") リンク

HTML

<a href="/">リンク</a>

ID属性は「#」を付ける

pug

header#header

HTML

<header id="header"></header>

クラス属性は「.」を付ける

pug

h1.title タイトル

HTML

<h1 class="title">タイトル</h1>

コメントの書き方

htmlに出力したくないコメントの場合

pug

//- コメント
p テキストテキスト

HTML

<p>テキストテキスト</p>

htmlに出力したいコメントの場合

pug

// コメント
p テキストテキスト

HTML

<!-- コメント-->
<p>テキストテキスト</p>

まとめ

今回はPugの基本的な記法について解説しました。
慣れないうちはちょっと大変かもしれませんが、Pugの書き方に慣れてしまえば「閉じタグが合わない」といったミスがなくなり非常に楽です。
次回は共通パーツの管理の方法について解説したいと思います。

採用情報はこちら
目次
閉じる