私の私による私のための記録

最近作成しているWEBアプリケーションで、ページの拡大機能をつけようとCSSの zoom を使ってみた・・・ うん、うまくいったと思って、Firefoxで確認してみると、拡大しないぞ！！ なんと！zoomって元々IEの独自実装だったんだね。 Chromeでは動作したので、標準実装かと思ってた・・・・適当に覚えてたよ。 というわけで、いろいろ調べてみると、 transform プロパティの scale() を使えば解決しそうだ。 .css body{ transform: scale(2.0); /* 2倍に拡大 */ } ん？？？ なんと、拡大すると左上が隠れてしまうよ・・・ そうか、じゃあ translate() で移動しようという考えがチラホラ。。。 でも、どのくらい移動していいかわからないし、やり方が野暮ったいよねぇ。 で、さらに調べ見ると MDNにtransform-origin というそれっぽいプロパティを発見！！ .css body{ transform-origin: 0 0; transform: scale(2.0); /* 2倍に拡大 */ } はい、これで無事に拡大できました。 めでたし、めでたし。。。 ふんどしの持ち主 MDN

前回 、lesscをUbuntuに導入したけれど、やっぱり、いちいちコンパイルするのが面倒なので、自動コンパイルする方法を探すことに。。。 すると、 Dead Simple LESS CSS Watch Compiler なる素敵なソフトを発見！！ これを使えば、フォルダ内のファイルを更新すると自動的にコンパイルしてくれるぞ。 # npm install -g less-watch-compiler 使い方は # less-watch-compiler [less監視フォルダ] [css出力フォルダ] で、OK! これで、快適になりましたとさ。めでたしめでたし。 と、思ったら・・・ なんと、cssが圧縮(minify)形式だった・・・ 今回はCSS修正前提の納品物なので、圧縮形式はまずいね。 なので、ソースを修正する。 調べた結果「/usr/local/lib/node_modules/less-watch-compiler/lib/lessWatchCompilerUtils.js」を修正すればいいみたい！ --- /usr/local/lib/node_modules/less-watch-compiler/lib/lessWatchCompilerUtils.js.org 2016-02-17 22:22:47.930907153 +0900 +++ /usr/local/lib/node_modules/less-watch-compiler/lib/lessWatchCompilerUtils.js 2016-02-17 22:23:05.275173726 +0900 @@ -116,7 +116,7 @@ compileCSS: function(file){ var dirname = path.dirname(file).replace(lessWatchCompilerUtilsModule.config.watchFolder, "") + "/"; var filename = dirname +path.basename(file, path.extname(file)); - ...