[B! technical] maRkのブックマーク

画像置換のあれへの補足

先月あたり、CSS による画像置換テクニックの話題がにわかに盛り上がりを見せていました。その経緯についてまとりさんの記事で紹介されていますが、僕からも簡単に補足してみます。まず、よく知られた画像置換のテクニックとしていわゆるファーク式がありました: /* Phark method */ .ir { height: 100px; width: 400px; background: url(image.png) no-repeat 0 0; text-indent: -9999px; } このテクニックは長らく利用され続けてきましたが、その代替として、パフォーマンス面でより良いとされる Scott Kellum さんのテクニック (ケラム式) が Jeffrey Zeldman さんの記事で紹介されました: /* Kellum method */ .ir { height: 100px

maRk 2012/04/17

リンク

要件に合わせたMedia Queriesの実装方法のまとめ | コリス

スマートフォン・デスクトップをはじめ、IE6などのレガシーブラウザ対応といった要件に合わせたMedia Queriesの実装方法を紹介します。 Techniques For Gracefully Degrading Media Queries [ad#ad-2] 下記は各ポイントを意訳したものです。テクニック1：スマートフォンユーザーがメインテクニック2：レガシーブラウザは非対象テクニック3：スマートフォンユーザーのみテクニック4：デスクトップユーザーがメインテクニック5：レガシーブラウザも含めるテクニック1：スマートフォンユーザーがメイン最初に紹介するテクニックは、Media Queriesをそのまま使うものです。 CSS #container { _width: 460px; /* IE6用 */ max-width: 460px; } @media only scree

maRk 2011/08/16

リンク

背景画像をブラウザの枠いっぱいに表示するテクニックの考察

最近のトレンドの一つでもある背景画像をブラウザの枠いっぱいに表示する実装方法はたくさんあります。その中から、理にかなった最新のテクニックや、より多くのブラウザに対応させるテクニックを紹介します。 Perfect Full Page Background Image [ad#ad-2] 下記は各ポイントを意訳したものです。各デモはページ下部のDownload Files」で、まとめてダウンロードできます。背景画像をブラウザの枠いっぱいに表示するテクニックとは CSS3を使ったテクニック CSSだけで実装するテクニック：その1 CSSだけで実装するテクニック：その2 jQueryを使ったテクニック背景画像をブラウザの枠いっぱいに表示するテクニックとは前提として、下記のポイントが挙げられます。画像でページをいっぱいにします。空きは無いようにします。画像のサイズは必要があれば調整しま

maRk 2010/11/26

リンク

[使える CSS テクニック] CSSだけで実現するPhotoアルバム | バシャログ。

集中連載「使える CSS テクニック」も第 9 回になりました。今回は CSS だけで画像ギャラリーを作ります。画像の挙動は、（IE6 でも同様の表示ができるように）a タグの擬似クラスだけで設定しています。サンプル XHTML <div id="album"> <ul> <li><a id="photo01" href="#slide"><em><img src="css_album/img/photo01.jpg" /></em><span>日本大通り駅</span></a></li> <li><a id="photo02" href="#slide"><em><img src="css_album/img/photo02.jpg" /></em><span>指路教会</span></a></li> <li><a id="photo03" href="#slide"><em><i

maRk 2008/06/30

リンク

Feedback - Tips & Technique

maRk 2008/03/29

リンク

CSS の画像置換で画像にリンクを設定する

「画像置換」とは、ヘッダ部分にあるブログ名などのテキストを画像に置き換える手法で、文書構造やSEOを損ねないための複数のテクニックが紹介されています。このエントリーでは、画像置換をしつつ、さらに画像にリンクも与えられるサンプルを作ってみました。*1 １．サンプル１ h1 の後方に img を置く場合は、CSSハックを使います（h1 のフォントサイズを固定することで画像配置位置がブラウザに依存しなくなると思ったのですが…）。表示は Windows XP + IE6/IE7/Firefox2/Opera9/Safari3 でしか確認しています。画像置換サンプル1 (X)HTML <div id="header"> <h1>タイトル</h1> <div><p><a href="[URL]"><img src="[画像のURL]" alt="[代替テキスト]" title="[ツールチップ用テ