jquery.transform.js で CSS3 の transform をアニメーションさせる

要素を CSS3 の transform で移動・回転・拡大縮小などさせつつ、
アニメーションもさせたい場合に便利な jQuery プラグインを紹介します。

jquery.transform.js

eenox/jQuery-3D-transform

このプラグインは指定の面倒な transform 属性を簡単に指定できるようにします。
transform 属性については transform－CSS3リファレンス を参照して下さい。
transform 属性は各種変換関数をスペース区切りで指定しなくてはならないので面倒でしたが、
普通の CSS の属性を扱うように transform 属性の関数を扱うことができます。

$(".transform").css({
    "top": top1,
    "left": left1,
    "opacity": "0",
    "rotate": rotate1 + "deg",
    "scale": "2, 2"
  }).animate({
    "top": top2,
    "left": left2,
    "opacity": "1",
    "rotate": rotate2 + "deg",
    "scale": "1, 1"
  }, 2000, 'swing');

transform 属性を上記のように簡単に扱えるというだけで
アニメーションさせなくても使いたい jQuery プラグインです。

参考

jQueryアニメーションでCSS3のTransformを操作して拡大縮小／回転などを実装させるいろいろ | BlackFlag

HTML/CSS/JavaScriptを駆使した画像の重ね方

いわゆる、かずー氏クラスタアイコンの作り方

Way to cover an image with another image
サンプルページへはこちらのリンクまたは画像をクリック！

私@wada811のアイコンが、
他の人のかずー氏クラスタアイコンのように
全体サイズになっていないのは
重ねるのが簡単すぎて
重ねたい画像が同じサイズの特殊事例にしか
対応できないように見えるため
あえて小さく重ねています。

方法としては6つもありました！
正直自分でも驚きです。

1. background: absolute; で絶対配置で重ねる方法
2. 背景画像を指定した div に img タグを置いて重ねる方法
3. 2の方法を擬似要素 :after の content: url() で重ねる方法
4. 3の方法で content ではなく背景画像に指定して重ねる方法
5. CSS3 の複数画像の背景指定で重ねる方法
6. Canvas で複数画像を読み込んで重ねる方法

background: absolute; で絶対配置で重ねる方法は安心安定の指定方法。

HTML の記述量が多くなるので繰り返しが多い部分には使いたくないが、
ワンタイムのページでいちいち CSS ファイルを編集するのがめんどくさい時には便利。

背景画像を指定した div に img タグを置いて重ねる方法はプログラムで使いやすい。

背景画像をプログラムなどで差し替えたいときや、
状態判定してカバー画像をかける、かけないというの場合分けなどで便利。

2の方法を擬似要素 :after の content: url() で重ねる方法は IE7 以下で使えない。

今回は transform: scale(); で無理やり画像を小さくしているので
IE8 で画像が小さくならなくて背景画像をはみ出てしまう。
使うときはちゃんとサイズの合った画像を使おう。

3の方法で content ではなく背景画像に指定して重ねる方法は IE8 以下で使えない。

CSS3 の background-size を使っているので IE8 以下は画像が小さくならなくて切れてしまう。
使うときはちゃんとサイズの合った画像を使おう。

CSS3 の複数画像の背景指定で重ねる方法は IE8 以下で表示すらできない。

background-image が CSS3 で複数枚の画像を指定できるようになっている。
この使い方では微妙だが、サイトの画像をコンポーネント化できるので微妙に違う画像が多い時は便利かも？
スマホなら background-image の複数画像指定をサポートしているはずなので
画像を色んな組み合わせで一つの画像として表示したいときに使えるかも。
キャッシュされればそれぞれ早くなりそうな気がする。

Canvas で複数画像を読み込んで重ねる方法は IE8 以下では使えない。

IE8 以下でも Canvas を使えるようにするライブラリもあるようだが完全ではないようです。
参考: HTML5 CanvasをIEにも対応させる魔法excanvasの使い方 | DECONCEPTER
複数の画像を合成した画像を Data URI スキームで表現できるので
サンプルページにあるように Canvas で作った画像を画像タグで置換することもできる。

最後に

目的に合わせていろいろな方法を使いこなせるようになろう。
Canvas を使って面白そうなことができるのでやってみたい。

@kazoo04のアイコン素材を使わせて頂きました。
この場を借りて感謝します。ありがとうございます。

[SublimeText]Emmetで高速HTML/CSSコーディング CSS編

CSSの展開

HTMLやXML、その他の構造化言語に適しているEmmetがCSSで何ができるかというと、
ショートハンド(速記)でスニペットや自動補完を助けてくれます。
それによってCSSでも爆速コーディングが実現可能です。
例えば、m と打って展開すれば margin: ; となるので後は 10px と打てばいいのです。
また、m10 と打って展開すれば margin: 10px; と展開されます。
複数の値を指定したい場合は m10-20 のように
ハイフン区切りで入力することで margin: 10px 20px; と展開出来ます。
マイナスのマージンを指定する場合は m-10 と打てば margin: -10px; と展開出来ます。
複数の値でマイナスを含む場合は m10--20 のようにすれば
ハイフンとマイナスを自動判定して margin: 10px -20px; のように展開してくれます。

単位補完

値から単位を補完してくれます。
整数ならpx(m10 → margin: 10px;)、
少数ならem(m1.5 → margin: 1.5em;)が補完されます。
単位にはそれぞれエイリアスがあり、p → %, e → em, x → ex, r → rem で変換されます。
m10p20e30e40r なら margin: 10% 20em 30ex 40rem; となります。
px以外は複数の値を区切るハイフンは不要です。つけてしまうとマイナスになってしまいます。

z-index, line-height, opacity, font-weight は単位が要らないプロパティなので
単位なしで展開されます。
設定で css.unitlessProperties を上書きすることで動作を変更することができます。
詳しくは preferences.json | Emmet Documentation を見てください。

色コード展開

シャープの後の16進数の文字の長さによって展開のされ方が変わります。
例

#1 → #111111
#e0 → #e0e0e0
#fc0 → #ffcc00

初期設定では自動短縮されるようになっているので #ffcc00 は #fc0 になってしまいます。
Sublime Text 2では設定で以下のように設定すれば自動短縮を無効に出来ます。

"preferences": {
    "css.color.short": false
}

詳しくは preferences.json | Emmet Documentation を見てください。

!important

!をつけることで !important を補完することができます。

m10! → margin: 10px !important;

その他にも大量の補完が存在し、全てを紹介することはできないので
各自で emmet-sublime/emmet/snippets.json at master · sergeche/emmet-sublime · GitHub を確認してください。
結構想像がつくようなものばかりなので暗記しなくてはいけないようなものではないです。
あるかな？ぐらいの気持ちで展開すると良い感じに展開してくれます。

ベンダープレフィックスの補完

CSSの新機能を使用する際には各ブラウザが独自の実装をしている場合、
それぞれベンダープレフィックスというものを付けなければいけません。
Emmet ではハイフンを付けて展開することで自動でベンダープレフィックスを補完してくれます。

-bdrs

-webkit-border-radius: |;
-moz-border-radius: |;
border-radius: |;

Sublime Text 2 だとパイプの位置にカーソルが合うので入力しやすいです。
もちろん -bdrs4 とすれば 4px まで補完されます。

ベンダープレフィックスの説明には border-radius がよく使われるけど
border-radius はもうベンダープレフィックスいらないのに何故でしょう…？

もっと詳しくは Vendor prefixes | Emmet Documentation から。

Gradients

長ったらしい background-image: linear-gradient をベンダープレフィックス付きで展開してくれます。

lg(left, blue, red)

background-image: -webkit-gradient(linear, 0 0, 100% 0, from(blue), to(red));
background-image: -webkit-linear-gradient(left, blue, red);
background-image: -moz-linear-gradient(left, blue, red);
background-image: -o-linear-gradient(left, blue, red);
background-image: linear-gradient(left, blue, red);

W3C の linear-gradient は to キーワードが必要です(でした？)。
CSS Image Values and Replaced Content Module Level 3
Gradients | Emmet Documentationによると W3C spec では to キーワードが要らなくなったみたいです。
(※ソースどこ？知ってる人教えて下さい。)

Emmet の lg() もそれに対応しています。が、それによってドキュメントのデモがバグってしまっています。
展開後のカラーを一つ変えて展開すると他のカラーも同様に変わるというデモだったのですが、
バグって動かないので Try it yourself で試してみてください。
そして Sublime Text 2 の Emmet でも動きません。
うん。linear-gradient めんどくさい。使うのやめよう。

Fuzzy search

良い感じに展開してやるからチートシート見とけ。(超訳)
by Fuzzy search | Emmet Documentation

さいごに

前回の記事：[SublimeText]Emmetで高速HTML/CSSコーディング HTML編

前回の記事からだいぶ期間が空いたけど面倒くさかったとかそういうことはない。
決してそんなわけではない。
あと、最後めんどくさくなったとかそんなこともない。
Gradients がバグってて萎えたとかそんなことはない。

次はたぶんActions | Emmet Documentation をまとめる。

[CSS] ol 要素を使用しないカウントアップするリストを作ってみた

前回のリストマーカー引き続き、CSSで ol タグ相当のCSSクラスを作ってみた。
[CSS]before擬似要素を使って複数行対応のリストマーカーを作ってみた | DevAchieve

また ::before 擬似要素を使っているので CSS3 扱い。
IE8ではコロンをひとつにしないと動かない。
css/list.cssCSS list-counter sample page
カウント部分は前回と同じく複数行対応になっている。
Generated content, automatic numbering, and lists にある通り、
本記事では count になっている identifier を初期化しなければならない。

/**
 * list-counter base class
 */
.counter.init {
    counter-reset: count;
}
.count {
    display: block;
    padding-left: 1em;
}
.count::before {
    counter-increment: count;
    display: block;
    float: left;
    margin-left: -1em;
    width: 1em;
    text-align: center;
}

/**
 * list-counter counter class
 */
.counter.type_decimal .count::before {
    content: counter(count, decimal);
}
.counter.type_decimal_leading_zero .count::before {
    content: counter(count, decimal-leading-zero);
}
.counter.type_lower_roman .count::before {
    content: counter(count, lower-roman);
}
.counter.type_upper_roman .count::before {
    content: counter(count, upper-roman);
}
.counter.type_lower_greek .count::before {
    content: counter(count, lower-greek);
}
.counter.type_upper_greek .count::before {
    content: counter(count, upper-greek);
}
.counter.type_lower_latin .count::before {
    content: counter(count, lower-latin);
}
.counter.type_upper_latin .count::before {
    content: counter(count, upper-latin);
}
.counter.type_lower_alpha .count::before {
    content: counter(count, lower-alpha);
}
.counter.type_upper_alpha .count::before {
    content: counter(count, upper-alpha);
}
.counter.type_armenian .count::before {
    content: counter(count, armenian);
}
.counter.type_georgian .count::before {
    content: counter(count, georgian);
}

upper-greek に関しては W3C の list-style-type プロパティの定義には載っていないのでブラウザ実装依存。
Opera では decimal, Firefox では 空白 になり、Chrome, Safari, IE9では正常に表示される。

モダンブラウザのための最小clearfixハック

CSSハックの中でも最も有名で最も使われているのが clearfix だろう。
CSSハック嫌いの僕でも clearfix の有用性だけは認めざるを得ない。
それでもCSSハックは使いたくないのでできるだけ簡潔な表現にした。

ネタ元はこちら：A new micro clearfix hack – Nicolas Gallagher

IE6/7どころかIE8もサポートしない最強の clearfix である。
IE9 と Chrome, Firefox, Safari, Opera の最新版で動作することを確認済み。

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

ネタ元の以下の clearfix はIE6+をサポートするので困ったらコッチを使うと良い。

/**
 * A new micro clearfix hack – Nicolas Gallagher
 * http://nicolasgallagher.com/micro-clearfix-hack/
 */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1; /* for IE 6/7 only */
}

ちなみにHTML5 Boilerplate: The web's most popular front-end templateでも使われている方法なので安心！

[CSS]before擬似要素を使って複数行対応のリストマーカーを作ってみた

ul 要素などに指定できる list-style-type には種類に制限があるので
好きなリストマーカーを自由に設定できるように
::before擬似要素を使ってリストマーカー用のクラスを作ってみた。
css/list.css
もちろんテキストが複数行になってもインデントが揃っている。
サンプルページ：CSS list-marker sample page

.marker {
    display: block;
    padding-left: 1em;
}
.marker::before {
    content: "";
    display: block;
    float: left;
    margin-left: -1em;
    width: 1em;
    text-align: center;
}

::before擬似要素でブロック要素を生成して float: left; で要素の左に並べる。
要素を padding-left: 1em; で左に間を空けて margin-left: -1em; で左に戻す。
width: 1em; で text-align: center; を指定しておけば半角文字のマーカーが真ん中に来て良い感じになる。

::before という書き方は擬似クラスと擬似要素が多くなった CSS3 からの書き方なので
IE8 では対応してないので :before と書く必要がある。ちなみに IE6/7はサポートすらされていない。

上のクラスを指定しただけではリストマーカーは表示されないので以下のように指定する。
content には画像や属性値を指定することもできる。

.marker.type_disc::before {
    content: "・";
}
.marker.type_filled_circle::before {
    content: "●";
}
.marker.type_outline_circle::before {
    content: "○";
}
.marker.type_filled_square::before {
    content: "■";
}
.marker.type_outline_square::before {
    content: "□";
}
.marker.type_filled_diamond::before {
    content: "◆";
}
.marker.type_outline_diamond::before {
    content: "◇";
}
.marker.type_filled_star::before {
    content: "★";
}
.marker.type_outline_star::before {
    content: "☆";
}
.marker.type_filled_triangle::before {
    content: "▲";
}
.marker.type_outline_triangle::before {
    content: "△";
}
.marker.type_filled_inverted_triangle::before {
    content: "▼";
}
.marker.type_outline_inverted_triangle::before {
    content: "▽";
}

CSS3でボックスを角丸にするborder-radiusを使ってみた

追記(2012/06/01):border-radiusについてはベンダープレフィックス(8, 9行目の記述)は必要なくなりました。

SyntaxHighlighterで表示する程でもないコマンド系のコードを
角丸ボックスで表示しているのを見てカッコ良かったので取り入れてみました。
例↓
git push -u origin master

導入方法はコチラ：CSS3 角丸を表現する border-radius | CSS Lecture

こんな感じでカスタマイズしました。

span.cmd {
    color: #000000;
    margin: 5px;
    padding: 5px 10px;
    line-height: 2em;
    background-color:  #FFFFFF;
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}

marginは左右にしか効かないので上下の幅はline-hrightで指定することになります。
IE8以下は角丸に対応していないので角が丸くなりません。
リンク先ではOperaでは角丸にならないと書かれていましたが、
少なくともOpera11.61では角丸になることを確認しました。

CSS3の角丸を使ってキーボードのキーを表現してみた

追記(2012/06/01):border-radiusについてはベンダープレフィックス(9, 10行目の記述)は必要なくなりました。

ショートカットキーとかを表示させる時に画像を用意するのは面倒なのでCSS3の角丸と
昔ながらのborder-styleを使ってキーボードのキーを表現してみた。

例↓
Windows 7ではWin+数字でタスクバーにあるソフトを起動できます。

と、こんな感じで表示することができます。
border-style: outset;は古臭いHPの香りがしますが、
角丸にすると本当にキーっぽくて良い感じです。

サンプルコードはコチラ。

span.key {
    border: 5px #eee outset;
    color: black;
    margin: 5px;
    padding: 5px 10px;
    line-height: 2.5em;
    background-color: #eee;
    border-radius: 10px;        /* CSS3草案 */
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 10px;   /* Firefox用 */
}