タグ

2012年3月8日のブックマーク (6件)

  • 特に気をつけたいIE6のバグ

    未だある程度のシェアを誇るIE6の有名なバグです。 Seesaaのブログをカスタマイズする上で、カラム落ちなど、大きくレイアウトが崩れる原因は、この2つだと思います。この2つを覚えておくだけでも、かなり違うと思います。 1)floatを指定した場合にmarginが2倍になる このバグは、floatと左右marginの特定の組み合わせで発生します。 下の例は、3つのボックスにfloat:leftを指定し、左右に10pxのmarginを指定しています。 この場合、左floatの一番左のボックスの左marginが2倍になります。 同様に、右floatの一番右のボックスの右marginも2倍になります。 全体の幅に余裕がある場合、問題ありませんが、きっちり合わせた場合、押し出されてカラム落ちになります。 (対策)marginが必要な場合、バグの発生しているボックスに、display:inline;

    特に気をつけたいIE6のバグ
  • PNGの画質を劣化せず極限までファイルサイズを落とす、たった1つの方法 | フリーソフトラボ.com

    ウェブ上で使用される画像ファイルのフォーマットには、主にJPEG、GIF、PNGという3種類の圧縮形式があり、この中で可逆圧縮かつフルカラー、つまり元画像の画質を見た目上一切劣化させることなくファイルサイズを縮小できるのがPNGですが、欠点は高画質な分ファイルサイズが大きくなってしまいがちなこと。 このため、フルカラーのPNGをウェブ上で使用する場合は専用ツール(有名なものではAzConvPNGなど)を使用してファイルサイズの最適化を行い、画質を劣化せずにできる限りサイズを落とした上でサーバーにアップロードされることがよくありますが、それでも削減できるファイルサイズは良くて1割といったところでしょう。 実は、一般にはほとんど知られていませんが、この他にもフルカラーPNGを画質劣化なしに、さらに大幅にファイルサイズを削減できる裏技的な方法が存在します。やり方は少し面倒ですが、うまく使えば非常

    PNGの画質を劣化せず極限までファイルサイズを落とす、たった1つの方法 | フリーソフトラボ.com
  • IE6でよく遭遇するCSSのバグとその解決方法 | コリス

    Dave Woodsのエントリー「IE6 -CSSのバグとその解決方法」から、IE6でよく遭遇する3つのCSSのバグとその解決方法の意訳です。 IE6 - CSS Bugs and Fixes Explained IE6で、マージンが2倍になってしまうバグ IE6で、hasLayoutプロパティによって起こるバグ IE6で、小さい高さを指定した場合に起こるバグ IE6で、マージンが2倍になってしまうバグ IE6で、フロートした要素のマージンが2倍になってしまうバグと解決方法の紹介です。 下記のコードで、IE6はマージンが20pxになります。 sample:バグ #navigation{ float: left; width: 200px; margin-left: 10px; } #content{ float: right; width: 500px; margin-right: 10p

    IE6でよく遭遇するCSSのバグとその解決方法 | コリス
  • アドビの新ツール「Shadow」は、モバイル用Webアプリ開発者必須のツール

    モバイルデバイス用のWebサイトやWebアプリケーション開発で大変なものの1つが動作確認です。何台ものデバイスを机の上に並べて、ひとつひとつ確認しなければなりません。 アドビシステムズのAdobe Labsが公開した「Adobe Shadow」は、そうした苦労をしているデベロッパー、デザイナーにとって手放せないツールになるでしょう。 複数デバイスに対する同時表示とリモートインスペクション Shadowがどんなツールなのか解説用ビデオの説明を紹介しましょう。 iPhoneアプリのShadowを起動すると番号が表示されます。 その番号を、MacOSWindowsChromeブラウザのエクステンションとして配布されているShadowに入力します。これで、ChromeブラウザとiPhoneがペアになりました。 同じように、Android用ShadowもChromeブラウザとペアにすることができ

    アドビの新ツール「Shadow」は、モバイル用Webアプリ開発者必須のツール
  • IEでのCSSのバグを回避するhasLayout | コリス

    IE7で拡大・縮小時にレイアウトが重なってしまったり、IEでフロートした要素がはみ出てしまったりとIE独自のCSSのバグがいくつかあります。 これは、IEのhasLayoutが原因のひとつとなっているので、それを回避する方法を考察します。 hasLayoutとは IEでのCSSのバグを回避するhasLayoutの値 CSSのバグに効果のあるhasLayoutの指定方法 hasLayoutの参考ページ hasLayoutとは hasLayoutとは、オブジェクトがレイアウトを持っているかどうかを示すものです。 hasLayoutの値はread-onlyのため読み込みのみ可能で、falseとtrueがあります。 hasLayoutの値(read-only) false デフォルト値。 オブジェクトがレイアウトを持っていない。 true オブジェクトがレイアウトを持っている。 IEでのCSSのバ

  • [CSS]IE6, IE7, IE8, IE9の各バージョンの分岐をvalidで処理する方法

    CSS Specific for Internet Explorer デモページ(※IE7で表示) [ad#ad-2] デモ紹介 1. 条件付きコメントの利用 2. CSS Hackの利用 3. 条件付きのHTML class デモ紹介 デモページは、下記のように設定されています。 スタンダードブラウザ(IE9, Firefox, Chrome, Safari, Operaなど) 背景色がグレー IE8 背景色がピンク IE7 or IE8互換モード 背景色がグリーン IE6 背景色がブルー 下記はデモページをIETesterで表示したものです。 IETesterの詳しい説明は、「IE5.5, IE6, IE7, IE8の確認が同時にできる -IETester」を参照ください。 デモページ(※IE8で表示) IE9もWin7+IE9で確認したところ、背景はグレーに表示されていました。 [a