Corredor

ウェブ、プログラミングの勉強メモ。

HTML ファイル内に CSS や JS をインライン挿入する「html-inline」

インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン

インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン

  • 作者: Heydon Pickering,太田良典,伊原力也,株式会社Bスプラウト
  • 出版社/メーカー: ボーンデジタル
  • 発売日: 2017/11/04
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る

HTML&CSSとWebデザインが 1冊できちんと身につく本

HTML&CSSとWebデザインが 1冊できちんと身につく本

普段は <link href="styles.css"> とか <script src="scripts.js"></script> とか書いて、HTML から外部ファイルを読み込んでいるけど、とある理由でインラインに CSS や JS のコードを置きたかった。

そんな時に使えるのが html-inline という npm パッケージ。

これを使うと、CSS や JS ファイルの他、画像ファイルなども DataURL に変換して HTML ファイル中にインライン展開してくれる。

# パッケージをローカルインストール
$ npm install -D html-inline

# ローカルインストールした html-inline コマンドを叩く
# index.html のコードをインライン化して index-inline.html を生成する
$ npm run html-inline index.html -o index-inline.html

コレで、

  • <link href="styles.css"><style>body { color: red; }</style> のように、
  • <script src="scripts.js"></script><script>console.log('hoge');</script> のように、

HTML 中に CSS・JS ファイルの内容が展開される。

サクッとコードをインライン化できるのでオススメ。