CSS2を使って簡単に画像のプレロードをするテクニック:phpspot開発日誌
2010年あけましておめでとうございます。 今年は少し開始が遅くなってしまいましたが、本日よりブログを再開させて頂きます。 今年もよろしくお願いいたします。 それでは早速、CSS2を使って簡単に画像のプレロードをするテクニックをご紹介。 次のようにCSS2の「content」プロパティにリソースを指定してあげることで先読みが可能のようです。 content: url(img01.jpg) url(img02.jpg) url(img02.jpg) 複数指定してもOKということみたいです。 対応ブラウザは以下となっています。 IE8+ FF2+ Safari 3+ Chrome 1+ Opera 9.62+ IE6,7は対応していませんが、<img> のようにして呼ばれた時に結局読まれるので、実装の仕方によっては注意が必要ですが、使えないということではないようです。 以下のエントリを参照して
[CSS]テキストを画像の下に回り込ませないようにするスタイルシート
ちょっとしたトリックを使用して、テキストを画像の下に回り込ませないようにするスタイルシートをNO Margin No Errorから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="content"> <img src="thumbnail.jpg" width="50" height="50" alt="Thumb!" /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ligula arcu, luctus nec elementum quis, condimentum a lectus. Suspendisse potenti. Proin neque diam, dictum ac elementum
[CSS]IE6にも対応したテキストリンクをPNG画像に置換するスタイルシート
PNG image replacement in links demo IE6への対応に加え、下記の配慮もされたものとなっています。 画像オフの場合は、リンクはテキストで表示。 CSSオフの場合は、リンクはリストで表示。 画像オフでCSSオフの場合は、リンクはリストで表示。 HTMLは下記のように各ラベルに透過gifが配置されています。 <textarea name="code" class="html" cols="60" rows="5"> <div id="backing"> <ul id="imgReplacement"> <li class="home"><a href="#url1"><img src="ir/trans.gif" width="0" height="0" alt="" />HOME</a></li> <li class="products"><a href="
IE共通の9つのCSSバグをそれぞれ解決する方法:phpspot開発日誌
IE共通の9つのCSSバグをそれぞれ解決する方法がNettutsにて紹介されています。 どれも、なんでだろうと頭を悩ましそうな問題なので解決法を知っておくと簡単に対処できそうです。 1. センタリングが効かない問題 margin: auto を指定した場合の期待する結果 IEの場合以下のようになりますが↑にするための解決法が書かれています 2. 横に並べたいリストが階段状になってしまう IEの場合以下のようになってしまいますがこの解決法も記載されています 3. ダブルマージンフロートバグ マージンの指定が期待通りに出ている例 ↓ IEの場合、margin: 30px 0 0 30px; で定義した値が正しく適用されない例も解決法があります 4. heightの高さ指定が効かないバグ height:2px を指定した場合の想定する表示 IEはなぜか2pxにならないのでこれも解決法が示されて
CSSのプロパティをソートするPerlスクリプト
CSSを書く時に「セレクタ内でCSS仕様書でのプロパティの出現順序に従ってソートする」という個人的なルールを守っている。何かコーディングにおいて便利な理由があるからというわけではなく、第三者に説明する時に「仕様書の出現順で書いてます！」とかで済ませられるから。今まではファイル全体を処理するオレオレPerlスクリプトで適当にやっていたのだけど、Vimで選択範囲だけをソートとかやりたくなったので、普通に標準入力を読んで結果を標準出力に吐くように書き直した。ついでにCSS3のプロパティとFirefox(Mozilla)やSafari(WebKit)、Opera(Presto)、Internet Explorer(Trident)の独自拡張などへも対応させたりとか。 #!/usr/bin/perl # Author: Kyo Nagashima <kyo@hail2u.net>, http://h
とっても使えるoverflowプロパティ。その使い方色々。
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
CSS で table に斜線を引く方法
CSS で table に斜線を引いてみました。下の表の左上の斜線に CSS を使ってます。 サンプル（クリックすればサンプルページに移動します） Windows XP + IE6 / IE7 / Firefox3 / Safri3 / Google Chrome で確認しています。 ポイントは以下です。 th 要素に position: relative; 斜線を引く要素（ここでは span）に position: absolute; を設定。 斜線（border）を適用する要素の前に を設定。 がなかったり、要素の後方に があると、th のスタイルが隠れてしまう。 クロスブラウザにするため、font-size や line-height など、いくつかのプロパティを設定。 HTML <table summary="data"> <thead> <t
css-lecture.com - css lecture リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
CSS3・HTML5のブラウザ対応状況一覧 – creamu
Deep Blue Skyというサイトで、CSS3・HTML5のブラウザ対応状況一覧がまとまっています。 自分のブラウザのCSS3・HTML5対応状況を調べてくれるjavascriptライブラリ、Modernizrを使って調べたようですね。 ↑はMac Firefox3.5。ちょっと残念な感じですね。。 対応状況は以下のようになっています。 Internet Explorer 6, 7 & 8 Firefox 3.5 (Win) Google Chrome (Win) Opera 10 (Win) Safari 4 (Win) Safari 4が一番優れていますね。IEがひどいことになっている。。。 詳しくは以下からどうぞ。 Browser support for CSS3 and HTML5 姉妹サイトである以下のサイトでは、自分のブラウザの対応状況が見られます。IPとかも調べられますよ
[CSS]ナビゲーションに明確なラベルを与えて実装するスタイルシート
dl要素で明確なラベルを与え、シンプルながらスタイリッシュなナビゲーションを実装するスタイルシートをZURBから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <dl> <dt>On This Page:</dt> <dd><a href="">Final Wireframes</a></dd> <dd><a href="">Updated Wireframes</a></dd> <dd><a href="">Initial Wireframes</a></dd> <dd><a href="">Sketches</a></dd> </dl> </textarea>
[CSS]角丸を使用しないで、四隅をすっきりみせるスタイルシート | コリス
divで実装したパネルの四隅を1px欠けにして、角をすっきりみせるスタイルシートをonderhond.comから紹介します。
IE6のバグや仕様の解決方法のまとめ -Ultimate IE6 Cheatsheet
IE6のCSSやJavaScriptなどのバグや仕様で困った時の解決方法をまとめたチートシートをVirtuosi Mediaから紹介します。
【CSS】ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。
こんばんは、ishidaです。 CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。 まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。 ページ送りのサンプル 1 2 3 4 5 6 7 8 9 10 次へ> XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li><strong>1</strong></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]ページのレイアウトやエレメントなどのスタイルシートのテンプレート集%26utm_content%3DGoogle%2520Reader)
css-lecture.com
[CSS]水平に配置するパネルをスマートに実装するスタイルシート
[CSS]スクリプト無しで、ホバー時にパネルを表示するスタイルシート
[CSS]1ピクセルのラインを巧みに使用したドロップダウン型ナビゲーション
[CSS]IE6/7/8で異なるCSSの対応状況をCSS2.1, CSS3ごとにまとめたチートシート
CSS, JavaScript, jQuery, WordPressなどのよく使うコードをまとめたスニペット集