Pug使用時にHTMLのソースコード上で改行する
Pugでaタグやspanタグを続けて入力すると、コンパイルしたHTMLのソースコード上だと、改行されずに1行で出力されま...
Pugの記事一覧
Pugでimgタグにwidthとheightを自動付与する
レイアウトシフト対策としてimgタグのwidthとheightは設定した方がよいですが、サイズを確認して手入力だと手間が...
Pugのmixinの引数をオブジェクト形式で設定する
Pugのmixinを作成する際、複数設定した引数の一部だけ使いたいということがあったので、オブジェクト形式で設定する方法...
webpack環境のPugで変数を別ファイルでも使用できるようにする
Gulpからwebpackに環境を移した際、別ファイルで定義した変数を使用できないということがあったので、その際の対応方...
webpackでPugを使用する
webpackの環境でPugを使用する方法を試してみます。...
pugでpictureタグのmixinを作成する
PCとSPでの画像の出しわけやwebpの対応でpugのmixinを作成する機会が度々あったので、作成方法をメモしておきま...
Nuxt.jsでPugを使用する
Nuxt.jsでPugを使用する方法をメモ。...
pugでstyleタグを直接記述する
サイト内のページURLリストをHTMLで作る場合など、サイト構築とは別でそのページのみCSSを使いたいということがあった...
Pugでcheckedやdisabled属性を設定する
Pugでcheckedやdisabledなどの論理属性を設定する方法をメモ。...
Pugのif文で変数がない場合の対応
Pugのif文で変数を使用する際、変数が設定されているかの判別で少し迷うことがあったのでメモ。...
PugでHTMLタグ部分に変数を使用する
Pugを使用する際、HTMLタグ部分で変数を使って出し分けたいことがあったので、変数を使用する方法を試してみました。...
PugをHTMLで記述する
基本的にはHTMLタグで記述して、一部だけPugのインクルードの機能などを使いたいということがあったので、可能かどうか試...
スタイルガイドジェネレーターの「Fractal」でpugを使用する
fractalのコンポーネントでpugを使う方法をメモ。 環境は以前投稿したgulpを使った環境をベースにします。...
Pugでmixinを使用する
Pugでmixinを使用する方法をメモ。...
PugでSVGを使用する
PugでSVGを使う時に少し迷ったのでメモ。...
Pugでコンパイル後の内容をコメントアウトする
PugをコンパイルしたHTMLで、一部コードをコメントアウトしたい時に少し迷ったのでメモ。...
Pugでタグの外にテキストを出力する
Pugでチェックボックスとテキストを並べて出力しようとしたときに少し迷ったのでメモ。...
Pugとgulp-dataを使ってmetaの内容をjsonで管理する
gulp-dataを使って、Pugで使うmetaの内容をjsonで管理するようにしてみます。...
Pugでコメントアウトをする
PugでHTMLにレンダリングされないコメントアウトを記述しようとして迷ったのでメモ。...
Pugで条件分岐やループを使ってみる
Pugのテンプレート内でfor文やeach文、if文、switch文などを使ってみます。...