Node.jsの環境構築で失敗したとき試したこと
Node.jsの開発環境を設定しているとたまに、他のパソコンでは正常に実行できたコマンドでこけて環境を構築できないことがあります。そんなときに試したことを、備忘としてまとめました。 Node.jsをnodebrew管理に …
記事一覧 2ページ
GoogleChromeの開発ツールで圧縮後のJavaScriptをデバッグ
Google Chromeの開発者ツールが、いつの間にか圧縮してあるスクリプトを可読化してデバッグできるようになっていました。 圧縮後のソースで動いている本番環境では不具合が起きているけど、開発環境の圧縮前ソースで再現さ …
CSSのbackgtound-sizeを含めたショートハンド
背景画像のサイズを指定するスタイルプロパティbackground-sizeは、ショートハンドで1行にまとめられないものなんだと思い込んでいてながい間、このように分割して指定していました。 が、/をはさめばショートハンドで …
Gitのリポジトリ単位でコミットアカウントを使い分ける設定
Gitのコミットに記録される、名称とメールアドレスを仕事用リアルネームと、個人用のハンドルネームなど、状況に応じて出し分けたい場合があります。 特定のプロジェクト（リポジトリ）ではこのアカウント名で、というときはpull …
browserSyncのrewriteRulesでSSI
WEBサーバで、SSI（Server Side Include）というのを使えるようにするとこの書式で、外部データをHTMLの一部として読み込めます。 npmパッケージでおなじみのbrowserSyncでSSIを使うとき …
gulp-sassでautoprefixerを併用するとsourcemapが書き出されない対策
このようなgulp-sassでsassをコンパイルし、gulp-autoprefixerでベンダープレフィックスを自動付与する設定があり gulp-sourcemapsを追加してcssのsourceMapファイルを書き出 …
webpackでCSSをバンドルする
webpackでCSSも含んだJavaScriptを生成したいときの設定メモ。 css-loaderとstyle-loaderを追加 webpack.config.js のmoduleへ設定を追記 webpackのent …
SassでSVGをdata URI schemeで表示させるコード生成
dataURLは通常は外部ファイルを読み込む画像などを、画像ファイルを設置せずコードとして埋め込める仕組みです。 このようなコードになります。HTMLコードだけで1pxの透過GIFから引用しました。 以前、画像ファイルな …
セレクトボックスを展開した状態までデザインカスタマイズ
セレクトボックスの展開した状態（optionタグ）は、2018年12月現在では各ブラウザCSSのカスタマイズ可能なプロパティが存在しません。 展開状態までデザインカスタマイズするには、JavaScriptでモックのDOM …
checkboxでアコーディオンを作る
checkboxとCSSの~（一般兄弟結合子）を利用するとトグル開閉できる上で、開いた際に兄弟要素を全て閉じるアコーディオンを効率よく作られます。