有限会社タグパンダ 喜安 亮介 2009/10/8 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部） 最も多く使われているのに……、いや、だからこそ 多くのWebデザイナの悩みの1つは、レイアウトの表示ずれ問題だと思います。これは、各Webブラウザが採用しているレンダリングエンジンの違いから起因している場合が多いです。その中でも、最もWebデザイナ泣かせのWebブラウザなのは、マイクロソフトが開発しているIE（Internet Explore）のバージョン6です。 IE 6は、発売開始当初のWindows XPにデフォルトでインストールされていたWebブラウザということもあり、世の中の多くのユーザー

CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう （ブロックレベル要素を内包するボックスにはpaddingを指定しない。） 左右ボーダーとパディングを設

Tip: High quality CSS thumbnails in IE7 ・Devthought 画像をCSSだけでハイクオリティに縮小サムネイル化する方法が紹介されています。 普通、IEで、img に対して、width, height 指定すると、画像が汚く縮小されちゃってましたが、CSSの指定をしちゃうとそれが解決されるということのようです。 具体的には以下のCSS指定によってそれが可能みたいです。 img { -ms-interpolation-mode: bicubic; } デモページ う〜ん、縮小してもとっても綺麗です。 FirefoxやChromeの場合は何も指定しなくても綺麗に縮小される、っていうのも知りませんでした。 これは、サーバサイドでサムネイルを生成しなくて良くなる場面が出てきて開発者としては手間の削減になりますね。 転送量を考えれば、サムネイルが完全に不要に

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

ドットインストール代表のライフハックブログ

9月18日に開催したCSS Nite in Osaka, Vol.26の高橋 宏祐さん（富士通）の『プロジェクト・マネジャーの真のチャレンジ』のスライドと音声をシェアします。 スライド（PDF、14ページ、0.3MB） 音声（MP3、26:14、15.0MB） 2008年09月24日|固定リンク|コメント (0)|トラックバック (0)

Web制作者をターゲットに企画した「Webデザインセミナー 〜新しいWebのカタチとユクエ」を開催いたしました。 当日の参加者は88名。みなさん熱心にお聞きいただきましてありがとうございました。 お二人のお話は、必要な部分がきちんとまとまっていて分かりやすかったです。事例も過不足なく入ってましたし。すばらしい(^^) セミナーの流れとしては、CSS Niteさんのところで紹介していただいているので、そちらをみていただくとして、こちらでは当日のプレゼンデータと、音声データを公開しますのでお楽しみください。 鷹野さん、益子さん、資料および音声データの公開を快くお許しいただきまして本当にありがとうございました(^^) [CSS Nite × FISC] 新しいWebのカタチとユクエ ■第１部「変革期のウェブ　〜ウェブ制作者に必要なマインドとスキル〜」 音声（前半／後半）／資料　※セミナー中にあ

DiaryTechnology テキストとリンク先を変えるだけで実装できる美しいCSSナビゲーション『Elegant navigation bar using CSS』 美しいナビゲーションメニューを実装したい。 そんなあなたにおすすめなのが、『Elegant navigation bar using CSS』。テキストとリンク先を変えるだけで実装できる美しいCSSナビゲーションだ。 このエントリーでは、↑のような美しいメニューのHTMLソースとCSSソースがすべて公開されている。 「Live preview」からはサンプルがみることができるし、「Download this tutorial」からは全ソースがダウンロードできる。 メニューのテキストとリンク先を変更するだけで実装可能だ。 テキストとリンク先を変えるだけで実装できる美しいCSSナビゲーション、ぜひ使ってみてはいかがだろうか。

Recent Comments Pafuxu: @tanouxさん コメントをしていただき、ありがとうございます。 色の組み合わせはいつも時間がかかってしまいます。この... tanoux: すごくいい感じだと思います。「a.visited」のパープルもわかりやすくていいですね。... Pafuxu: @yostosさん > >JPEG画像ファイルが1/5に圧縮できるとは強力ですね。 > いえいえ、50MB -> 4... yostos: Pafuxuさん、 >JPEG画像ファイルが1/5に圧縮できるとは強力ですね。 いえいえ、50MB ->... Pafuxu: @yostosさん > 例えば30枚でトータル 50MB程度の程度のJPEGの場合DMP+BZIP2ではほとんど圧縮さ... About ここではMacやWeb技術に関連する情報を扱っていく予定です。 This t

プロパティの一覧なんて何処にでもあるんすけど、当たり前のように何かにリンクしてるので、ちょっとコピーしたい時に間違ってクリックしちゃったりっていうアレが嫌だったので、ずらっと並べてみたっす。 ボクの場合、「visibility」ってどうも覚えられない... きっとそんな時にささやかに役立ちます。 値は、一番使いそうなのが入ってたり、どんな値が有るのか分かり難いプロパティや、スペルが覚えにくいっぽいのは｜で区切って一通り書いてあります。 モットーは「コピーしやすい」これです。えぇ。