はじめに みなさん、お元気ですか><リリースも終わって、一息ついたあまちゃんです! ヽ(´ー`)ノわー さて今日は、最近「お花サプライズ!」というサービスをリリースしたのですが、そのときにちょっと面白いデータを見つけたのでそのいきさつも含めて紹介したいと思います。 (今日のテーマはこの円グラフ) フェイスブック系のサービスはどのブラウザに対応すれば良い? よく、ウェブサービスを開発するときの悩みとして「古いブラウザでのデザインをどのくらいケアするか?」というものがあります。 「お花サプライズ!」でも、割と短い期間で実装することを目標としていたり、本番の HTML を書いた経験があまりないメンバーが多くいたことで「IE6 や IE7 への対応が鬼門なんじゃないか?」という心配が常にありました。 そこでよぎる甘い誘惑 このご時世、 IE6 とか IE7 に特別対応する必要なんてないんじゃね?
クロスブラウザに対応したベーシック で汎用性のありそうなスライダーを 実装出来るjQueryプラグインのご紹介。 The Lof JSiderNewsは派手な装飾も 無く、シンプルで欲しい機能は揃え てくれている印象です。 なかなか使いやすそうなので備忘録。派手なスライダーが結構多い印象ですが、結局普通のものが一番使いやすいですよね。派手なのもインパクトあって好きですけどw 今日のプラグインもクロスブラウザ対応でベーシックな、汎用性のあるスライダーです。コーポレートサイトと相性いいかもですね。 サムネイルがナビゲーションとして付きます。画像のスライドと共にサムネイルもアニメーションスライドします。デモサイトでは1つしかありませんけど、実装出来る形は6種類から選択できます。IE6でもIE7でも問題なく動作しました。※IE6の透過処理は別途必要です。 デザインは6種 例として2つキャプチャ撮り
「<div id="wrapper">」などのラッパーを使用しないで、レイアウトをセンターに配置するスタイルシートを紹介します。 デモページ ※スタイルにCSS3を使用しているため、この版はIE6には対応していません。後ほど紹介するシンプル版はIE6に対応しています。 「<div id="wrapper">」を使用しないでレイアウトをセンターに配置するスタイルシート 元記事ではスタディが段階ごとに紹介されていますが、ここではその最終段階を紹介します。 CSS:シンプル版 <!DOCTYPE html> <style> html{overflow: hidden; height: 100%; background: #c72;} body{overflow: auto; height: 100%; width: 600px; margin: 0 auto; /* center */ padd
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 のモードスイッチなどの情報も含
Normalize CSS [ad#ad-2] Normalize CSSの主な特徴 Normalize CSSの対応ブラウザ Normalize CSSのデモ Normalize CSSの使い方 Normalize CSSの主な特徴 Normalize CSSは、他のリセット用スタイルシートとは一味違った特徴を備えています。 有用なデフォルトはそのまま 多くのリセット用スタイルシートは異なり、有用なデフォルトのスタイルは維持します。 スタイルの正常化 さまざまな種類のエレメントのスタイルを正常化します。 バグの修正 各ブラウザごとの異なるスタイルやバグを修正します。 ユーザビリティの改善 ほんのわずかな改良でユーザビリティを改善します。 コードの説明 各コードには詳細な説明があります。 Normalize CSSの対応ブラウザ 対応ブラウザは下記の通りです。 Chrome Firefox
IE6, 7でもドロップダウンとしての機能を損なうことなく、そしてCSS3対応ブラウザでは更に見栄えをよくし、ユーザビリティも向上させるスタイルシートのチュートリアルを紹介します。 CSS3 dropdown menu デモページ [ad#ad-2] CSS3非対応のIE6, 7ではCSS3の角丸などは適用されてませんが、ドロップダウンとしての機能は損なわれずに実装されています。 デモページ:IE6での表示 下記は各ポイントを意訳したものです。 HTML HTMLはシンプルで、ドロップダウンはリストの入れ子で実装されています。 <ul id="menu"> <li><a href="#">Home</a></li> <li> <a href="#">Categories</a> <ul> <li><a href="#">CSS</a></li> <li><a href="#">Graphi
User-agent を見て、IE か、Firefox かを切り分けるPHPのscript で最近のはあるでしょうか? IE6,Firefox3 などと大雑把に切り分けてくれるのがいいのがいいです。
人類とIE6の戦いについに終止符、マイクロソフト社が告知サイト「ie6countdown.com」をリリース わけのわからないバグやオレオレ仕様によって、すべてのWebデベロッパーの憎悪の対象であるマイクロソフト社のブラウザ「IE6」。その恨まれっぷりは、プログラマーとデザイナーの間の軋轢を軽く超えることは間違いありませんが、とうとうMS社自らが「IE6終了宣言」に向けて動き始めました。人類とIE6の戦いに、ついに終わりの日が来るようです。 今回マイクロソフト社が立ち上げたサイト「IE6 Countdown」は、いかにIE6のシェアが下がってきたか、なぜ私達はIE9に乗り換えるべきなのかを説明しているサイト。これを見ればあなたも即IE6との戦いに参加することができます。 IE6 Countdown 現在の国別IE6シェア。日本は世界の中ではやや高めとなる10.3%と、技術立国を目指す身とし
インライン要素をセンタリングする場合は、その要素のCSSで text-align: center; という text-align プロパティを与えれば良いのですが、div や table 等のブロックレベル要素をセンタリングする場合、例えば下記のようにマークアップされた ブロックレベル要素、 <div id="test">[ブロックレベル要素]</div> をセンタリングする場合は、CSSに下記のような設定を行います。 #test { margin-left: auto; margin-right: auto; width: [ブロックレベル要素の幅]; } ブロックレベル要素のセンタリングは上記が正しい方法で、Firefox や Opera、また IE6 の「標準準拠モード」や最近リリースされた IE7 では上記の設定で正常に表示されますが、IE6 の「後方互換モード」ではブラウザにバグ
IE6/7でも動作する数少ない、可変レイアウト用グリッドシステムのCSS/JSのフレームワーク「Flurid」を紹介します。 Flurid - The Fluid CSS Grid [ad#ad-2] FluridはCSSベースで開発された可変レイアウト用グリッドシステムのフレームワークで、jQueryのプラグインとしても開発されています。 Fluridの対応ブラウザ Fluridの対応ブラウザは下記の通りです。 Internet Explorer (Windows) - versions 6.0 - 8.0 Mozilla Firefox (Windows/Linux) - versions 1.0 - 3.6 Fluridのデモ デフォルト Fluridのデフォルトのレイアウトです。
IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハックです。IE9はまだベータ版なので有効にならなくなるかもしれませんがとりあえず。 →IE9も正式版で確認済みです。 1.IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハック 以下の順番でプロパティおよびセレクタを記述してください。 body { color: red; /* all browsers, of course */ color: green¥9; /* IE8 and below */ *color: yellow; /* IE7 and below */ _color: orange; /* IE6 */ } body:not(:target) { color: black¥9; /* IE9 */ } IE6:プロパティの先頭にアンダースコア「_」を付与 IE7:プロパティの先頭にアスタリスク
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
内閣官房情報セキュリティセンター(NISC)は2010年6月17日、各府省庁に対して、Internet Explorer 6(IE6)からInternet Explorer 8(IE8)への移行を推奨したことを明らかにした。 IE6は、2001年8月にリリースされたWebブラウザー。最近では、セキュリティや互換性の問題が頻発。例えば2010年1月には、IE6だけを狙った攻撃が確認されている。このためマイクロソフトなどでは、IE6のユーザーに対して、最新版IE8への移行を推奨(図)。グーグルなどのWebサービス提供者は、IE6への対応を順次打ち切っている。 しかしながらNISCによれば、中央省庁の中には、バージョンアップすることなくIE6を使い続けているところがあるという。組織内のシステム(Webアプリケーション)を、IE6用に構築しているためだ。IE8に移行するとなると、既存システムがIE
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers IE8が登場しFirefox3もシェアを伸ばして、IE6の世界シェアは第3位に落ちた。といってもIE6のシェアは依然大きい。次に続くブラウザのシェアをはるかに引き離して主要なブラウザでありつづけている。高いシェアを保持しているため、標準規約に準拠したIE8が登場した現状においても、IE6に対する種々のトリッキーなテクニックは使い続けなければならない。 しかしそんな苦労がかさむ状況は勘弁願いたいということで、2008年年末ごろからIE6を明示的にサポートしないことでユーザに最新のIEやほかの最新ブラウザへ乗り換えるように促すキャンペーンを展開するべきではないかという調子の記事がちらほらと公開されるようになった。James Edwards氏がSite
9年前にリリースされたInternet Explorer(IE)6を使うのは、9年前の腐った牛乳を飲むようなものだ――Microsoftの豪法人が、Webブラウザのアップグレードを促すキャンペーンを実施している。 「IE6は2001年にリリースされたときは、最新のセキュリティ機能を備えていた。その後インターネットは進化し、IE6のセキュリティ機能は時代遅れになった」。Microsoftはキャンペーン特設サイトでこのように述べ、新しいセキュリティ機能を備えたIE8への乗り換えをIE6ユーザーに勧めている。 特設サイトでは、オンライン詐欺やWebブラウザのセキュリティに関する調査結果や、IE8のセキュリティ機能を紹介し、オンライン詐欺から身を守るためにIE8に乗り替えようと呼び掛けている。また「知り合いにIE6を使っている人がいたら教えてほしい」と、友人の名前とメールアドレスを提供するよう呼び
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers 既報のとおり、IE6のシェアは純減を続けている。2009年2月のNet Applications調査によればIE6のシェアはFirefox 3に抜かれて3位に落ちた。今後も下落の傾向は続くとみる向きが多い。しかし、依然として19%を越えるシェアはその次のシェアを獲得している4.5%弱のSafari 3.2を大きく上回る。IE8のリリースが控えている状況ではあるが、WebデベロッパやWebデザイナは依然としてIE6対応を継続しなければならない。 IE6固有の問題を回避する方法はいくつもあるが、それらテクニックをまとめたドキュメントがSitePoint: 10 Fixes That Solve IE6 Problemsとして公開されたので注目しておき
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers Windows 7で提供されているWindows XPモードを利用すると、IE6とIE7、IE8があたかもWindows 7で共存しているように振る舞わせることができる。XPモードではWindows XP SP3の仮想環境が提供される。IE6とIE7をそれぞれ個別の仮想環境に用意すれば、あたかもひとつのWindows 7の中でIE6、IE7、IE8の3つのブラウザが動作しているように振る舞わせることができるという仕組みだ。 しかしXPモードはProfessional、Ultimate、Enterpriseエディションでのみ提供され、Home BasicやHome Premiumでは提供されない。コンシューマ向けのPCを購入した場合、多くのユーザが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く