こ、これは、かなり楽ですね!Emmetと違って修正もそのままできるのがいいです。コンパイル後のコード表示HAMLを実際にHTMLにコンパイルするにはRubyの開発環境が必要です。HTML」をクリックすると...コンパイル後のHTMLが確認できます!同じ場所からHAMLにまた戻れます。Markdown2番目は「Markdown」。色々なブログなどで採用されていてWordpressでも拡張が可能。このはてなブログの投稿もマークダウンで書いています。「##」が2つだと見出し2になる。「###」が3つだと見出し3になる。改行2つで段落になる。アスタリスク1つでイタリック。アスタリスク2つで太字になる。見出し2「##」が2つだと見出し2になる。見出し3「###」が3つだと見出し2になる。改行2つで段落になる。アスタリスク1つで*イタリック*。アスタリスク2つで**太字**になる。Slim3番はSlim。スリムに書けそうな名前です。Slimの主な記法インデントが半角スペースidの書き方タグの後ろに#hogeと続ける。タグの後ろに#hogeと続ける。タグの後ろに.hogeと続けるSlimを実際に使うには、Hamlと同様にRubyの開発環境が必要なようです。なんとも愛らしい名前ですが、昔は「Jade」というV系バンドのようなカッコいい名前だったようです。Pugの主な記法pugはタグはなくて、閉じタグも不要。インデントによって入れ子を作る。複数行のテキストは「|」を入れる。idは「#」、classは「.」を要素に続けてかく。なんだかSlimとほとんど違いがないような。pugはタグはなくて、閉じタグも不要。インデントによって入れ子を作る。複数行のテキストは「|」を入れる。idは「#」、classは「.」を要素に続けてかく。なんだかSlimとほとんど違いがないような。深い部分はこれから検証していく...。PugとSlimの一番の違いはコンパイル方法で、Pugの場合はRubyではなくNode.jsでコンパイルするようです。まとめHTMLを楽に記述する方法としては、テキストエディタの拡張機能であるEmmet、ブログなどで採用されてるマークダウンと、テンプレートエンジンHaml、Slim、Pugなどがあります。テンプレートエンジンではHamlが先発で、さらにスリムにしたのがSlim、Pug。どちらを採用するかは、RubyならSlim、NodeならPug、など開発環境で決める。いう理解でいいでしょうかね。CodePenのSettingではCSSやJSを楽に記載できるAltCSS、AltJSも体験できます。08:30Tweet関連記事2019-12-17【CSS】Sass(SCSS)をGulpでコンパイルしてみるGulpの続きです。前回はHTMLテンプレートエンジンのEJSをコンパ...2019-11-29【HTML】PugをGulpでコンパイルしてみる(メタ言語初コンパイル!)Gulpの続きです。前回はローカルにインストールができました。メタ言語(HTMLテ...2019-10-02【HTML】PugでFizzBuzzる!(テンプレートエンジンの変数、for文、if文)以前の記事で紹介したテンプレートエンジンPug。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。