CSS3のプロパティ、セレクタ、HTML5のWebアプリケーション、コンテンツの埋め込み、フォームに関する主要ブラウザの対応状況をまとめたサイトを紹介します。 HTML5 & CSS3 Checklist 対象ブラウザ 掲載されているブラウザは、下記の通り。 Win Chrome4 Firefox3/3.6 Opera10/10.5 Safari4 IE6/7/8 Mac Chrome5 Firefox3.6 Opera10 Safari4 CSS3の主要ブラウザの対応状況

IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。

2005-03-06 はじめに 2005-03-05 提案の目的 2005-03-07 必須ツール 2005-03-06 注意点 2005-03-11 多くのCSSは図書館方式で整理されている 2005-03-06 図書館方式の例 2005-03-07 図書館方式の利点 2005-03-11 図書館方式の欠点 2005-03-04 図書館方式の何が不満か 2005-03-06 プロパティ別整理法とは 2005-03-04 絶対規則 2005-03-04 推奨規則 2005-03-06 プロパティ別整理法の例 2005-03-11 プロパティ別整理法の利点 2005-03-04 プロパティ別整理法の欠点 2005-03-04 プロパティ別整理法に近い例 2005-03-04 機械との親和性 2005-03-04 Grep検索を活用する 2005-03-04 機械が完全に理解できる 2005-

角丸、ドロップシャドウ、グラデーションなど多彩で面白いスタイルをCSS3では簡単な記述で実装できます。 CSS3でいったい何ができるのか、どのように記述するのかなど、ベーシックなものから実践的なテクニックまでサンプルやコードなど実装例が掲載されているサイトを紹介します。

異なるバージョンのFirefoxでCSSを有効・無効にするハック集が紹介されていました。 Firefox のバージョンによって有効なCSSを出し分けるような場合に使えそうです。 すべてのバージョンのFirefoxをターゲットとする /* 方法１ */ #selector[id=selector] { color: red; } /* 方法２ */ @-moz-document url-prefix() { .selector { color: red; } } /* Firefoxを含むすべてのGeckoエンジンで有効にする */ *>.selector { color: red; } Firefox 1.5 と それ以降のバージョンで有効にする .selector, x:-moz-any-link, x:only-child { color: red; } Firefox 2 以降のバー

ソースコード /* position-fixed */ body { filter:expression(''); } #fixed { position:fixed; _position:absolute; z-index:2; top: 0; left:0; _top: expression( document.documentElement && document.documentElement.scrollTop || document.body && body.scrollTop || 0 + 0 + 'px' ); _left:expression( document.documentElement && document.documentElement.scrollLeft || document.body && body.scrollLeft || 0 + 0 + 'px'

はい、雪を一度も見ないまま　もう３月であります。 年頭に何かやるつもりだったような気もする管理人です。　こんばんは。 先月は後半から急に画像付いてしまいまして。　「オレもまだ、こんなに熱中出来る事があったんだな～」　とか感慨に耽ってみたり。　普段無縁な画像ハンドリングにも多少慣れる事が出来たのは良かったのですが、果たして自分のblogに還元出来るものやら否や。 ・・などと思案に暮れてみたり。 そうこうしながらいつもの某板を覘いております時に、先月の記事とちょこっと関係ありそうなスレが目に留まりました。 曰く、「画像のサイズ指定と縮小について」 最初は質問の意味が良く分かりませんでしたが 要約すると以下のような御趣旨の様子。 「形状・サイズが夫々異なる画像から縦横比を崩さず同一サイズのサムネイルを作りたい」 （　う”～ん。　無理　）　というのが正直な感想でしたが　何と解答を付けられた方が！

「text-indent:-9999px;」や「display:none;」でテキストをウィンドウ外に飛ばしたり非表示にして、代わりに背景画像を表示させる手法を「画像置換(Image Replacement)」というが、これには重大な欠陥があって、最近では使用が推奨されていない。 h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; text-indent:-9999px; } <h5>SITE TITLE</h5> h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; } h5 span{ display:none; } <h5><span>SITE TITLE</span></h5> 上記のようなCSSだと「CS

まずは最近知って便利だと思ったCSSの小技をひとつ。 文章の最後に、「※（米印）」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。 .note { padding-left:1em; text-indent:-1em; } <p class=”note”>※米印を使う場合はこいつが便利。<br /> 改行してもこの通り。ちゃんと開始位置が揃ってる。</p> 「padding-left : 1em;」でまず１文字分右に動かして、「text-indent : -1em;」で最初の行だけ１文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。 他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で

CSSplayには、たくさんのCSSのサンプルがあります。 その中から階層型ナビゲーションの実装サンプルをいくつか紹介します。 CSSplay

CSS-Tricksで、IE用に「expression」を使用して、min-width、max-widthを実現する方法がエントリーされていました。 The Perfect Fluid Width Layout デモページでは、最小幅780pxを維持しつつ、最大幅1280px以上になると残りの箇所は背景画像が表示されるようになっています(参照：キャプチャ画像)。 min-width、max-widthの箇所は、下記のように記述されています。 #page-wrap{ background: white; min-width: 780px; max-width: 1260px; margin: 10px auto; width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 12

Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。 詳しくは、最小限にしたサンプルを作成したので参照ください。 高さの異なるカラムを揃えるスタイルシートのサンプル 下記の「32768px」って、何か特別な意味があるのでしょうか。