font-size:82% って何? なんとなくずっと気になってた事があったので書いてみる。 とある友人がcssにいつも(かどうかは知らないけど)「font-size:82%;」を指定してるのを見て「なんでこの『82』という数字が出てくるんだ、男らしく80とかキリのいい数字にしやがれっ、コンチクショー！もちろん良い意味で。」とかひっそり思っていたわけですが、その『82』という数字が気になって気になって仕方ないので･･･ とりあえず計算してみる。 前提として、ブラウザのデフォルトはどれも16pxであると仮定。 (根拠は過去に何かでそう書いてあるのを見た記憶がある！間違ってたらすみません) まず私がフォントサイズを%で使う際には80%を指定する事が多い。理由は多分何かの本かサイトで12px相当にするには80%にすればいいっていうのを見たからだったように記憶している。となると、計算式はこうなるん

フォントサイズ問題のために100.01%を指定 70 Expert Ideas For Better CSS Coding | Smashing Magazineをいつかちゃんと読み直そうと印刷までしておいたのだが忘れてた。今日夕方やっと読み直したので今日はその文書からの話。 上記ページにはタイトルの通り、CSSコーディングのより良いアイデアが掲載されている。ほとんどがわりと有名な話だったりするのだが、これは知らなかったわというものがあったので書いてみる。(とかいいつつ有名な話だったら嫌だな) bodyに100.01%を指定する 上記ページの「1.5. Workflow: Setting Up Typography」の中の「Set 100.01% for the html-element.」の部分。結論から言うと、ブラウザのフォントサイズに関する問題を回避するためにbodyに100.01%

This domain may be for sale!

CSSでのfont-familyの指定がとても悩ましい。文字コードによって表示が変わったりするし、イレギュラーケースまで想定すると煩雑なコードになってしまう。ちょっと整理しながら考えてみる。 まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。 それでは例えば総称ファミリー名（generic-family）である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしま

This domain may be for sale!

Section 1 : 箇条書きの項目(1) Section 2 : 箇条書きの項目(2) Section 3 : 垂直配置 Section 4 : 回り込み Section 5 : ID による絞り込み Section 6 : 要素の大きさ Section 7 : 分類属性 Section 8 : 特別な記述 Section 9 : 要素の配置(1) Section 10 : 要素の配置(2) Section 11 : カスケーディング順位 Section 12 : フォントマッチング(1) Section 13 : フォントマッチング(2) Section 14 : 構造と表現の分離 ― CSS の目指すもの Appendix A : いままでの HTML との対照 Appendix B : 互換性の問題 Appendix C : CSS の構文解析 First step CSS，St

HTML文書の文法をチェックし、採点します htmllint.cgi 1.28 / htmllint.pm 3.58 57,433 lints / 0 visits / since Jan 6, 1998 文法しか採点しません。内容の良し悪しは採点されません。結果に疑問を感じたら必ず結果の解説を読んでください。満点で慢心しないでください。 チェックしない警告は減点対象外で、満点は 100点です。チェックしても減点されない警告もあります。気に入らないチェック項目は外すことができます。お好みに調整してください。 また、基本的な設定項目だけの簡易ゲートウェイもあります。いちいちオプションなんかどうせ指定しないや、という方はご利用ください。 ローカル環境でチェックしたいとお考えの方は、ダウンロードのページを参照してください。 チェック方式 チェックしたいHTMLのURLを指定するか、HTMLを下の

Validate by URI Enter the URI of a document (HTML with CSS or CSS only) you would like validated : Address : More Options

CSS でテキストを画像に置換するテクニックとして、当サイトでは text-indent を使用していますが、「And all that Malarkey」で letter-spacing を使った方法「MIR image replacement」が紹介されていたのでメモ。 拙い英語力なんで、解釈間違っているかも知れませんが、例として以下の物を使い、「Movable Type 3.151-ja」の部分を画像にする場合として説明してみます。 <dl> <dt>powered by</dt> <dd title="Movable Type 3.151-ja">Movable Type 3.151-ja</dd> </dl> んでもって、実際にやってみた詳細とサンプル。 IE5 で見てもらえばわかるのですが、text-indent を使った方法だと、画像がうまく表示されません。一方、 lette

ブロックボックス化した要素を含むリストアイテムの後ろに空行が入る(5.x/6.0) 2003-11-06修正。症状と補足を変更。 2003-12-25修正。補足に回避法を追加。 2004-03-03修正。[3-882]の記述を加え、内容を整理。 症状 リストアイテム要素の内容物の末端にブロックボックスを生成する設定（display:block;）にしたインライン要素を置くと、リストアイテム要素のボックスの直後に空行が発生する。。 例示 <ul> <li><span style="display:block; margin:0; background:yellow;"> ブロック</span></li> <li><span style="display:block; margin:0; background:yellow;"> ブロック</span></li> </ul>

定義リスト dl 内の dt と dd を CSS を使って横並びさせる方法ってのはいくつかあるんだけど、最近どうも記憶力が低下してきた気がするんで、完全自分用メモとして記しておく。 多分オーソドックスな方法 とりあえず最もオーソドックスであろう方法。これ意外にもあるのかもしれないけど、多分今んとこ自分は知らない。（margin を使った方法は前にも記事にしたことがあるけど、一応今回も入れておく） dl_sample01.html float を使った方法 margin を使った方法 position を使った方法 <dl> <dt>foo</dt> <dd>bar</dd> <dt>foo</dt> <dd>bar</dd> </dl> ちなみに margin を使った方法での margin 値の算出方法は、dt と dd それぞれの line-height 値の半分を足し、それに dt