Greensleeves v2.0
Notes about things I'm interested in.
Flash から .exe 形式で書き出すとき、MovieClipLoader とかで何か画像なり swf ファイルなりを読み込んでいる場合、.exe を書き出すときちょこっと気をつけないと、実行したときにロードされてなくてあれー？となる。というかなった。
例えば
var MCLoader:MovieClipLoader = new MovieClipLoader();
var loadListener = {
onLoadInit: function(){
// 初期化コード
}
}
MCLoader.addListener(loadListener);
MCLoader.loadClip(hoge.jpg, hoge);
と、このようにムービークリップ hoge に hoge.jpg をロードさせようとしても exe では見られなかった。
なんか、だいぶ間が空いてしまいましたが・・・。あけましておめでとうございます。今年の抱負としてなるべく更新しよう。そうしよう。
最近、HTMLやCSSを書く際にずっと Dreamweaver だったのですが、MT更新用に使っていた xyzzy を本格的に拡張し始めたら結構愛着がわいてきたのでこっち使おうかなぁとかと思ってきつつあります。職場のエディタも xyzzy 使えたらなぁと思っていろいろやってるんですが、結構な数の拡張 lisp を入れたので何を入れたのか覚えておくためにメモ。
拡張一覧
- Net Installer
- nise-about
- html+-mode
- html-support
- outline-tree2
- color
- buf2html
- TreeView
- win-window
- browserex
- paren
- clipselect
- clipview
- javascript-mode
あと lisp フォルダの winkey.l を少し改造した winkey+.l を作って一部キーバインドを普通のテキストエディタでよく使うショートカットにしたり。
(provide "winkey+") (in-package "editor") ;;; winkey.lからコピー (defvar *default-selection-keymap* (let ((keymap (make-sparse-keymap))) (define-key keymap #\C-c 'copy-selection-to-clipboard) (define-key keymap #\C-x 'kill-selection-to-clipboard) keymap)) (setq-default selection-keymap *default-selection-keymap*) (global-set-key #\C-z 'undo) (global-set-key #\C-y 'redo) (global-set-key #\C-v 'paste-from-clipboard) (define-key esc-map #\C-x #'ctl-x-prefix) (define-key esc-map #\C-c #'specific-command-prefix) (global-set-key #\C-A 'selection-whole-buffer) (global-set-key #\C-F 'search-dialog) (global-set-key #\C-S 'save-buffer-dialog)
あらかた拡張終わったら今度はキーバインド覚えないと・・・。
いままで Double margin float bug を回避するとき
div {
float: left;
margin-left: 20px !important; /* IE6 以下はバグで 40px のマージンが取られる*/
margin-left: 10px;/* for IE6 */
}
とかやってたんですが、これだと強制的に specificity が最高になってあまり賢くないかなぁとか思ったので、調べてみたら display: inline; を使う方法があった。
div {
float: left;
margin-left: 20px;
display: inline;
}
float した要素に、display: inline; を指定すると、このバグが消え去るらしい。
でもそれって、他の所謂モダンブラウザに影響ないのか調べてみると、CSS2 Specification にこう記載されていた。
- If 'display' has the value 'none', user agents must ignore 'position' and 'float'. In this case, the element generates no box.
- Otherwise, 'position' has the value 'absolute' or 'fixed', 'display' is set to 'block' and 'float' is set to 'none'. The position of the box will be determined by the 'top', 'right', 'bottom' and 'left' properties and the box's containing block.
- Otherwise, if 'float' has a value other than 'none', 'display' is set to 'block' and the box is floated.
- Otherwise, the remaining 'display' properties apply as specified.
なるほど、float が none 以外だと display は block にセットされるのか。とりあえず大丈夫そうだね。
background-position プロパティって、% 指定と px 指定のときで画像配置の挙動が微妙に違うんですね。
今の一言で、自称 CSS 使いのくせに仕様書をきっちり読んでないのがバレた気がしますが、気にしない。忘れないように一応メモっておきます。
With a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of padding area. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.
CSS2 Specification の項目には上記のように記載されています。簡単に言うと、たとえば background-position: 14% 84%; と宣言した場合、宣言した要素の '14% 84%' のポイントに 指定した画像の '14% 84%' のポイントが来るように配置するということになります。簡単に図で表してみると下図のような感じになります。
位置を '50% 50%' とかにしてみると確かに配置位置はど真ん中になるので、それでピンと来そうな気もしますが今まで全く気がつきませんでした。
リファレンスサイトを見て回ってみても説明が間違っていたり、（誤解しそうな内容なのに）注意書きが無かったり、とかだったんで間違って覚えている人が案外多いかもしれません。え？僕だけ？
何となく del.icio.us の subscription を眺めていたら、面白い CSS ギャラリーを見つけたのでご紹介。
緑色系のデザインに特化しているので、緑好きな僕は即、ブックマークへ。ギャラリーの中で個人的に気に入ったのが CSS3.info とか Fine Store とかですかね。大仰に画像を使わないでいて、かつシンプルな構成が好みなんです。
ギャラリー自体はまだ数がそんなに多くないので、今後に期待です。