Henry Hoffmanのエントリーから、スタイルシートで実装する、タブが重なり合うナビゲーションの紹介です。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="nav"> <li><a href="#" class="start"><span class="right"><span class="center">Menu Item</span></span></a></li> <li><a href="#"><span class="right"><span class="center">Longer Menu Item</span></span></a></li> <li><a href="#"><span class="right"><span class="center">Small</span></sp

CSS Trickのエントリーから、IE6でよく遭遇する6つのバグとその解決方法の紹介です。 IE CSS Bugs That’ll Get You Every Time ボックスモデルのバグ マージンが二倍になってしまうバグ min-width, min-heihgtと同等の指定 Stepdownバグ hover擬似クラスをa要素以外にも対応 透過PNGを透過表示に対応 ボックスモデルのバグ <textarea name="code" class="css" cols="60" rows="5"> div#box{ width:100px; border:2px solid black; padding:10px; } </textarea>

Hartija - Css Print Framework Hartijaをページに実装するには、ダウンロードした「print.css」を下記のように「media="print"」を記述して配置します。 <textarea name="code" class="html" cols="60" rows="5"> <link rel="stylesheet" href="print.css" type="text/css" media="print" /> </textarea>

さて、アナウンスしていたようにIEでposition: fixed;を実現する手法について簡単にまとめておきます。まぁこのテクニックもIE7が出るまでのつなぎです。やり方は大まかには2通りあって、純粋にCSS(スタイルシート)のみで指定する方法とJavaScript(正確にはMS独自のDynamic property ダイナミックプロパティーと呼ばれるもの)を使うやり方です。 まず、1.CSSのみの方法から １．基本的な考え方は、HTML(あるいはBODY)タグのスクロールバーを非表示にして、かわりにDIVタグ(HTMLならBODYタグ)のスクロールバーを表示させる方法です。具体的な記述は以下のようになります。 html { overflow: hidden; } body { height: 100%; overflow: auto; } 次に、固定表示したいDIVタグ(タグは何でも良い

DiaryTechnology CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 CSSでmin-heightをブラウザに関係なく使いたい。 そんなあなたにおすすめなのが、『Easiest cross-browser CSS min-height』。CSSでmin-heightをクロスブラウザにする最も簡単な方法だ。 There are still enough folks using IE6, unfortunately, and it doesn’t support the min-height or min-width CSS parameters. This has caused the invention of a number of different hacks and browser

Bits & Pixelsのエントリー「Cross-browser transparent columns」から、背景が透けるカラムを実装するスタイルシートを紹介します。 <textarea name="code" class="html" cols="60" rows="5"> null<div id="column-1" class="container"> <div class="overlay"></div> <div class="content"> <h2>Content</h2> </div> </div> </textarea>

Konstruktors Notesのエントリー「How to Create Beautiful and Elegant HTML Lists Using CSS」から、CSSを使用して美しくエレガントなリストを制作する方法を紹介します。 How to Create Beautiful and Elegant HTML Lists Using CSS 各ブラウザによるリストのレンダリングの差 リストにmarginやpaddingを指定した場合、「Internet Explorer」と「Gecko, Webkit and Opera」の各ブラウザで、レンダリングが異なります。 <textarea name="code" class="css" cols="60" rows="5"> ul, ol{ margin:auto -3em 1em 0; padding:0; position:rel

This domain may be for sale!

font-size指定 2007-03-10 0 0 XHTML/CSS CSS, font-size 数で合理的にデザインする - サイズ編 で少し書いたfont-sizeについての補足です。 どのくらいの文字サイズで見られているかは，ブラウザとその設定によってまちまちです。でも，せめてデフォルトの状態では意図したレイアウト，フォントサイズで見てもらいたい，という願いもないわけではありません。font-sizeの指定をどうするか，ちょっと考えてみました。 font-sizeは%で font-sizeをpx，pt，inなどで絶対指定すると，Win IEで文字サイズの変更が出来なくなるのをご存じの方も多いでしょう。文字サイズを固定してしまうのはアクセシビリティ上少々問題があります。font-sizeはem，ex，%で相対指定（基準になるものとの比率で指定）するのがよいとされています。 Win

CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size

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