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> のようにして呼ばれた時に結局読まれるので、実装の仕方によっては注意が必要ですが、使えないということではないようです。 以下のエントリを参照して
テーブルにスクロールバーをつける
<div style="height:100px; width:300px; overflow-y:scroll;"> <table border=1 height="100" width="300" bgcolor="#9999ff"><tr><td> 表示したいテーブル </td></tr></table> </div> overflow-y:scroll （テーブル横にスクロールバーの表示） overflow-x:scroll （テーブル下にスクロールバーの表示） overflow:scroll （テーブル横・下にスクロールバーの表示） overflow-y:auto （内容に応じて横にスクロールバーの表示） overflow-x:auto （内容に応じて下にスクロールバーの表示） overflow:auto （内容に応じて横・下にスクロールバーの表示）
[CSS]floatを解除する「clearfix」のIE6/7に対応した改良版
floatを解除する際にclearを使用せずに解除する「clearfix」の改良版をPerishable Pressから紹介します。 The New Clearfix Method いわゆる旧タイプのclearfixはMac IEも対応ブラウザに含まれているため、スタイルシートは下記のようになります。 旧タイプのclearfix <textarea name="code" class="css" cols="60" rows="5"> .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-table; } /* Hides from IE-mac */ * html .cle
IE 6とIE 7のためのCSSハック16選（1/3） - ＠IT
有限会社タグパンダ 喜安 亮介 2009/11/17 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部） Webブラウザ別CSSハック一覧表 前回の「IE 6で泣かないための、9つのCSSハック」では、仕様通りの正しいコーディングを行っているにもかかわらず、Internet Explorer（以下、IE） 6で見ると、レイアウトがズレてしまうなどのさまざまな問題を解決するための9つのテクニックを紹介しました。 今回は、IE 6とIE 7のためのCSSハックのテクニックを下記に分けて紹介します。 IE 6をハック（IE 6のみに効く、もしくはIE 6のみに効かないハック） IE 6のみに効くハック スタ
異なるブラウザでフォントサイズが同じに見える方法を実験してみた: 世界中の１％の人々へ
2009年11月| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 文字サイズ100%でもブラウザによって基本文字サイズが違う。 画像は、このブログを異なるブラウザで開いたスクリーンショットを比較できるようにしたもの。左からInternet Explorer 8.0、Firefox3.5.5、Opera!10.01、Safari4.0.4、Google chrome3.0.195.33で、すべてWindows。 Firefoxの文字サイズが小さいことが一目瞭然。 CSSはこう指定してある。 ◇ベースフォントCSS body { font:100%; arial,helvetica,clean,sans-serif;←モダンブラウザ用 *font-size:medium;←IE
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
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.
シンプルだけど便利なCSSプロパティー5 – creamu
WebDesignerWallで、シンプルだけど便利なCSSプロパティーが紹介されています。 ざっとご紹介しますね。 CSS Clip 画像にレクタングルのマスクをかける Min-height 高さの最小値を指定する「min-height」。コンテンツの高さがサイドバーよりも低いときなどに。IE6に対応させるハックもある White-space 「white-space:nowrap」を使って、アルファベットが途中で切れてしまうときに改行させる Cursor ボタンがDisabledになったときに「cursor:default;」を指定してクリッカブルでないことを明示する Display inline / block displayプロパティーを使って、ブロックレベル要素をインライン要素に。その逆もあり 復習がてらに一度見てみてください。 5 Simple, But Useful CSS
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
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.
デベロッパーなら知っておきたいCSSテクニック – creamu
ExtraTutsというサイトで、デベロッパーなら知っておきたいCSSテクニックが紹介されています。 いくつかご紹介しますね。 CSS Browser Selector OS・ブラウザごとにCSSを切り替えられる1行のJavaScript adding a CSS StyleSheet to your RSS feeds RSSフィードにCSSを適用させる方法 CSS Watermark Effect CSSで作るウォーターマーク（透かしテキスト） Forming Tooltip using CSS3 JavaScriptで作る必要があったツールチップをCSS3で簡単に実装する方法 ソースが載っているので、一度見てみてください。 CSS techniques web developer should use 中目で飲みまくり。ある方と会えたし楽しかったぞ。CREAMUをiGoogleに入れ
とっても使えるoverflowプロパティ。その使い方色々。
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://d-lover.com/css/hack.shtml%26utm_content%3DGoogle%2BReader)
css-lecture.com
[CSS]水平に配置するパネルをスマートに実装するスタイルシート
わかばマークのMacの備忘録 : Snippely