CSSハックの種類は色々ありますが、その中で役に立ちそうなハックだけを一覧にしてみました。 CSS Validation Serviceに通るハック(valid)とエラーになるハック(invalid)に分けています。 少ない記述でハックを使いたいと思う方はプロパティでのCSSハック一覧表をご覧下さい。 ・08/06/06 IE8の検証を載せました。 ・08/06/29 Firefox 3の検証を載せました。
ローカルで生きている環境がWindows XP+Internet Explorer(以下IEと略)6.0マシンが2台、Mac OS X、OS9が各1台あるので、各OS、ブラウザ、バージョンによって見え方にあまり違いが生じないように吸収しているつもりですが、Windows Vista+メイリオはたまに外出先でチェックしながら修正するだけなので、いまひとつ対応がしきれない状況でした。 現在のスクランブルエッグのIEユーザのうち、IE6は60%、IE7は37%です。時間とともにIE7の割合が増えていくことは歴然としています。 XPマシン2台のうち1台にWindows XP ServicePack3をインストールすることをきっかけにIE7もインストールし、さらにメイリオフォントも入れることにしました。 メイリオダウンロードの詳細 : Windows XP 向け ClearType 対応日本語フォン
CSSの実装にはブラウザごとに大きな違いがあり、これが制作する側には大きな悩みになっております。 このため、各ブラウザの不具合を逆手に取ってプロパティの定義を変えるなどと言う対策を執る事も考えられます。 但し、プロパティ定義の不具合を逆用するやり方(俗に CSS Hack(ハック)と呼ばれます)は、スタイル定義ファイルを肥大化させるなど、余りお勧め出来るものではありません。最終手段的なものと思った方が良いと思われます。 尚、ネットスケープ 4.xに関しては、<link>要素のmedia属性値にall値か複数の値を適用する事で簡単に回避出来ますので、ここでは解説を割愛させて頂きます。 また、ここではCSSの文法に違反しない範囲での方法を解説する事とします。 ここで紹介し切れない合法的な方法もまだあるのですが、一通り解説すると細かくなり過ぎるので、最低限のものを解説する事としました。 実はCS
このページでは、<DIV>を横に段組していく方法を紹介します。 <DIV>の特徴は、前のページで説明したので、 まだ見てない方は、そちらを見てからでお願いします。 さて、前のページで、<DIV>はちゃんとした設定をしないと、 横に並べることができない、ということを紹介しました。 でも、ちゃんとした設定といっても、たった1つの属性を、書き込むだけなので、 かんたんなんです。 ここでは、スタイルシートの定義方法のなかで、 もっとも一般的な、「CLASSセレクタ」をつかって、段組していきます。 では、とりあえず、2つの<DIV>を、横に並べてみましょう。 なぜこのように、横に段組できるかというと、 「box1」と「box2」で定義している「 float属性 」のおかげです。 この、 float属性 は、 要素の配置と回り込みを指定するための属性 ですので、 この場合、「
IE6ではDDが2個続くと数pxずれる。 DL,DT,DDを強引に表のように表示するやり方だけど、データが表ならTABLE要素を使おう。 Comments:15 アサノ 2005年8月24日 12:27 今まさに仕事でその数 px の件 (厳密には WinIE6 で 3px?)で悩み疲れてて、もの凄い無理矢理な方法で解決してます・・。どっかに晒しとこうかなあ。 wu 2005年8月24日 12:29 え・・!この数px消せるなら、強引な方法でも知りたい!! っ!! アサノ 2005年8月24日 12:33 うお。まじすか。ほんじゃ自分とこにでも晒しときます。 アサノ 2005年8月24日 13:29 とりあえずここに置いておきます。 http://www.mushline.com/junky/etc/20050824/dl_dt_dd_float.html 時間があれば後で説明ブロギし
CSS設定でオブジェクトを半透明にできるプロパティがあります。 IEのみのCSSプロパティでしたが、Firefox・Operaでも同じように表示可能にできる方法を説明したサイトがありましたので紹介しておきます。 他にもいくつかのOpacityプロパティを使ったTipsが紹介されていますので、参考に覗いてみてください。 CSS Opacity in Mozilla,IE, and Opera http://www.mandarindesign.com/opacity.html CSS Opacity設定 以下のコードでIE・Firefox・Opera・Netscape・Safariで同等表示がえられます。 filter: alpha(opacity=25); -moz-opacity:0.25; opacity:0.25; IE alpha(opacity=透明度); 100が100%とな
表示に使用するフォントの種類が変わると、同じフォントサイズで表示していても文字の見た目の大きさが変わってしまう。デザインによっては全体のバランスや文字の可読性が変わり、ユーザビリティやアクセシビリティにも影響してくる。 そこで、font-size-adjustプロパティを利用して、表示に使用するフォントが変わっても、文字の見た目の大きさが変わらないように設定してみよう。font-size-adjustプロパティには、これまでWindows版のFirefoxが対応していたが、Firefox 3ですべての環境のFirefoxで利用できるようになった。 フォントの見た目の大きさの違い 次のサンプルは、同じ文章をウェブページで利用される主要なフォントで表示したものだ。フォントサイズはfont-sizeプロパティで16ピクセルに設定しているが、見た目の大きさはフォントの種類によってかなり異なることが
前回はアルファチャンネルを使った透明度の設定について紹介したが、透明度はopacityプロパティでも指定することができる。opacityプロパティはFirefoxやSafariでもバージョン3以前から対応しているので、今回はアルファチャンネルとopacityプロパティの違いについて見ていきたいと思う。また、Firefox 3が新しく対応したCSS 3のtransparentの処理についても紹介する。 なお、透明度に関する規格については、CSS 3の勧告候補CSS3 Color Moduleを参考にしている。 また、今回からは先週リリースされたFirefox 3のBeta 3を利用する。Beta 3では、第3回「CSSで罫線を角丸で表示する(1)」で紹介した「背景画像の角丸表示」に対応したので、確認してほしい。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く