特定のWebブラウザの独自拡張仕様を使っていたり、 特定のWebブラウザの表示が間違っていたために、 Mozillaによって実際に問題が発生した事例の修正方法を紹介しています。 また、ここで紹介する修正案は全てWeb標準仕様に基づいた内容となっています。
Web標準化Tips - Web標準普及プロジェクト
特定のWebブラウザの独自拡張仕様を使っていたり、 特定のWebブラウザの表示が間違っていたために、 Mozillaによって実際に問題が発生した事例の修正方法を紹介しています。 また、ここで紹介する修正案は全てWeb標準仕様に基づいた内容となっています。
table内に画像を隙間無く敷き詰めるには注意が必要です #1 - Web標準普及プロジェクト
table内に画像を隙間無く敷き詰めるには注意が必要です #1 td及びth要素を使って、 画像を敷き詰めたシビアなレイアウトを行おうとした場合、 MozillaではFull Standardモードを使用すると以下のような単純なソースでは意図通りに表示できません。 一応、解決策まで公開しますが、tableによるレイアウトは様々なハンディキャップを持つ方に迷惑をかけることになりますので、 私は推奨しません。しかし、商用サイト等では相変わらず過去との互換のために使用されることが多いので紹介することにしました。 まずは実例を見てください。 <table cellpadding="0" cellspacing="0"> <tr> <td><img src="screenshot/webtips0018_02.jpg"></td> <td><img src="screenshot/webtips00
table内に画像を隙間無く敷き詰めるには注意が必要です #2 - Web標準普及プロジェクト
table内に画像を隙間無く敷き詰めるには注意が必要です #2 注意:この記事の問題はFull Standardモードでしか発生しません。 また、この記事内のサンプルで登場する表組み内の画像には予めvertical-align: bottom;が適用されています。 table要素内に画像を隙間無く詰めるという件に関しては以前に記事を書きましたが、 小さな画像のために複雑な表組みを行うとこれだけでは不十分なことがわかりました。 そこで、今回は更に掘り下げて解説を追加しようと思います。 小さい画像をテーブルレイアウトする場合 まずは次の2つの例を見てください。 <table class="layout"> <tr> <td><img src="screenshot/webtips0018_02.jpg" alt="" height="99"></td> <td rowspan="2"><img
table内に画像を隙間無く敷き詰めるには注意が必要です #3 - Web標準普及プロジェクト
table内に画像を隙間無く敷き詰めるには注意が必要です #3 #1、 #2と2回にわたって解説してきましたが、 今回はテキストをテーブルレイアウトに混在させた場合の問題について解説します。 テキストの表示は読み手がカスタマイズ可能です。また、ブラウザのデフォルト値も微妙に異なります。 レイアウトにテキストが混在する場合、フォント周りの全てのCSSを指定するぐらいの意気が必要です。 繰り返しになりますが、この手法は絶対に好ましいものではありません。 新規にページを作る時にはこのようにならないようにデザインを考えるようにするべきです。 しかし、既に作っているページではこれから紹介する手法によってある程度はブラウザ間、 OS間での互換性は高めることができますので試してみてください。 レイアウトに影響するテキストの自由度 テキストがレイアウトに影響を与えてしまうことで問題になるのは「フォントサイ
フォント名の指定は一般名と併用するべきです - Web標準普及プロジェクト
固有のフォント名だけを指定しないでください フォント名を指定する場合に(特にオーサリングソフトを使われている場合だと思われますが)、 次のようなフォント指定を行っているサイトがあるようです。 font-family: "任意のフォント名"; この「任意のフォント名に特殊なベンダー特有フォントを指定していることもありますし、 「ＭＳ ゴシック」を指定している場合もありますが、これらはあくまでも特定の環境に依存した指定です (ＭＳ ゴシックはWindowsには標準でインストールされているフォントですが、他のOSにはありません)。 WWWはサイト作者とは異なる環境の人も見ることになるわけですから、これは意図通りの表示が行われないことを意味します。 フォントの一般名も併記してください フォントはその種類ごとに一般名がCSSの仕様で定義されています。 フォント名を指定する場合は次のように一般名も併記
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
