MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
【HTML / CSS】Pugの備忘録 / 基本・応用

【HTML / CSS】Pugの備忘録 / 基本・応用

公開日:2019年09月01日
最終更新日:2019年09月01日
オンスタ運営
ホーム > スニペット > 【HTML / CSS】Pugの備忘録 / 基本・応用
このエントリーをはてなブックマークに追加

こんにちわ!みなさんいかがお過ごしでしょうか?遅咲きのエンジニア、ひさしです。
今回の記事はPug(パグ)です。
この会社に入って、1年ちょっとになりますが、前職(職場)と、現在の環境とは全く異なる環境でのコーディングとなり、当初ものすごく苦労したので、メモとして残しておいたものをご紹介しようと思います。今更感、満載ですがお付き合いください!

Pugとは

HTMLのコーディングをするとき、メタ情報やヘッダーのような共通部分を効率的に管理するためのテンプレートエンジン。
テンプレートエンジンというのは、特定の処理をおこなうテンプレートに表示させたいデータ(文字列やタグなど)を渡すことで、無駄なくHTMLを作成していく仕組みのことです。
コンパイルして、htmlファイルにして出力します。

公式ドキュメント
https://pugjs.org/api/getting-started.html

Pugの特徴

  • 閉じタグ(<>)がなく、インデントで階層を表現する
  • クラスやIDの指定がCSSの記法と同じ(.や#)
  • JavaScriptが書けるので変数やif文などが使える
  • 別ファイルをインクルード(ファイルの中身だけ取得)できる

Pugの記法

  • タグ名はHTMLタグになる
  • 改行をしてインデントをつければ入れ子になる
  • インライン要素や改行にはパイプライン(|)を使う(ここだけ慣れが必要)
  • HTMLはドット(.)で終わる要素の中に入れておけば解釈される
  • 属性は丸括弧内に記述する
  • クラス属性はドット(.)、ID属性はシャープ(#)で表す
  • コメントにはHTMLとして出力されるものと、されないものがある
  • イコール(=)を使えばエスケープできる
  • インクルード(include [ファイル名へのパス])で共通化したファイルを挿入できる

まずは、出力結果を確認したい方、以下のサイトがおすすめです。
簡単に、Pug ←→HTMLの変換ができます。
Pug ← HTML
https://html2pug.now.sh/
Pug → HTML
https://pughtml.com/

Pugと検索すると、Jade(ジェード)と出てくる事がありますが、名前が変更になってPugになったようです。

Pugの基本

インデント記法でのコーディング


//インデント記法でコーディング
div


インデントで階層を表現


//id,classはタグのあ後に続けて書く事が出来る
div#id.class
  p テキスト
ul.list
  li リスト
  li リスト


テキスト

  • リスト
  • リスト

インライン要素の書き方


//直接HTMLに記述
p pタグですspanタグですpタグの続きです

//インターポレーション(#[ ])で記述
p pタグです#[span.span spanタグです]pタグの続きです

//パイプライン( | )を使って、複数行で書く
p pタグです
  span spanタグです
  br
  | pタグの続きです





pタグですspanタグですpタグの続きです

pタグですspanタグですpタグの続きです

pタグですspanタグです
pタグの続きです

HTMLをそのままPugファイルに貼り付けたい場合



//ドット( . )を入れてから改行
.
  

//classを入れる事も可能
.content.
  







これから、少しずつPugの記述方法について紹介していきたいと思います。

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。