Pug で checked / selected / disabled属性などを動的付与する - Qiita
背景 Pug（旧称Jade）で checked などの真偽型属性を条件に応じて付与したりしなかったりしたい場合、どうすれば良いのか。従業員に質問されて、たしかにちょっとわかりにくいかなと思ったので、今後同じところで迷う人のために書いておく。 前提 HTML5では checked 属性のような真偽型の属性に対して許容されている値は空文字から属性値と同じ値（大文字小文字は区別しない）のいずれかのみである（W3C）。またそれ以外の文字列（"false"など）が指定された場合は不正値として空文字と同じように処理される。 したがって実際のブラウザの挙動では以下はいずれもチェック状態となる。 <!-- 以下は正しい --> <input type="checkbox" value="1" checked> <input type="checkbox" value="1" checked=""> <in
pug（旧：Jade）を使い倒して時短マークアップしよう！
ページを量産したりチームでサイトを作る時pugという言語を使ってWebサイトを作っています。pug（旧：Jade）の特徴やメリット、基本的な使い方、導入方法（pug-cliとgulp）についてまとめました。とくに記述方法はif（分岐）やfor・each（ループ処理）など解説。テンプレート化したい場合に使う記述方法の解説と具体的なテンプレートの作り方なども紹介しています。 普段webpackやgulpを使っている方なら導入のハードルも低いと思います。 今回はmpmコマンド出始めたい方はpackage.jsonで手軽にすぐ始められます！とても記事は長いので目次を利用して好きなところを読んでください。 かみーゆ/フロントエンドエンジニア 資金ゼロからフィリピンで起業した海外ノマドエンジニア。IT業界10年以上でテクニカルディレクター（技術責任者）・エンジニア講師・ブリッジSEを経てLenzTec
Pugの記法まとめ - Qiita
HTMLをPugで書くメリット 閉じタグを書かなくて良いので、書き忘れることが無くなる Classを「.」、IDを「#」と書くので、Class名やID名変更時の置換が楽になる ヘッダー、フッターなど共通部分を別ファイルで管理できる 変数や条件分岐ができる HTMLをPugで書くデメリット 変換する環境が必要 変換は、npm-scriptsやGulpを使いましょう。npm-scriptsの記事書きました。 GUIでの変換が良い方は、Preprosがオススメです。 Pug←→HTML変換サービス 環境を作らずにPugの書き方を練習できます。 HTMLをPugに変換 html2pug - convert your html code to pug https://html2pug.now.sh/ PugをHTMLに変換 PugHtml - Pug and HTML online converte
Pugを使って配列、オブジェクトをhtmlに出力する方法 | BLOG | フロントエンド・コーディングの受託/請負制作専門フリーランス JWS
リストなど大量の情報をまとめて html ファイルに出力する方法について書きます。 エクセルで企業リストに企業名、リンク先などの情報が記載された原稿を渡されたときなど、エクセルからのコピペでは疲弊してしまうので、pug を使って一気に html 化してしまおうという話です。 データの用意 まずは、エクセルから以下のような形に成型します。 [ { name: 'google', url: 'http://www.google.com' }, { name: 'yahoo', url: 'http://www.yahoo.co.jp' }, { name: 'qiita', url: 'https://qiita.com/' } ]; pug ファイルの作成 先ほど用意したデータを以下のように pug ファイルを作成します。 //- pug - var lists = [ {name:"goo
Eleventy1.0という選択肢
自己紹介 大木尊紀 / Takanori Oki / @takanorip 無職（UI designer, Frontend web developer） https://blog.takanorip.com/ Eleventyとは？ Eleventy, a simpler static site generator. 公式ドキュメントより Eleventyは非常にシンプルな静的サイトジェネレーターです。 2021年10月、ついに 1.0-beta が公開されました！🎉 特徴 ReactやVue.jsなどに依存していないのでシンプルで扱いやすい ビルド後の成果物が非常にシンプル（JSがほぼ動作しないHTMLが作られる） 機能が充実している 柔軟な設定 ページのパーツやレイアウトの管理 Dataの注入 プラグインが充実している https://www.11ty.dev/docs/plugi
静的サイトジェネレーターEleventy（11ty）が遂にv1.0.0に | フロンティアビジョンスタジオ
技術の移り変わりが激しいWeb界隈、フロントエンドといえばReact、Vue.jsなど一般的にJavaScriptフレームワークが真っ先に頭に浮かびますが、普通のホームページ制作（あくまで弊社の現場）では使わないことが多いです。（Reactは好きです） ※Reactは公式ではライブラリと表記されています フレームワークをバリバリ使った開発もしてみたい反面、もっとシンプルに効率的にホームページを制作したい！と思い2年ほど前からEleventyを密かに追っていました。 Eleventyは日本語記事が少なく有名というよりファンの多いというイメージでご存じない方もいると思います。 Twitterでは結構盛り上がっています（自分もファンの１人だからそう感じるだけかも） ようやくバージョン1.0.0にもなりましたので、Eleventyの紹介も兼ねて記事にしたいと思います。 ※Eleventyを使った環
Pugでのコメントアウトの方法と種類 - Pug入門 | ねこしすてむ
このページではHTMLを生成するJavaScript製テンプレートエンジンのPugについて解説します。 PugはJavaScript製のテンプレートエンジンですので、コメントアウトにはHTMLのように<!-- -->ではなくJavaScriptと同じようなコメントアウトが使えます。 コメントアウトの種類は//と//-の2種類あります。その違いはコンパイルされた時にHTML内に記述を残すか、残さないかになります。 // HTMLに残るコメント //- HTMLに残らないコメント これをHTMLへコンパイルすると、 <!-- HTMLに残るコメント--> のようになり、//-の方は残らなくなります。 複数行をまとめてコメントアウトする場合は // HTMLに残る複数行のコメント HTMLに残る複数行のコメント //- HTMLに残らない複数行のコメント HTMLに残らない複数行のコメント のよ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://blog.mismithportfolio.com/web/20160326pugbegin