CSS Spriteの流派をまとめる

Yahoo!ニュースがリニューアルしてレスポンスが速くなったそうですが、高速化手法の中に「CSS Sprite」というものがありました。

いくつかある画像を1つの画像に連結し、CSSにて連結画像の中にある目的部位を切り出して表示しようという技術です。サーバに対するリクエストの数を減らす効果があります。

（今日の大嘘 - by edvakf in hatenaもそうですが、Yahoo!ニュースの一部のCSS Sprite画像も余白が多く、「速くする技術使ったよ」というのは説得力に欠けるのですが）



最近よく見るこのヘンテコな技術について調べ、転送の速さだけでなく、利便性を損なわないような形でこの技術を使えないものだろうかと考えました。

ではその成果を生かしてあれこれしようと思いましても当備忘録程度ではサーバにリクエストする画像の数など高が知れています。

そういうわけで、使わない技術はすぐ忘れちゃいそうなので、書き残しておきます。



※以下、Web標準に従っていない記述がありますが、見た目を調整するためなどのささやかな考慮のつもりです。Web標準に従うべきという意見もごもっともですが、あなたが自分でCSS Spriteを使うときにそのように調整して使えばよろしいかと思います。

方法1 imgを用い、topとleftで指定する

CSS

.sprite{
overflow:hidden;/*clip使用時消去*/
position:relative;
}
.sprite img{
position:absolute;
}
#div1{/*clip使用時消去*/
width:32px;
height:32px;
}
#img1{
top:0;
left:-32px;
/*clip:rect(0 64px 32px 32px);*/
}

HTML

<div class="sprite" id="div1"><img src="sample.png" alt="" id="img1" /></div>

解説

imgで材料となる画像をひたすら貼り付け、画像の該当箇所をtopとleftから指定する方法です。

画像サイズの指定のためにdivにidを付けていますが、例えばアイコンのような使用する画像の大きさが決まっている場合にはdivのclassの中に画像サイズの指定を入れてしまえば良いため、その場合には手軽な方法の一つになります。そうでない場合でdivのidをどうしても使用したくない場合、.spriteのoverflow:hidden;を消し、img1にclip:rect(0 64px 32px 32px);などと画像の範囲を指定することで代用可能です。

しかし、GoogleのトップページでスタイルシートをOFFにすれば分かりますが、そういう条件下では要らぬ画像が入ってきて何が何だか分からなくなります。

方法2 スペーサーの背景にする

CSS

.sprite{
background:url(sample.png) no-repeat;/*no-repeatは不要？*/
}
#img1{
width:32px;
height:32px;
background-position:-32px 0;
}

HTML

<img class="sprite" src="space.png" id="img1" alt="SAMPLE" />

解説

方法1のスタイルシートOFF時の画像が煩わしい場合に使える方法です。

悪しき風習、スペーサーPNG/GIFを使用し、画像表示がONになった時のimgの挙動――（imgのsrcを指定しなかった場合の）「altテキストの展開」と「ファイル行方不明のアイコンの表示」を無理矢理避けています。

divなどで囲まなくてもimgのclassとidを駆使して1つの要素だけで機能を実現できるので、コードがとてもシンプルになります。

画像表示OFFの場合はaltテキストが見えるため、そこに何のコンテンツがあるのか推測できますが、スペーサーを置換するような挙動であるためにスタイルシートOFF・画像表示ONの状態では画像があるのかさえ判別できなくなります。

見えないくらいなら方法1のように余計に見えた方が良いと思いますが、この悪い方法を使用しているサイトが少なくとも2つ存在します。

例えば、AmazonのサイトでスタイルシートOFF・画像表示ONにするといくつかのボタンが消えます。

方法3 インデントで文字列を画面外に追いやる

CSS

.sprite{
background:url(sample.png) no-repeat;/*no-repeatは不要？*/
display:block;
text-indent:-1000%;
}
#img1{
width:32px;
height:32px;
background-position:-32px 0px;
}

HTML

<span class="sprite" id="img1">SAMPLE</span>

解説

方法2に似ていますが、imgを置いていません。方法2と同じく、コードをシンプルに仕上げられます。

text-indentを使用して背景の上に乗っている文字列を画面外に寄せてしまうというやや強引な方法です。

最近ではYahoo!ニュースで使われましたが、こちらの方法はスタイルシートON・画像表示OFFにするとコンテンツが見えなくなってしまう問題があります。

方法4 文字列のみを消し、背景を残す

CSS

.sprite{
background:url(sample.png) no-repeat;/*no-repeatは不要？*/
}
.sprite span{
display:none;/*visibility:hidden;*/
}
#img1{
width:32px;
height:32px;
background-position:-32px 0;
}

HTML

<div class="sprite" id="img1"><span>SAMPLE</span></div>

解説

divの背景に画像の該当箇所を指定し、spanの文字列をdisplay:noneやvisibility:hiddenで消し去ります。

コードはやや冗長になりますが、考え方がより単純なので方法3よりも初心者向きかもしれません。

効果は方法3と全く同じで、この方法も条件によってコンテンツが見えなくなる問題があります。

方法5 空spanの背景を文字列に被せる

CSS

.sprite{
text-align:center;
vertical-align:middle;
position:relative;
overflow:hidden;
}
.sprite span{
background:url(sample.png) no-repeat;/*no-repeatは不要？*/
position:absolute;
}
#div1{
width:32px;
line-height:32px;
}
#img1{
width:32px;
height:32px;
background-position:-32px 0;
top:0;left:0;/*余白からはみ出ないよう調整*/
}

HTML

<div class="sprite" id="div1"><span id="img1"></span>SAMPLE</div>

解説

テキストが入っていないspanの背景に画像の該当個所を指定し、それを代替となる文字列に被せます。

スタイルシート・画像表示がONになっていようとOFFになっていようとそれなりにコンテンツを認識させてくれます。

透明な余白がない画像に対して真価を発揮しますが、そうでない場合、spanにある文字列がはみ出すことがあります。

方法6 spanを画像に置き換える

CSS

.sprite{
position:relative;
}
.sprite span{
content:url(sample.png);
position:absolute;
}
#img1{
left:-32px;
top:0;
clip:rect(0 64px 32px 32px);
}

HTML

<div class="sprite"><span id="img1">SAMPLE</span></div>

解説

方法3・方法4とほぼ同じ効果がある方法です。

背景を表示させるのではなく、contentによって文字通り「置き換え」をしています。

コードは冗長になり、分かりやすさも手軽さも劣っていると思われますが、背景としてはでなくimg要素で貼り付けられた画像と同じように処理させるため、例えば右クリックから材料の画像を保存することができるようになるという小さなメリットがあります。

方法7 空spanを画像に置き換えて文字列に被せる

CSS

.sprite{
position:relative;
text-align:center;
vertical-align:middle;
overflow:hidden;
}
.sprite span{
content:url(sample.png);
position:absolute;
}
#div1{
width:32px;
line-height:32px;
}
#img1{
left:-32px;
top:0;
clip:rect(0 64px 32px 32px);
}

HTML

<div class="sprite" id="div1"><span id="img1"></span>SAMPLE</div>

解説

方法5とほぼ同じ効果がある方法です。

backgroundがcontentになり、#img1の部分がごっそり変わったのみという変則になります。

方法6と同じく、画像が背景としてでなくimg要素の画像と同じように処理されるので、右クリックから保存することができるようになります。

追記：方法8 paddingで領域を作り、背景を表示させる

CSS

.sprite{
overflow:hidden;
display:block;
height:0;/*width:0;*/
background:url(sample.png) no-repeat;/*no-repeatは不要？*/
}
#img1{
width:32px;/*height:32px;*/
padding-top:32px;/*padding-left:32px;*/
background-position:-32px 0;
}

HTML

<span class="sprite" id="img1">SAMPLE</span>

解説

livedoorクリップにてforestkさんに「自分が使ってる方法が無かった」という指摘を頂いたため、独自に調査し、作成した例文です。

方法3・4・6と同じ効果がありますが、padding-topやpadding-leftを使うところが特徴的です。

代用可能な変形パターンがあり興味深くはありますが、わざわざこの方法を使う意図は謎です。

条件別、コンテンツの表示に支障がないか表

	StyleON & ImageON	StyleON & ImageOFF	StyleOFF & ImageON	StyleOFF & ImageOFF
方法1	○	○	△	○
方法2	○	○	×	○
方法3	○	×	○	○
方法4	○	×	○	○
方法5	○	○	○	○
方法6	○	×	○	○
方法7	○	○	○	○
方法8	○	×	○	○

アイスバイン（Eisbein）

塩漬けした豚すね肉の煮込み。ビールと。ドイツもいいよね！

グランドキャニオン

どーも、細川です。
趣味は、ホームスチールです！

嘘です、好きなキャニオンは、グランドキャニオンです！


というわけで、見てきました、グランドキャニオン。
さっそく、グランドキャニオンで撮った写真をどうぞ！





冗談です。さすがにそこまで鳥好きじゃありません。
ただグランドキャニオンには「カリフォルニアコンドル」という名の、幻の鳥がいるらしいです。
上の写真の鳥は、主観ですがあまり幻っぽくないので、カリフォルニアコンドルではないと思われます。

で、ちゃんとした写真です。



孤独感が最高でした。
見た瞬間の第一声が、「ふざけんな！お前ら何キャニオンだよ！」ってぐらい、グランドキャニオンでした。
もう少しわかりやすく言うと、帰り道にホテルに着く前に、既にもう1回行きたくなってるぐらい、グランドキャニオンでした。

ただ、僕の英語の聞き間違いが原因で、1番の絶景ポイントを逃してしまったっていう・・・

それもあって、ホテルに着くや否や次の日も行くことを決意し、ヘリコプターを予約。
2日目はヘリコプターで見てきました。これも良かったですね。
景色は前日にも増して最高でしたが、ヘリコプターに酔った酔った。


あとは、滞在したホテルのあるラスベガスの夜景。



これまた、「何ベガスだよ！」ってぐらいラスベガスでした。

ただ、グランドキャニオンでは最高に孤独を楽しめたのに対して、ラスベガスはひとりで来る場所じゃないなーと思いました。寂しかったよー。


というわけで、密度の濃い週末は終了して、先ほどミネアポリスに帰って参りました。
真夏のような場所から、再び冬のような場所に移動です。
帰国まであと5日です。ではまた！

空前の鳥ブーム到来

どーも、細川です。
好きなゲームは、シーソーゲーム～勇敢な恋の歌～です！


外に出ると、いろんな鳥がいて楽しいですね。
ちょっと日本にはいないような鳥がたくさんいて、面白いです。



鳥に言っときましたよ。
「お前らすげーよ、日本の鳥には無理だよ」って。


鳥の話ばっかですいません。
別にもともと鳥が大好きなわけじゃないんですけどね。
アメリカといえば人種のサラダボウルなんて言いますが、ここに来て人だけじゃなく鳥の多様性を目の当たりにして、ちょっと何か鳥が結構好きな人になっちゃいました。


鳥以外にも、今日は野生のウサギを見ました。

いつもの僕ならここで、運動方程式ラビットを合成した写真を載せるのがお決まりですが、今回は違います。本当のウサギに遭遇したので。ただカメラを持っていなかったので写真は撮れませんでしたが、本当に見たんです、信じてください。

替わりに鳥の写真をもう1枚載せておきます。




さて、アメリカに留学に来ているわけですが、週末ぐらいは思い切り遊んでも良いだろうということで、予定にはなかったのですが急遽、グランドキャニオンに行ってこようと思います。
広大な自然に圧倒された未来の僕が、その素晴らしさをブログで伝えようとしたときに、「どーも、細川です」の後に続く文章を何と書くか、既に予想できてしまうのは僕だけでしょうか。


ではまた！

ミネアポリス

どーも、細川です。
アメリカでは子供でも英語がペラペラとは良く言ったものですが、むしろお年寄りでもジャンクフードをガツガツ食べることに着目したい僕は、うちのおばあちゃんがジャンクフードをガツガツ食べる様子を想像できるほどの想像力を持ち合わせていません！


さて、シカゴに別れを告げ、ミネアポリスに舞台を移しました。
ミネアポリスは本当に静かなところで、ベッドの中で、三重で思い付いた個人的な名言「何も音がしないときの音が聞こえるからね！」という言葉を思い出しました。

それでも朝になると、信号が青になったときの「ピヨッ、ピヨッ」って音がして目が覚めたので、一体どこの信号が青になったんだろうと思って外を見ると、リアル鳥でした。

さすがミネアポリスの鳥は違う。
日本の鳥には無理。


あと家の外にリスが大量にいます。
「アメリカ行ったらリスには気をつけろよ！」とみんなから受けた忠告を思い出しました。

2秒後に、その忠告はリスじゃなくてスリだった気もしました。


僕の頭がでかい話聞きます？
僕は頭の大きさには定評があって、高校の野球部では合うヘルメットがなかったため監督に特注サイズをオーダーしてもらったほどなのです。
そこで、何もかもビッグなアメリカで、僕の頭にフィットする帽子を探そうと思ったわけですよ。


駄目だ、見つからない！彼ら、顔は小さい！
ではまた！

散歩部。

散歩が楽しくてしょうがない。

毎日散歩をして暮らせないかとも思うけど、
そうもいかず、仕事もしなければいけないので、
土日は散歩する感じになっている。
町の中でもいい。海や山や川なんかもいい。
この辺は川とか緑地とかも多いし、学生街とかも面白い。

疲れたら、焼き鳥屋なんかに入っても面白い。
みんな知らないと思うけど、一括りに焼き鳥といっても、店ごとに色々違う。
面白い。

同じ道を通っても、日々情景は変わるし、
先週まではいなかったような虫がいたり、花が咲いたり、枯れたりしている。
なんかもう色々な物がありがたい感じでしょうがない。
困ったなぁ。

Google Analyticsにsaiwai住むと人のいう。

ということで、久々のGoogle Analytics定点観測でございます。
対象は今年1月1日から、今までね。
それ以前の扱ってない部分は、
二人だけの秘密としておきましょう。

去年の12月上旬にgoogleにスパム扱いされ、
検索対象からも外され、もしかしたらこれがgoogle村八分？状態と絶望していた年末年始。
すっかり更新の意欲も失せ、他所に4つぐらい匿名性の高いブログを書いては愚痴ってました。
スパム扱いが何の予告も謝罪もなく外れ、一月下旬から検索にもかかるようになり、
だいたい、現在は一日あたり100前後のアクセス数となっております。

3月には一日あたり158アクセスを観測。
三月って三回しか記事書いてないのね。
オーバークロックの記事が良かったのか何なのか。

検索サイトからのアクセスが80%。リンクからが15%。
検索で引っかかっただけだから、直帰率は高く、サイト滞在時間は低くなってる。
まあ、ろくなこと書いてないからなぁ……

地域で言えば、上位10国は、
日本韓国アメリカ中国香港カナダフィリピンオーストラリアフランスシンガポール。
アクセス数が高まったので、もちろん地方はそれぞればらけてるけど、
やっぱり日本が97%でダントツ。

国内の上位10箇所は、tokyo,osaka,saiwai,shibuya,nagoya,shinjuku,sapporo,fukuoka,hodogaya,ichikawa。
saiwaiってどこなんだってgoogle mapで調べたけど、よく解らない。
たぶんなんだけれども、円の場所から、川崎市幸区のことかもしれない。
フレッツのアクセスポイントがあるからかな。

tokyoってのも大雑把であれだけれども、
要約すると、東京大阪川崎名古屋札幌福岡横浜千葉ってことで、
まあ大都市圏からのアクセスが多い。たぶん人口が多いから。

索ワードは相変わらずFirefox、エロ系、マザーボードの設定系、
最近はノートパソコンのアクセスも増えつつある感じ。

意外に多いのが"原宿ドッグ" "熊耳武緒" "ベルク"。
それぞれ興味の対象ではあるけれども、
来てくださった方が望むような情報がなかったろうなぁと、申し訳なく思います。

リンクをたどってのアクセス元は、最近お世話になっている"はてな"経由が多い。
ブックマーク、ハイク、ダイアリーから。
あとは友人のサイトからと検索がほとんど。たまにスパム。

なんだろう、たまにmixiからアクセスがあると焦る。
晒されているのだろうか？

あと、Yahoo知恵袋に私のサイトが回答として載っていた、なんてのもありましたw

最後に"なかのひと"の年齢解析。
前回からだいぶ変化している。
10代後半からのアクセスが多いっていう前回の結果よりリアルな気がするこの頃さ。

でもなんとなく、ちょっと凄いな、と。
これ、本当にどういう統計をとってこうなるんだろう。
仕組みが知りたい。

ミレニアムパーク

どーも、細川です。
運動方程式ラビットがタマゴを産むかどうかという議論を始めたら、なんでヒゲが片方しかないのにバランスが取れているのかとか、なんで顔に輪郭がないのに目や口が固定されているのかとか、収拾がつかなくなること必至なので、勘弁して！


シカゴの日本の都市との違いは、建物がでかいこと。
そのでかい建物には、広告とかネオンサインがまったくなくて最大限に芸術的なこと。
そのでかい建物は、海（とか湖）沿いだけに集中して林立していて、少し奥に入ると何もないこと。

あとはそのでかい建物同士の間には十分なスペースがあって、でかい公園とかがあること。
シカゴには、ミレニアムパークいう公園があります。



写真のオブジェクトは、正式名称は「クラウドゲート（雲の門）」というらしいですが、地元の人は単に「ビーン（豆）」と呼んでいるそう。
これを作った芸術家は、力作が豆呼ばわりされて激怒しているそうです。


さすがシカゴの鳥は違う。
あんなにツルツルな部分に止まることができる。
日本の鳥には無理。




こんな感じで、自分の後ろの景色を見ることができます。




ではここで日米比較。
慶應のある日吉駅にある「虚球自像」（地元の人は明らかに「銀玉」と呼んでいる。作った人が激怒しているかどうかは不明）と比べてみましょう。




んー、いい勝負かな。
では！

テスト（携帯からブログに投稿）

テストです

イースター

どーも、細川です。
好きなオバマは、バラク・オバマです！


というわけで、アメリカはシカゴです。
昨日、オバマの家を見てきました。
普通の家なのに、タクシーやら警察やらがたくさんいて、軽く観光名所と化してました。

僕のアメリカ初日は偶然にもイースターでした（※イーブイの進化形はブースターです）。
というわけで、タマゴやらウサギやらがこれ見よがしに散在していました。

------------------------

復活祭にかかわる習俗としてもっとも有名なものにイースター・エッグ（Easter egg）がある。これは復活祭に殻に鮮やかな彩色を施したり、美しい包装をしたゆで卵を出す習慣である。国や地域によっては、復活祭の際に庭や室内のあち こちに隠して子供たちに探させるといった遊びもおこなわれる。近年では卵だけでなく、卵をかたどったチョコレートも広く用いられている。
主に英語圏やドイツではイースター・エッグと並んで、イースター・バニー（ウサギ）もイースターのシンボルとされる。ウサギは多産なので生命の象徴であり、また跳ね回る様子が生命の躍動を表しているといわれる。イースター・エッグ同様、ウサギをかたどったチョコレートやパンが作られる。
（wikipediaより引用）

------------------------

店に入れば、こんな感じです。



なるほど、確かにタマゴとウサギがいます。

そして夜のシカゴの街を歩いていると･･･




「たまご産んだけど、要る？」

韓国旅行を終えた運動方程式ラビットとの再会が待っていました。
（つづく）

アメリカへ行く人の日記

どーも、細川です。
好きな募集は、急募です！


ドタバタして未だに準備ができていませんが、明日アメリカへ旅立ちます！
ドタバタし過ぎて明日、「すいません、まだ日本にいます」っていう日記を書く可能性も否定できない感じですが、アメリカに行く予定なのです！

準備をしないといけないので今日はここまでにしますが、今後はアメリカからの更新をお楽しみに。


今週末は主に飛行機の中にいそうなので、先週の問題の解答と今週の問題はさっき仕上げて右にアップしておきました。
どーぞー。

接続詞とロジック

どーも、細川です。
好きな枝豆の連結数は、3つです！


さっきまで論文を書いていてようやく目処が付いたので、ブログを更新します。

昨日斎藤先生に言われてなるほどと思ったことがあったので、だいたいこんな感じのことだったなーってのを備忘録として書いておきます。


日本人は英語で論文を書こうとするとき、接続詞を多用する傾向がある。
ButとかThereforeとか、すぐに入れたがる。
入れたほうがいいと思っている。
なぜなら日本語で、しかしとかしたがってとか、言うからである。

接続詞を入れることで論理的な文章が完成するのは間違いない。
でも問題がある。
それは、接続詞に頼り過ぎて、文章を論理的な並びにすることを考えないことである。
接続詞を入れれば、本来論理的でない文章の並びを、無理やり論理的に持って行くことができるからである。

一方でネイティブが書く論文は、接続詞が少ない。
接続詞が少なくても、なぜか論理的。
それは、接続詞に頼らず、というか接続詞を考えている暇があったら、文章の並びを考えるからである。
接続詞の存在を忘れることによって、文章の骨組みそのものを論理的なものにすることができるのだ。

なので、できるだけ接続詞を使わずに、文を組み立てる練習をしましょう！


っていう話、なんかいい感じじゃないですか。
カープは阪神に2連敗しましたけどね！


ではまた！

今週はすみません

どーも、細川です。
好きなルイージの帽子の色は、緑です！


更新できてなくてすいません。
論文提出と大学院の諸々の手続きとアメリカ出発の準備に追われて、さらに何かと緊急事態が発生して、今週はやばいです。

忙しいという字は心を亡くすと書くという噂ですが、本当に今週は心がどっか行ってます。心、脱走しました。
落ち着いたらちゃんと更新します！


とはいえ問題演習はちゃんと右にアップしてますので。
どーぞー。

ではまた！

プロ野球開幕

どーも、細川です。
好きなナウシカは、風の谷のナウシカです！


今日はオーム社で、「理想の電子教科書」に関するミーティング。
このテーマはずっと聞かされていて、僕としても非常に興味を持っていたのですが、今日は初めて具体的に人が集まり、初めて具体的に話をしました。
そして非常に志の高い、尊敬できる東大の修士2年の人たちと出会いました。
この人たちと、何かいいものを作っていけるといいなぁ。

ところで、プロ野球が開幕しましたね。
今日はそのミーティングの後、徒歩で東京ドームへ行ってきました。



僕は物心ついたときからずっとカープファン。しかもかなり重度の。
皮肉なことに、ずっと生きてきてカープ以外の11球団（最近できた楽天の代わりに近鉄をカウント）の優勝はすべて見てきたのに、未だにカープだけ見ていないっていう。

去年は天谷のユニフォームでスクワットをしていた僕ですが、今年は赤松のユニフォームにしました（部屋で撮影）。8000円もするんですよ。



勝ちました。シーボルが打ってくれましたね。
去年のCS進出が消滅したベイスターズ戦でのホームランを見て以来、僕は「来年はシーボルが爆発する」と言い続けてきました。
この予言、的中の兆候が見られました。
シーツとかラロッカ並の助っ人になると信じています（つまり他球団に獲られる、と）。

今年はシーズン中はほとんど日本にいないからあんまり応援に行けないけど、頑張ってほしいものです。
今日の唯一の心残りは、小窪が出なかったから今年新しくできた小窪の応援歌が歌えなかったということですね。


ではまた！

「知の衰退」からいかに脱出するか？

どーも、細川です。
エイプリルフールに一切嘘をつかずに過ごすことに、かっこよさを見出し始めたんですけど。


さて、読書レビューの2回目は、今年に入ってから読んだ本の中で1番良かったと思った本を紹介します。
かねてからの予告通り、数ヶ月前に読んだ本になりますが、大前研一さんの本です。



「『知の衰退』からいかに脱出するか？」（大前研一・著　光文社）


この本売れてますよね。
まだ読んでいない方は是非。

いかに自分で考えることが大切か。
いかに今の日本は危機に瀕しているか。
それと同時に、いかに日本はチャンスに溢れているか。

こういうことを、教育、政治、税制、経済、IT、英語、メディアなど、非常に広範囲に亘るトピックを通じて、傲慢にも聞こえるけれども論理的過ぎて納得せざるを得ない、いつもの大前節で斬る、というか嘆く、そんな内容です。
本当に、豊富な経験と抜け目のない分析に裏打ちされた文章は、毎度の事ながら読んでいて知的に気持ち良いし、最後の「諦め」の気持ちからユニークな生き方を推奨するクライマックスには、グッときてしまいました。

賛否両論あるでしょうが、誰にとっても読んで損のない本だと思います。
話題の新鮮さを楽しむべき本でもあるので、大学生は授業が始まるまでの余暇にお勧めです。


ではまた！