画像置換のあれへの補足
先月あたり、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
PHPベースのYUI CSS compressor「YUI-CSS-compressor-PHP-port」:phpspot開発日誌
PHPベースのYUI CSS compressor「YUI-CSS-compressor-PHP-port」 2012年03月28日- tubalmartin/YUI-CSS-compressor-PHP-port GitHub PHPベースのYUI CSS compressor「YUI-CSS-compressor-PHP-port」 YUIというとJavaというイメージがありますが、PHPベースでお手軽に使えるのがこちら。 残念ながらJavaScriptは対応していませんが、PHPコードでお手軽に圧縮できちゃうのは便利ですね 以下のようなオブジェクト指向なコードで run してあげれば圧縮後の文字列が取得できます PHPなサイト内で動的にCSSを圧縮してインラインで出したい的なニーズに応えられます （圧縮で難読化しつつサイズを減らし、インラインで出すことでコネクション数を減らしてスピー
【CSS】実はこんなに便利！cssのセレクタ指定方法をちょっとだけ掘り起こしてみた | バシャログ。
モニターを見つめる目に優しいメガネがZoffからも出る！しかも度付きOK、フレームも選べる！気になってます。hakoishiです。 さて、今回は実は便利なcssのセレクタ指定方法をちょっとだけ掘り起こしてご紹介。 直下にある要素だけ、とかセレクタ名が部分一致したら、はたまたリンク先パスによって、とか実はかなり便利です！ 特定の要素の直下の要素だけに一括でマージンを設定 特定の文言を含むセレクタ、及びその位置で対象を絞り込み指定 リンク先のパス次第でスタイルを切り分ける 特定の要素・セレクタを例外とする 特定の要素の直下の要素だけに一括でマージンを設定 #container>* { margin: 0 10px; } IE7以上対応。 親>子で、直下要素のみを対象指定。 上記例ではid="container"の直下の要素すべてにマージンが設定されます。 ユニバーサルセレクタには正直不安を感じ
[CSS]セレクタの便利な使い方も学べる、一枚の画像で写真を重ねたように見せるスタイルシートのテクニック
Demo 1 まずは、HTMLから。 HTML img要素をdiv要素で内包したシンプルなHTMLです。 divにclassを付与するのがポイントです。 <div class='stackone'> <img src="image.jpg" /> </div> デモでは下記の画像を使用しました。 Tinkerbell 画像のサイズ：200x130 [ad#ad-2] CSS CSSはステップごとに、説明します。 まずは、margin, paddingをリセットし、bodyの背景カラーをセットします。 * {margin: 0; padding: 0;} body {background: #ccd3d7;} 画像に少しスタイルを加えます。 画像の周りに写真のような縁取りをし、シャドウを加えます。 ※height, widthは画像のサイズに合わせて変更してください。 .stackone {
画像置換に -9999px はつかわない
画像置換という言葉を知っているでしょうか？テキストを「text-indent:-9999px」と指定して、画面の外に飛ばしてしまい背景画像をその代わりに表示する技術です。 画像置換の歴史 画像置換は長いこと使われているCSSのテクニックに１つでしょう。では、このテクニック自体はどのようにして、生まれてきたのでしょうか？ 意外にも、このテクニックは元はC.Z.Robertson氏が1999年に考案し、それを「Todd Fahner」氏やTwitterのDouglas Bowman氏がチュートリアルで説明し、一般的に広めたものです。この時点ではテキストを非表示にするために「display:none」を利用しており、音声リーダーでは読み上げされないなどの問題がありました。 その後、このアクセシビリティ上の問題を解決するために「-9999px」というテクニックを生み出したのです。 現在の画像置換
疑似要素のカラー指定をインラインで行いたい場合のテクニック | コリス
ウェブページを作る際、運用などでさまざまな制約が生じることがあります。 ここでは、擬似要素を使ったスピーチバブルのカラーの指定をインラインで行いたい場合のテクニックを紹介します。 Speech Bubble Arrows that Inherit Parent Color [ad#ad-2] 下記は各ポイントを意訳したものです。 画像を使用しないで、吹き出し状のエレメント（スピーチバブル）を作る時、小さい三角を疑似要素で作るとします。 下記のような感じです。 もし、このピンク色の指定をCSSファイルにセットしないで実装する必要がある場合、どのようにしたらよいでしょうか？ スピーチバブルのdiv要素にインラインで、背景をピンクに指定してみます。 HTML <div class="speech-bubble" style="background: pink;"> I like bananas,
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
