CSS Spriteのメリットは複数の画像を1枚にまとめて作ることでHTTPリクエストを減らせたり、上手く組み合わせれば画像のトータルサイズを減らせたりできること。
個人的には管理する画像の数が減らせるのがうれしかったり（あんまり数が多くなりすぎると画像名見ただけじゃ何の画像か分からなくなってしまうんです…）。

ロールオーバー画像に使っていると、印刷時にFirefoxでおかしなことになるので、そういうところにはなかなか使いにくいです。
印刷用のCSSでメニューを表示させなければ問題ないですけどね。

前置きはこんなもんで本題に。

CSS Spriteって、「アイコンとかロゴを1枚にまとめとけー！」みたいなイメージだったけど、[CSS]一枚の画像で、四隅が角丸のパネルを実装するスタイルシートという記事で紹介されていた使い方は、便利だなぁと思った。

具体的には、

このボックスを

をこの画像で作る。
作者のデモを見る

見れば分かるけど、構造はこのようになっている。

div, hx, p{
background-image:url(img.png);
}
div{background-position:left bottom;
}
hx{
background-position:left top;
}
p{
background-position:right top;
background-repeat:repeat-y;
}

今までこういうタイプのボックス作るときには、上・真ん中・下の3つの画像に分けて書き出してました。
これが1枚の画像（box.gifみたいに）で作れれば、画像管理がちょっとだけ楽になるかも。

この使い方一般的だったらすいません…
こんな賢い使い方あるなんて知りませんでした(-_-;)

このサンプルだと文字数とか文字サイズによって見出しが崩れますが、見出しの背景に色を付けないなど工夫をすればもっと使いやすいものを作れそうですね。
もっとも、分かりやすくするために色を付けてるだけかもしれませんが。

全パーツを1枚にまとめるとパーツの追加・変更などがあったときに編集するのが面倒なので、1パーツ1画像みたいに使ったほうがよりスマートかなと思います。

デザインが変わったり、お気にいられの数が表示されてたり、いろいろ変更になったようです。
今までちゃんと使ってなかったので、変更点全部は追いきれてません…。

デザインは別にいい・・・が、

ちゃんとSBMとしての役割を果たしていれば、ビジュアル的な部分については、よっぽど使いにくいとか分かりにくいっていうのが無ければ何でもいいかなと思います。

Yahoo!JAPANのデザイン変わった時、最初は、「おぉ～変わった～」、「気持ち悪いｗ」って思ったけど、今ではYahooっぽくないとか思わず、普通に使ってる。そんな感覚です。

今回のはてブのリニューアルでもそんな感じで済めばよかったけど、ちょっと違った。

よく調べもせずにブックマークレットを新しいものに変更したのが悪かった。

ページ内にブックマークを追加するダイアログが表示されてグリグリ動かせたりして。
こんな機能必要？って思いました。

で、前のタイプに戻せないのかなぁと思ってググったら、高木浩光＠自宅の日記 - 新はてなブックマークの登録ブックマークレットは使ってはいけないなんて記事が…。

今回のはてブの新型ブックマークレットは、攻撃手段に対して何らかの対策が打たれるかもしれない。しかし、偽サイトに差し替えられる攻撃を防ごうとしても、元ページのコントロール下にある限りどうやっても攻撃手段は残るわけで、いたちごっこになるのは目に見えている。

デンジャラス！
ここ数日はてブ使いませんでしたｗ

いつものように仕事そっちのけでネタフルさんのとこに行くと、[N] 新「はてなブックマーク」で新規ウィンドウを開くブックマークレットという記事が書かれてました。
この記事で紹介されていた、新はてなブックマークの登録ブックマークレット - Ogawa::Memorandaへ行くと…

要はこれで十分なのかな。

と、先の高木浩光さんの指摘に対応した、はてブの追加ページを新規ウィンドウで開いてくれるブックマークレットを作ってくれてました！
ありがとうございます！

もう早速使わせてもらってます！

（※今はてブのセットアップページ見たら、一番下に旧タイプのブックマークレットがあった。
最初からあったっけ？？）

久しぶりの更新ですが、さっそく本題へ。

ブログが続かない

ブログが続かない理由としてよく耳にするものは、

• 仕事や学業など、本職が忙しい
• 飽きた
• ネタがない
• 炎上した・嫌がらせを受けた

などなど。

今回僕が4ヶ月も記事を書かなかった（始めて2ヶ月くらいで…）理由は、上に挙げたようなちゃんとした（？）理由ではなく、ただやらなかっただけ。

うん。ホントやらなかっただけなんです。

更新しなかった間に何かしていたか

7月から8月にかけて初めて転職活動をしました。

転職活動を始めたばかりの頃は、結構気楽なもので、働かない日々を楽しんでいました。
不思議なもので、1ヶ月くらい働かないと、働かなきゃ！みたいな気持ちがふつふつと沸いてきて…
日本人的な感覚なんでしょうかねｗ

いざ本格的に転職活動を始めると、決まるかどうかという不安にかられ、転職先が決まってからは会社に慣れるまで精神的な焦りや戸惑いはありました。

「転職とか忙しいから更新しなくてもいいや」って。

それを理由に自分を甘やかしてたんです。
いくら忙しかったとしても、1ヶ月に1回くらいは更新できるよね？って自問して自答できませんでした。

一応記事のネタを考えることもありました。

でも、記事のネタを考えて、途中までまとめて、「また今度やろう」って別のネタ探したりして、結局いつまで経っても更新はしないままただ月日だけが過ぎる。

変に「いい記事を書こう」って意気込むだけじゃなく、適度に肩の力抜いて記事を書いていけたらいいかな。

これからは、技術的なネタだけじゃなく、気に入ったサイトを紹介するだけの記事も書いていこうかなと思っています。

「原因はhaslayoutの値がfalseになっているから」
隣にいた同僚にそう教えてもらってなんとかズーム機能に対応はできましたが、今後同様の事例が出た時に困らないようにメモ。

でhasLayoutって何？

hasLayout は IE 独自のプロパティで、各要素がレイアウト情報を持っているかどうかを示すもののようです。
上に書いた背景画像の拡大・縮小時のバグはhasLayoutプロパティの値がfalseになっている場合に起こるそうです。

その他のバグの情報はMicrosoftのInternet Explorer 7 におけるズーム機能の問題で紹介されてます。
ここで回避策として ZOOM 機能を無効化するという方法が書かれていますが、本末転倒というか全く意味ないですｗ

とにかく、haslayoutの値がfalseになってるからバグるなら、値ををtrueにすればバグらないはず。
cssで下の表に示すプロパティを指定すればhaslayoutに伴うバグを回避できます（参考：MSDN hasLayout Property (A, ABBR, ACRONYM, …)）。

これを使って一番てっとり早くバグを解消するには、

*{
  zoom:1;
}

を指定すること。

これを指定するだけで、拡大・縮小時のバグが解消されてハッピー！となれば良かったんですが、そうはいかないのがさすがIE…。

*{zoom:1;}の落とし穴

全称セレクタを使ってhaslayoutの値をtrueにしたら、今まで発生しなかったバグが発生してしまいました…。

記事を書いていたら、olのリスト番号が表示されない！
zoom:1を指定するまではちゃんと表示されていたので、原因は間違いなくこれ。

それで調べてみたら、hasLayoutプロパティがtrueで発生するバグ - Webtech Walkerで解説されていました。
サンプルページもあり、非常にわかりやすかったです。

前の記事で全称セレクタについて書きましたが、全称セレクタを使うってことは二次災害的なデメリットが生まれるし、良くないんだなと改めて痛感しました。

そこで全称セレクタではなく、バグる要素にだけzoom:1を指定することでひとまず解決しました。

IE８からhaslayoutはなくなるらしいですが、ブラウザの移行がすんなり進むとも考えにくいので、これからもしばらくはhaslayoutに頭を悩ませることになりそうですね。

*{
margin:0;
padding:0;
border:0;
}

この指定は単純でとても便利だったのですが、Emotinal Webさんの*{ margin : 0 }はもう古い！？ - Emotional Webという記事にあるように最近はあまり使われない方向になっているようです。

なぜ全称セレクタは使われなくなったのか？

Emotonal Webさんの記事でも書かれていますが、全称セレクタを使ってデフォルトスタイルをリセットすると、フォーム関連のスタイルも全てリセットされてしまい、元々ブラウザが持っている優れたスタイルもリセットされてしまということなります。

<input>はデフォルトのもので充分ちゃんとしたスタイルになっています。

これらのスタイルもリセットされてしまうことになりますし、その他の箇所で予期しない表示になったりするかもしれません。

<input>の場合では、ボタンに画像を使ったり個別に指定する場合はいいとしても、デフォルトでいいと思っていたらいちいち指定しなきゃいけないというのは面倒な感じもします。

ではどうリセットするのがいいんだろう？

最近では全称セレクタの代わりに必要な要素にだけリセットをかけるという手法が主流なようです。
ちなみにこのサイトも全称セレクタではなく、必要だと思われるものをリセットしています（実際必要ないものも入ってるかもしれませんが…）。

img, a img, ul, ul li, dl, dt, dd, h1, h2, h3, h4, h5, h6,
div, span,label, input, textarea{
  border:0;
  margin:0;
  padding:0;
  list-style:none;
}

直前に書いた<input>もリセットしてるのはご愛敬ｗ

有名どころで言うと、Emotonal Webさんの記事にも書かれているYahoo! UI Library: Reset CSSでしょうかね。
これでは下のようにリセットしています。

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td{
  margin:0;
  padding:0;
}
table{
  border-collapse:collapse;
  border-spacing:0;
}
fieldset,img{
  border:0;
}
address,caption,cite,code,dfn,em,strong,th,var{
  font-style:normal;
  font-weight:normal;
}
ol,ul{
  list-style:none;
}
caption,th{
  text-align:left;
}
h1,h2,h3,h4,h5,h6{
  font-size:100%;
  font-weight:normal;
}
q:before,q:after{
  content:'';
}
abbr,acronym{
  border:0;
}

これを参考にして、個々の事例に合わせ修正していくのが手っ取り早いかもしれません。

ただ、デフォルトの設定じゃ物足りない

こんなこと書いたら怒られるかもしれませんが、今まで1回も使ったことないようなセレクタやプロパティが出てきても意味ないので、使わないものは表示して欲しくないんです。

この機能の設定を変更するのが、「CodeHints.xml」。
プログラムファイルからDreamweaverがあるディレクトリにいくと、/Configuration/CodeHintsというディレクトリがあり、その中にCodeHints.xmlがあります。

参考にさせてもらったのは、widowsプロパティの誤入力を防ぐCodeHints.xml｜カラクリエイト。

記事の中にある「windows」プロパティもさることながら、僕としては「direction」や「inherit」もイライラさせられるものです。
そういったイライラから解放してくれて、作業スピードをより早くするためのすばらしい改造です！感謝！

カラクリエイトさんの記事のコメント欄でakiraさんという方が、CodeHints.xmlをさらに改造してました。
この方は、cssの編集中に半角スペースを入れると「!important」が、数値を入れたときには「px」、「em」、「%」が候補に出るようにしてあるそうです。

自分の好みの形に改造するのは結構大変な作業ですが、思った以上に作業効率が上がるので間違いなくお勧めです！
ただ、「うっかり」に備えて、オリジナルのバックアップはとっておきましょう。

さらにスピードアップするには

コードヒントをカスタマイズすることで作業スピードは結構速くなると思います。
それでももっと作業スピードを速くしたいときに活用したいのが、スニペットとショートカットキーの登録。

元同僚の方に教えてもらうまで、スニペットがある必要性を全く感じていませんでしたが、1回使うとすごく便利！

例えば、clearfixみたいにいちいち全部覚えていられないようなものを、新規スニペットの追加からスニペットに登録します。

:after{
  height:0;
  visibility:hidden;
  content:".";
  display:block;
  clear:both;
}

次に登録したコードを右クリックして「キーボードショートカットの編集」を選ぶと、ショートカットキーを登録できます。
あとは実際にclearfixを使いたい場所で割り当てたショートカットを押せば、clearfixが挿入されるわけです。

僕が登録しているショートカットは、「clearfix」と「span」の２つくらいです。spanが何気に便利だったりします。
ちなみに、clearfixには「Ctrl+Shift+F」、spanには「Ctrl+Shift+Alt+S」をショートカットとして割り当ててます。

他にも効率をあげる方法があれば教えてください！

どうしても透過PNGを使いたい場合、IE6でもちゃんと表示させるには、

1. AlphaImageLoaderを使う
2. javascriptを使う

ことになると思います。

AlphaImageLoaderを使う場合

AmentiさんのIEと透過PNGという記事にまとめられていて、読むのは大変ですがとても勉強になります。

この中に「標準準拠モードだと効かない」というように書いてあります。
IE6でも標準準拠モードになるように作っている人は要注意の箇所ですね。

AlphaImageLoaderは外部のスクリプトを使わず一番手軽に利用できるIE6の透過PNG対策だと思います。

javascriptを使う場合

かなりアバウトな表現になっているのは、同じことをするにも様々なスクリプトがあるから。

その中でも、透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる - DesignWalkerで紹介されている、「iepngfix.js」は結構使いやすいスクリプトなんじゃないかと思います。

これを使うときは、iepngfix.jsを読み込み、cssで該当箇所（仮にクラスhoge）に以下のように指定する。

* html .hoge{
behavior:expression(IEPNGFIX.fix(this));
}

指定するのはこれだけ。
あとは、このjavascriptを適用するのはIE6以下なので、html内でそれらのブラウザにだけ読ませる。
これをやらなくても「* html」がついてるので、どっちにしろIE7以上では効かないです。

<!--[if lt IE7]>
<script type="text/javascript" src="iepngfix.js"></script>
<![endif]-->

IE以外のブラウザにはこの対処法は効かないので、[if lt IE7]の部分を[if IE]に変えて、「IEなら」という条件にしてもいいかも知れません。

他に「IE7.js」というライブラリがあります。

これを読み込んでおき、透過PNGに名前をつける時に「XX-trans.png」（XXは任意）という形式にします。
そうすると、backgroundプロパティでこのPNG画像を指定した際に透過されて表示されるというもの。

このライブラリは透過PNGのためだけのライブラリではなく、これを読み込むと、IE6以下でもIE7と同じようなレンダリングをしてくれるという機能まであります。例えばIE6以下で、

1. a以外の要素に:hoverなどの疑似クラスが使えるようになる
2. position:fixedが使えるようになる

というものです。

ただ注意しなければならないのは、既存のサイトにIE7.jsを読み込むと、IE6用に指定していたcssハックが影響して表示にズレが生じてしまいます。気をつけましょう。

それと、IE7.jsについてもう１つ。
サーバー環境にもよるかもしれないんですが、結構重かった記憶が・・・。

一回あるサイトのリニューアルの際に使おうとしたけど、あまりに遅くて導入を諦めたことがあったので、使ってみたい方は一度チェックしてみたほうがいいと思います。
軽かったらぜひ使いたいライブラリです。今後のバージョンアップに期待してます。

2008年7月9日追記

記事を更新した直後に発見してしまったので、追記します。

[JS]超軽量で設置も簡単な、透過PNGをIE6で表示するスクリプト -Unit PNG Fix

実際に使ったことが無いし、容量が軽いから動作が軽いとも限らないのでなんとも言えませんが、javascriptファイルだけなら1KBありません。ここまでファイルが小さいのは今までになかったんじゃないでしょうか？

ダウンロードしたら、Zipファイルを解凍し、unitpngfix.jsの1行目にある、clear.gifのパスを自分のサーバーのものにする。
画像のパスを変更したら、htmlからunitpngfix.jsを読み込む。
これだけでいいようです。

注意：imgタグにwidthとheightの値を入れておかないと画像が見えなくなってしまうようなので、それだけは気をつけてくれということです。

使ってみた方がいたら感想を教えてもらいたいですね。

透過GIFをグラデーションのかかった部分に乗せるとどうしても汚い部分ができてしまいます。しかし透過PNGだとそういうことが無いので、今後透過GIFよりも使われることが多くなっていくと思います。

僕個人としてはどんどん使っていきたいものなのですが、透過PNGを使う際には気をつけなきゃいけないこともあると思います。
具体的には、

1. 本当に透過PNGを使わなきゃいけないのか？
2. ターゲットブラウザをどこまでの範囲にするのか？
3. IE6など、対応していないブラウザに対してどういう処理をするのか？

ということ。
他にもいろんな考えがあるかもしれませんが、このような問題をクリアしないとなかなか使いにくい状態に陥ると思います。

まず１の問題。

「透過PNGを使う時に～」というタイトルを根本から否定することにもなりますが、実は一番大事なことだと思っています。

使わないでも同じデザイン・機能を表現できるなら透過PNGを使わないほうが確実に安全なサイト作りができると思いますｗ
しかも使わなくても何とかなる場合が結構あると思います。

以前作成したサイトに透過PNGを使ったのですが、対応ブラウザの件（後述）で余計な手間がかかってしまうことも含め、透過PNGを使う必要はなかったと思ってます…。

次に２の問題。

すべてのユーザーがブラウザを最新にしているならまだしも、未だにIE6もしくはそれ以下のブラウザを使っている人も結構います。

そういった人達もターゲットにしたいサイトならば、透過PNGを使わない、もしくはjavascriptを使って透過しているように見せるなどの対処が必要になります。
この場合なら使わないのが最善策な気がします。

最後に３の問題。

２の問題があったとしても透過PNGを使うことを諦められない！という場合には、IE6など古いブラウザでもちゃんと見れるようにしないといけません。
具体的な対応策としては、

1. AlphaImageLoaderを使う
2. javascriptを使う

というもの。
ここらへんが一般的なんじゃないかと思います。

長くなったので、次回に続きます。

<?php query_posts(posts_per_page=10); ?>
<?php if(have_post()) : while (have_posts()) : the_post(); ?>

1ページ目を見たときには全く気づかなかったが、2ページ目を見てみると1ページ目と同じリストが表示されてる…。
どれだけページを進めても実際取得しているのは先頭の10件だけ。

posts_per_pageとかshowpostsとかパラメータの値を変えたり、パラメータ自体を変えたりしてみたが一向に上手くいかない。

調べてみると、フォーラムで同じ質問している人がいました。
それによると、query_posts()は現在ページの指定がないと2ページ目だろうがなんだろうが1ページ目を読み込んでしまうようで、これはquery_posts()だけではどうしようもない様子…。

それでもこの問題が簡単に解決する方法が解説してあったので、早速試してみました。
そこに書いてあった解決法は、以下の通り

<?php $paged = get_query_var('paged'); ?>
<?php query_posts("posts_per_page=10&paged=$paged"); ?>
<?php if(have_post()) : while (have_posts()) : the_post(); ?>

query_posts()の前で、現在のページ数を指定するpagedの値を取得して、その値をquery_postsの毎回入れていくってことなのかな？
おかげさまで悩んでたquery_posts()のワナから抜け出し、スッキリしたのでした。

the_content()とthe_excerpt()の大きな（僕が気付いている）違いは、抜粋表示のしかた。
前者は投稿作成画面で自由に設定できるのに対し、後者は先頭から何文字目までと自動で表示される。
また、後者は本文中のリンクなどは無視され、文字列だけ表示されるのも大きな違い。

そしてさらにもう１つ気になるのは、「続きを読む」を押したときの両者の挙動の違い。
the_content()を使って「続きを読む」リンクを作ったとき、投稿のページを見ようとリンクを押すと、表示されるのは続きの部分から。

一覧ページ等で本文の先頭を読んでいる場合は、同じ文章を見なくてすむし、無駄なスクロールをしなくていいから、これはこれで便利な機能だけど、続きから表示されてしまうと一瞬迷子になった気分になってしまう。
タイトルだけ見てリンクをクリックしたときは特にそう思う。

これがイヤでthe_content()は使わないようにしたんですが、lessというプラグインを使えばthe_contentを使っても、投稿の先頭から表示してくれるようになります。

使いかたは以下の通り

1. 作者のページからプラグインをダウンロード
2. プラグインフォルダにアップロード
3. 管理画面からプラグインを有効化する

これだけで投稿の先頭から表示されるようになります。