創報堂ブログ

2020.04.04 oku

今更だけどpugを触る

Pug(パグ)というのは、htmlを効率的に書くためのテンプレートエンジンです。

拡張子は「.pug」となります。

 

例えば以下の様なhtmlがあった場合、

Pugなら以下のようになります。

classやidがあればdivは省略可能です。

ちなみに↑のhtmlのほう、imgタグを囲ったdivの閉じタグを忘れています。

こういうのになかなか気づかないもんですが、Pugなら閉じタグは必要ありません。

 

また、コーディングが終わった後に、最初のdivは横幅100%にして、画像とテキストをflexでいい感じにしたいっていうときがあります。

htmlの場合divで囲ってまた閉じて・・・とかします。今度はclassの閉じ(“)を忘れてるぞ!ポンコツか!

Pugの場合テキストと画像のインデントを下げてその上に新しく箱(div)を足すだけです。classも閉じるとかそういうの要りません。

あとはgulpなりpreprosなりでコンパイルすればおっけーです。

 

他にも変数の使用や条件分岐、ヘッダー用pugを作ってインクルードさせることも可能なので便利です。

お問い合わせ

ご相談や制作についてのご質問、その他ご不明な点などございましたら どうぞお気軽にお問い合わせくださいませ。

  • TEL:079-284-9304 受付時間 平日9:00~18:00
  • お問い合わせフォーム
有限会社創報堂

兵庫県姫路市にあるホームページ制作・システム開発の総合クリエイティブ会社
有限会社創報堂

〒670-0932 兵庫県姫路市下寺町129 Nビル2F
TEL 079-284-9304 FAX 079-284-9305

© 2005 SOUHOUDOU