Applerの備忘録（仮）

2009/04/30

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	○	×	○	○

ラベル: 技術, 資料

17:52 0 件のコメント

2009/03/27

OperaでPDFなどをオンラインリーダーで開くようにする

「Mac OS X」では特に何もインストールしなくとも「Preview.app」で見られるようになったPDF。
「Windows」では「Foxit Reader」を使えば「Adobe Reader」よりも手軽に見られるようになったであろうPDF。

今度はWebブラウザでPDFやDOCやXLSを見られるようにしよう――と試行錯誤しました。成果をご覧ください。

[暴満館] OperaでPDFをオンラインリーダーで開くようにする
暴満館はUser Javascriptを使っていますが、ここでは違った方法でオンラインリーダーへアクセスさせます。

FirefoxはOpen IT OnlineやGreasemonkeyを使えば同じような機能を実現できます。

メニューを書き換える

「クイック設定」に「ブラウザの識別」設定を表示させる
できれば下記も参考にしてください。
カスタマイズの基本#Operaのインストールフォルダにあるファイルは出来る限り編集しない

下記の設定はリンクを右クリックしたときに出てくるコンテキストメニューに項目を追加します。
リンクを右クリックしたときのコンテキストメニュー

強調部分を追加してください。

[Link Popup Menu]

Item, M_BOOKM_ITEM_POPUP_MENU_OPEN  = Open link, -2, "urlinfo"
Item, MI_IDM_MENU_PAGEBAR_LINK_IN_NEW_PAGE  = Open link in new page, -2, "urlinfo"
Item, MI_IDM_MENU_PAGEBAR_LINK_IN_BG_PAGE  = Open link in background page, -2, "urlinfo"
--------------------1
Item, MI_IDM_HLITEM_GET_IN_NEW_WINDOW  = Open link in new window, -2, "urlinfo"
Item, M_OPEN_BACKGROUND_WINDOW  = Open link in background window, -2, "urlinfo"
--------------------2
Item, M_LINKS_PANEL_BOOKMARK_LINK  = Add link to bookmarks, -2, "urlinfo"
Item, MI_IDM_POPUP_LINK_ADDRESS  = Copy link, -2, "urlinfo"
Item, MI_IDM_SAVELINKDOCAS  = Save link, -2, "urlinfo"
Item, M_SAVE_LINK_TO_DOWNLOAD_FOLDER  = Download url, -2, "urlinfo"
--------------------3
Item, "Google Mobile Proxyで読む" = Go to page, "http://www.google.co.jp/gwt/n?u=%l"
Item, "Vuzitで読む" = Go to page, "http://vuzit.com/view?url=%l"
Item, "Zoho Viewerで読む" = Go to page, "http://viewer.zoho.com/api/view.do?apikey=c58ca12c4db1223738bbaf60349edad8&cache=false&url=%l"

下記の設定はアドレスバーのアドレスを右クリックしたときに出てくるコンテキストメニューに項目を追加します。
オンラインリーダーのパラメータにクリップボードの文字列を貼り付けた後にアクセスします。リンク先ではなく、直接URLを指定して文書を開きたいときに使います。
アドレスバーを右クリックしたときのコンテキストメニュー

強調部分を追加してください。

[Edit Go Widget Popup Menu]
Item, MI_IDM_EDIT_UNDO    = Undo
Item, M_REDO    = Redo
--------------------2
Item, MI_IDM_EDIT_CUT    = Cut
Item, MI_IDM_EDIT_COPY    = Copy
Item, MI_IDM_EDIT_PASTE    = Paste
Item, M_PASTE_AND_GO    = Paste and go
Item, MI_IDM_EDIT_DELETE    = Delete
--------------------3
Item, M_COPY_TO_NOTE    = Copy to note
--------------------4
Item, M_CLEAR_ALL    = Clear
Item, MI_IDM_EDIT_SELECTALL    = Select all
--------------------5
Item, "貼り付けてGoogle Mobile Proxyで読む" = Go to page, "http://www.google.co.jp/gwt/n?u=%c"
Item, "貼り付けてVuzitで読む" = Go to page, "http://vuzit.com/view?url=%c"
Item, "貼り付けてZoho Viewerで読む" = Go to page, "http://viewer.zoho.com/api/view.do?apikey=c58ca12c4db1223738bbaf60349edad8&cache=false&url=%c"

Google Mobile Proxy・Vuzit・Zoho Viewerの3つのサービスをメニューに加えますが、お好みに応じてどれかだけを残しても良いでしょう。

なお、各サービスの対応形式は以下のようです。（独自調査含む）

	Google Mobile Proxy	Vuzit	Zoho Viewer
PDF	○	○	○
RTF	○	○	○
CSV	○	○	○
DOC	○	○	○
DOCX	×	○	○
ODT	×	○	○
SXW	×	○	○
XLS	○	○	○
XLSX	×	○	○
ODS	×	○	○
SXC	×	○	○
PPT PPS	○	○	○
PPTX	×	○	○
ODP	×	○	○
SXI	×	○	○
PS	×	×	×
DWF	×	×	×

Vuzitの対応形式：General Help - Vuzit Online Document Viewer
Zoho Viewerの対応形式：アップロードできるファイルの種類

PDFファイルなどへのリンクにマークを付ける

ユーザースタイルシートが何か分からない方はShishimushi - Opera のユーザーモードを隅々までお読みください。

マークをアイコンにする

ユーザースタイルシートに以下を追加します。

[href$=".csv"]::before,[href$=".rtf"]::before{content:url(data:image/gif;base64,R0lGODlhEAAQAKIEAMbGxoSEhAAAAP///////wAAAAAAAAAAACH5BAEAAAQALAAAAAAQABAAAAMzSBrcrpCEQSsNIkprWYYTRwnkt4kVYIbooIIt9S6xu9bz2eYsyuO32E+4AhiPSF5pyUwAADs=);}
[href$=".doc"]::before{content:url(data:image/gif;base64,R0lGODlhEAAQANUgANvh8gZCm0RrvGCAylhwppOr5rnI7XmT1oCe5jJVmT1otmeK1TVesgg4ia672IOc2ipit4uk3Vd90E52y3eKnGd+syg+bfDy+oml6U1qpwlLsgU2goSEhMbGxgAAAP///////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAACAALAAAAAAQABAAAAaIQJCQQywahUgQ58NsMjkeYaGAQRwWkokA8oSCCk6nhukpexCGxwCwJkQ0nfincwaoAQJAhjKezz0HHwcCDgkRCQYBHX50Cx8VAgQbDBYfioweEh8EiBsbDh8NcYt0Ex+TFxsKTBtOdKthrKN/EBq2AbgNnq5RQ2GjpL1KsbxIHMDIccJQZs3NQQA7);}
[href$=".pdf"]::before{content:url(data:image/gif;base64,R0lGODlhEAAQALMPAPsICf+0tP+KiqcBAtygof/q6vxhYf/Y2IsBA+5UVfYSFcbGxoSEhAAAAP///////yH5BAEAAA8ALAAAAAAQABAAAARm8ElGq5X4Mcc7Z41EJCSpJIrygY+ZvgDCNXSDvikADN7SKIigcEDshSaeRMCI2XAKBkGh42t2BIGDIXuoIjlbgcCgMBiOGk5gO3UUAgT0Zn3wcLwag9J+l5vbdngMC4SFhoI1iYoRADs=);}
[href$=".ppt"]::before,[href$=".pps"]::before{content:url(data:image/gif;base64,R0lGODlhEAAQANUgAO+TaZQ4LY8zJpE6M/CXXdd/XsdzV8VoTYcsJ9uDYvCkb//8+X0iGvCabPDJmfC6hlYMD9F3WMtULfbWxvJ/S/z07rA5L51dSP7n27BdQ6pJN7xdRYSEhMbGxgAAAP///////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAACAALAAAAAAQABAAAAaTQJCQQywahUgQ58NsMonCRKJQiBgOh83m+eGAEh9MZjC4TD7bj2ftKWA0lQVkgJhsOvhPp52JyyUNGRpOexECFBQAgAoBGngdeh4GAw4ODwAACgIBhB4HGQSWDQAEGQKPkQdvBAqkFhgInVsYBgEBBhgfDKh7WoIaAQIIDAydSEt6eo+Qe8dOz5HHy9N4Hsds2NlBADs=);}
[href$=".xls"]::before{content:url(data:image/gif;base64,R0lGODlhEAAQAMQfADRMGDhsIDRiFGuuZVWWRUiLOJXDkEaELDt3HI+8ij19I2SnXTNZFV6OVs3bzP79+trl2nOkb6CynpuvmoaohG+abOTr5FygVTJsDQoKCoSEhP7+/sbGxgAAAP///////yH5BAEAAB8ALAAAAAAQABAAAAWL4CdqZGmK6Kd57MOyWicOw3IRRHEoCPzIg41wKMSwMh3kwLAgbByNywTDqXo4mYXFMDhELgWI8XrtXJ6GiyLA2QiqnGvGmbikAxWIgBXndAoJCAECCQUBEgxwcgdEFIMNAC9lCkREkWR+CBibAgwMAKB9cigrcH1WfqSSq2Wkpq9VMiMdSbS0GUhIIQA7);}

[href$=".docx"]::before,[href$=".odp"]::before,[href$=".ods"]::before,[href$=".odt"]::before,[href$=".pptx"]::before,[href$=".sxc"]::before,[href$=".sxi"]::before,[href$=".sxw"]::before,[href$=".xlsx"]::before{content:url(data:image/gif;base64,R0lGODlhEAAQAKIEAMbGxoSEhAAAAP///////wAAAAAAAAAAACH5BAEAAAQALAAAAAAQABAAAAMzSBrcrpCEQSsNIkprWYYTRwnkt4kVYIbooIIt9S6xu9bz2eYsyuO32E+4AhiPSF5pyUwAADs=);}

勝手に使ったアイコン達……

By Gmail: http://mail.google.com/mail/images/doc.gif; http://mail.google.com/mail/images/xls.gif; http://mail.google.com/mail/images/ppt.gif; http://mail.google.com/mail/images/pdf.gif; http://mail.google.com/mail/images/generic.gif; http://mail.google.com/mail/images/txt.gif; http://mail.google.com/mail/images/zip.gif
By Google Docs: http://docs.google.com/images/doclist/icon_4_doc.gif; http://docs.google.com/images/doclist/icon_4_spread.gif; http://docs.google.com/images/doclist/icon_4_pres.gif; http://docs.google.com/images/doclist/icon_4_pdf.gif; http://docs.google.com/images/doclist/icon_4_generic.gif; http://docs.google.com/images/doclist/icon_4_photo.gif

マークを文字列にする

普段画像を非表示にしている方におすすめです。
PDFファイルへのリンクに文字列のマークをつけた例

ユーザースタイルシートに以下を追加します。

[href$=".csv"]::before{content:"[CSV]";font-size:9px;color:red;}
[href$=".doc"]::before{content:"[DOC]";font-size:9px;color:red;}
[href$=".pdf"]::before{content:"[PDF]";font-size:9px;color:red;}
[href$=".pps"]::before{content:"[PPS]";font-size:9px;color:red;}
[href$=".ppt"]::before{content:"[PPT]";font-size:9px;color:red;}
[href$=".rtf"]::before{content:"[RTF]";font-size:9px;color:red;}
[href$=".xls"]::before{content:"[XLS]";font-size:9px;color:red;}

[href$=".docx"]::before{content:"[DOCX]";font-size:9px;color:green;}
[href$=".odp"]::before{content:"[ODP]";font-size:9px;color:green;}
[href$=".ods"]::before{content:"[ODS]";font-size:9px;color:green;}
[href$=".odt"]::before{content:"[ODT]";font-size:9px;color:green;}
[href$=".pptx"]::before{content:"[PPTX]";font-size:9px;color:green;}
[href$=".sxc"]::before{content:"[SXC]";font-size:9px;color:green;}
[href$=".sxi"]::before{content:"[SXI]";font-size:9px;color:green;}
[href$=".sxw"]::before{content:"[SXW]";font-size:9px;color:green;}
[href$=".xlsx"]::before{content:"[XLSX]";font-size:9px;color:green;}

お好みで線の色など細かいスタイルを変更されると良いと思います。

完成例

これで起動が遅いPDFリーダーや動作が遅いOfficeとおさらばできますね！

追記：Zoho ViewerのAPIキーについての質問への回答
Googleにて「site:viewer.zoho.com/api/view.do?apikey=」と現在検索しますと、今回記事に載せたAPIキーを使用したZoho Viewerのサービスページがヒットします。
これはこの記事によって書かれたからヒットするようになった――というわけではなく、先に紹介されたFirefoxのアドオン「Open IT Online」で使用されているAPIキーと同一のため――と勝手ながら推測します。

APIキーはご自分で取得できるならばそうするのが望ましいですが、（不特定多数の人に利用される）「Open IT Online」で使われているAPIキーを使用しているため、また、GoogleでヒットしちゃうAPIキーを使用しているため、APIキーを取得するのがご面倒な方はそのまま記事のものを利用されるのが良いかと考えております。

満足頂ける回答になれば良いのですが。

ラベル: 技術

19:26 1 件のコメント

2009/01/19

Tube8のFLVをダウンロードするブックマークレット

18禁版Youtubeとも言われるYourFileHostというサービスがあります。

昨年YourFileHostの動画をFLVでダウンロードするブックマークレットでも作るかと思い立ったことがありましたが、思い立ったその翌日に、エロい日本人が多過ぎて日本へのトラフィックが凄まじいという理由から、日本からのアクセスが制限されたためブックマークレットを作る意味がなくなったということがありました。
（参考：YourFileHost - Wikipedia）

どうせエロい日本人のことでしょうからすぐに次の標的（サービス）を見付けるのでしょうが、EroいGeekなErogeekのゆーすけべーがTube8を使ったサービスを作りまして、今迄様々なサービスに拡散していたエロい民がTube8に流れ込むと予想されます。

そんなエロい民と私のために動画をFLVでダウンロードできるブックマークレットを作りました。
YourFileHostから動画をダウンロードするときのように難しくなるかと思いましたが、超簡単でした。

javascript:(function(){location.href=videourl;})();
Tube8の動画再生ページでこのブックマークレットを実行すれば直ちに動画をダウンロードできますよ。

ラベル: 技術

16:05 0 件のコメント

2009/01/09

わたしのOpera

タブの数を目を凝らして数えてみたい方に教えておきますと、81個のタブが開かれています。画面解像度が1280×1024なので、最近欲しい1920×1200くらいの画面ですともうちょっと開けるんじゃないでしょうか。ピボット機能対応の画面であればもういくつ開けるんだか夢がひろがりんぐ――。

この状態でのメモリ消費量は物理と仮想合わせて約413.5MBです。
工夫して使用しているため、これでもメモリが節約できている方なのですが、友人からは「まるでPhotoshopだ」と言われました。

ラベル: 雑記

10:15 0 件のコメント

FirefoxでOperaの「ウィンドウ幅で表示」を実現するスタイルシート

*:not(embed):not(applet){max-width:100%;white-space:normal;}img,[type="image"]{height:auto !important;}

これをユーザースタイルシートに設定すればOperaのように横スクロールを防止することができます。
適当に画像を用意してから下記のHTMLを自作して確認するとよろしいかと。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
</head>
<body>
<img src="foobar.jpg" width="2000" />
</body>
</html>

3年ほど前にFirefoxを使い倒した後、Operaの「ウィンドウ幅で表示」という設定の便利さに惹かれ、Operaに乗り換えました。

私はOperaを愛していますので、「この機能がFirefoxでも使えるなら乗り換えようかな」というわけにも行きませんが、最近はFirefoxのメモリ消費量も減り、動作速度も速くなってきたという噂ですので、これからまたいじくり回してみましょうかねえ。

ラベル: 技術

6:57 0 件のコメント

Applerの備忘録（仮）

CSS Spriteの流派をまとめる

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

CSS

HTML

解説

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

CSS

HTML

解説

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

CSS

HTML

解説

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

CSS

HTML

解説

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

CSS

HTML

解説

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

CSS

HTML

解説

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

CSS

HTML

解説

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

CSS

HTML

解説

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

OperaでPDFなどをオンラインリーダーで開くようにする

メニューを書き換える

PDFファイルなどへのリンクにマークを付ける

マークをアイコンにする

マークを文字列にする

完成例

Tube8のFLVをダウンロードするブックマークレット

わたしのOpera

FirefoxでOperaの「ウィンドウ幅で表示」を実現するスタイルシート

自己紹介

携帯端末用QRコード

ラベル

アーカイブ ファイル

アーカイブファイル