READ MORE

GoogleChromeの開発ツールで圧縮後のJavaScriptをデバッグ

Google Chromeの開発者ツールが、いつの間にか圧縮してあるスクリプトを可読化してデバッグできるようになっていました。 圧縮後のソースで動いている本番環境では不具合が起きているけど、開発環境の圧縮前ソースで再現さ …

READ MORE

CSSのbackgtound-sizeを含めたショートハンド

背景画像のサイズを指定するスタイルプロパティbackground-sizeは、ショートハンドで1行にまとめられないものなんだと思い込んでいてながい間、このように分割して指定していました。 が、/をはさめばショートハンドで …

READ MORE

browserSyncのrewriteRulesでSSI

WEBサーバで、SSI(Server Side Include)というのを使えるようにするとこの書式で、外部データをHTMLの一部として読み込めます。 npmパッケージでおなじみのbrowserSyncでSSIを使うとき …

READ MORE

webpackでCSSをバンドルする

webpackでCSSも含んだJavaScriptを生成したいときの設定メモ。 css-loaderとstyle-loaderを追加 webpack.config.js のmoduleへ設定を追記 webpackのent …

READ MORE

SassでSVGをdata URI schemeで表示させるコード生成

dataURLは通常は外部ファイルを読み込む画像などを、画像ファイルを設置せずコードとして埋め込める仕組みです。 このようなコードになります。HTMLコードだけで1pxの透過GIFから引用しました。 以前、画像ファイルな …

READ MORE

checkboxでアコーディオンを作る

checkboxとCSSの~(一般兄弟結合子)を利用するとトグル開閉できる上で、開いた際に兄弟要素を全て閉じるアコーディオンを効率よく作られます。