妻のパン屋のWebサイトを四苦HackしてIE対応した話 - give IT a try
はじめに 昨日公開した「第一回 プログラマ向けデザイン勉強会の内容を参考にして妻のパン屋のWebサイトをリニューアルしてみた」の続編を書きます。 今回は僕が苦労したIE6〜8対応のお話です。 実はIE8ユーザーの割合はIE9に次いで第2位！ Mac万歳！Chrome万歳！な僕にとって、IEは「どうせ使うことないし、どうでもいいよね〜」という「心の中でサポート対象外なブラウザ」でした。 しかし、店のWebサイトのアクセス解析を見てみると、実はIE9とIE8が1位、2位を占めていることがわかりました。 よく見ると8位にはIE6がまだしぶとく生き残っています。 この結果を見ると、「うーん、こりゃ完全に無視するわけにはいかんな・・・」と考えざるを得ませんでした。 IE対応を全く考慮していないとこうなる まず最初に、IE対応を全く考慮していないと、いったいどんな表示になるか見てみましょう。 トップペ
clearfix(クリアフィックス)の使い方｜CSS | オレのWEBPAD
float(フロート)を使った場合、親要素が領域をなくして潰れてしまいます。それを回避するためにはfloatを指定した要素の後にclear:bothをかける必要があります。 しかしデザイン上、そううまくかけれるとは限りません。そこで頼りになるのがclearfixと言われるハック方法です。 clearfix以外でフロート解除をする方法はこちら clearfix(クリアフィックス)の記述 clearfixはCSSに記述して、クラス名に指定して適応させます。 clearfix(クリアフィックス)の記述 .clearfix:after{ content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden; } .clearfix{ display: inline-block; } /* Hides
WEB制作のIE対策いろいろ チートシートやHTML5/CSS3対応方法など | DECONCEPTER
かわいいあいつIEとの付き合い Internet Explorer 通称 IEはかわいいやつである。私の心を掴んで離さない。IEについて言及すれば火が燃え上がる、存在が燃えている最強の火種だ。 なぜこんなにIEはかわいいのか。テーブルタグでウェブサイトをレイアウトする時代からCSSでレイアウトする時代へ移行する際はIE5/IE5.5/IE6/Mac IE5.2でどうしたら同じレイアウトを実現できるかを苦悩させてくれた強敵（とも）だった。 昨今のHTML5バンザイWEB制作においては、最新機能を使ってWEBサイトを作る上でIEの表示や機能をどうするかという話題が常にモチキリだ。 そんな我々の心を離さないIEの対策をする上で一つ一つ表示を確認しながら作っていたら日がくれて定年を迎えてしまう。IE定年を迎えないためにある程度どういう対応が必要かよくまとまっているサイトを見ていこうと思う。 チート
IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎
IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎 2011-06-04 Twitterなどを見てると、 「IE6がー！」とか 「IE6,7,8,9、Firefox、webkit系、Operaで同じレイアウトにするの大変」などのツイートをたまに見るので、クロスブラウザでも差が出にくく、効率の良くなるコーディングの基礎を紹介します。 気をつけるHTMLの記述方法 HTMLの記述方法を間違えていると、ブラウザCSSの解釈が変わってきます。 以下のようなことは基本的なことですが大切な事です。 DOCTYPEを書く。 HTMLの先頭にDOCTYPEを入れるようにして下さい。 DOCTYPEがないと、ブラウザ間での誤差が起こりやすい状態になります。 DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含
[CSS]最近のウェブ構築には欠かせない要件を備えたCSSのフレームワーク -The 1140px Grid
1280px以上の大きなモニター対応、iPhoneなどのスマホ対応、単調になりがちなグリッドのバリエーション、IE6への配慮など、最近のウェブ構築には欠かせない要件を備えたCSSのフレームワークを紹介します。 The 1140px Grid · Fluid down to mobile [ad#ad-2] 以前、Twitter(@colisscom)で紹介した時からバージョンアップしたようなので、改めてブログでご紹介。 The 1140px Gridは、1280のモニターには1140pxのグリッド、スマホなどのそれより小さいモニターにはその幅に可変したリキッドタイプのグリッドを提供するスタイルシートのフレームワークで下記にその特徴的なポイントを紹介します。 1140pxで12カラムを採用した理由 12という数字は非常に便利で、二等分、三等分、四等分、六等分して利用することができます。また、
CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め
CSS、スタイルシート。初心者のころには CSS のスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近では、やっとひと通り覚えて、思うようにできるようになったかなーという感じです。今回は初心者だったころ、ちょっと悩んだことなどをいくつかまとめてみました。 Webサイトの見た目をデザインしていくのに欠かせない CSS。度々これってどうやるんだろうとか、どうしてこうなっちゃうの？というものに遭遇します。また、今までは IE6 をターゲットに含めてましたけど、そろそろ IE7 からをターゲットにすればいいのかなーと思うこともあって、過去のスタイルシートの書き方の習慣を変えようかなとも思っています。 スタイルシートを書いていて、今まで遭遇した不具合やその回避方法、また今まではこうしてたけど、これからは変わるかもしれないなーといものをまとめてみました。もうそんなことしてない
1分でわかる「X-ナントカ」HTTPレスポンスヘッダ - 葉っぱ日記
最近のモダンなWebブラウザがサポートしている、セキュリティに関連しそうな X- なHTTPレスポンスヘッダをまとめてみました。それ以外にもあったら教えてください。 X-XSS-Protection 0:XSSフィルタを無効にする。 1:XSSフィルタを有効にする。 XSSフィルタを有効にすることでエンドユーザがXSSの被害にあう可能性が低減するが、まれに誤検知することで画面の表示が乱れることもある。IE8+、Safari、Chrome(多分) で有効。IEでは「X-XSS-Protection: 1; mode=block」という指定も可能。 2008/7/2 - IE8 Security Part IV: The XSS FilterBug 27312 – [XSSAuditor] Add support for header X-XSS-Protection X-Content-Ty
[CSS]IEのhasLayout関連のバグと解決方法をまとめたサイト -hasLayout.net
IE6/7/8のhasLayoutが原因でおきるスタイルシートのバグとその解決方法をまとめたサイトを紹介します。 hasLayoutについては、以前のエントリで紹介しているので参照ください。 IEでのCSSのバグを回避するhasLayout hasLayout.net バグは現在、IE6(44個)、IE7(28個)、IE8(19個)登録されており、各ページにバグの解説、バグが生じるデモページ、バグの解決方法とそのデモページなどが掲載されています。 IEのCSS Bugs一覧表の一部 また、CSSのチュートリアルでは、IEの便利なトリックも掲載されています。 CSS Tutorial 例えば、下記のようにIEでクリックした際に生じる点線は、他の箇所をクリックしないと消えないため、クリック後しばらくして消したり、元から表示させない方法などが紹介されています。 クリック時に生じる点線の処理方法
コーディング前に確認しておきたいこと。 - CSS HappyLife
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！ じゃあまずは最初に確認しておきたい基本的なことか
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
[CSS]floatを解除する「clearfix」のIE6/7に対応した改良版
floatを解除する際にclearを使用せずに解除する「clearfix」の改良版をPerishable Pressから紹介します。 The New Clearfix Method いわゆる旧タイプのclearfixはMac IEも対応ブラウザに含まれているため、スタイルシートは下記のようになります。 旧タイプのclearfix <textarea name="code" class="css" cols="60" rows="5"> .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-table; } /* Hides from IE-mac */ * html .cle
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]スタイルシートの量を少し減らした、新しいclearfix -micro clearfix