webpackを用いてhtml、css、typescriptの複合環境をビルドするときに、CSSファイルの取り込み方を調べたので記録 目次動作を確認した環境各ファイルの配置webpack.config.jsでCSSを使う記述typescript（javascript）上の記述webpack.config.js全文 動作を確認した …
続きを読む
｜Web
カテゴリ： Web
webpack serveでerror:0308010C:digital envelope routines
webpack serverエラー内容：webpackを用いたコマンドで以下のようにエラーが出ました。 Errorの内容 Module build failed (from ./node_modules/file-loader/dist/cjs.js): Error: error:0308010C:digital envelope routines::unsupported 略 webpack compiled with 7 erro …
続きを読む
【VSCode】拡張機能LiveServerでルートディレクトリを指定する方法
Visual Studio Codeで、Web開発に多用される拡張機能「Live Server」でルートディレクトリを指定する方法について、無駄にはまったので記録webpackやnpmのサーバー機能を構築する方法に比べて手軽なのでよく使いますが、適切な位置がルートとして設定されていないと、ファイ …
続きを読む
【PhotoSwipe】アルバムチェキ写真風の散らばり画像HTML/CSSデザイン
上のような写真を散らしたようなレイアウトをJavascript/CSS/HTMLを用いて作ります。JavaScriptのLightbox系プラグインである「PhotoSwipe」はこのような特殊な配置と相性が良く、これを用いることで、画像の鑑賞性と操作性に …
続きを読む
WSL2でVScodeのLive Serverが使えない場合の対処法
HTMLファイルのプレビューを開きたいとき、VScodeの拡張機能である「Live Server」を使うと非常に楽に表示をリアルタイムに確認しつつ、編集が可能なのでよく使われると思います。その時、WSL2上で編集したファイルがLiveServerで開けない問題に当たったので、その時の対処法 …
続きを読む
SVG形式のベクター画像をHTML上で表示する方法
SVG（Scalable Vector Graphics）フォーマットの画像をHTML上でWebサイト上で表示する方法について調べる機会があったので、一般的なPNG画像などを表示する場合と比較してまとめておきます。目次ベクター画像についてSVG形式画像のHTMLでの表示ラスター画像のHTMLでの表示ベ …
続きを読む
