こんにちは、株式会社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#headerHTML
<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の書き方に慣れてしまえば「閉じタグが合わない」といったミスがなくなり非常に楽です。
次回は共通パーツの管理の方法について解説したいと思います。
