Web制作者がブックマークしておきたい、HTMLやCSSで困った時にチェックしたいリソースのまとめ | コリス

2017/04/24 130 users コリス Flexbox コンポーネント リソース CSS

2017年4月11日、Windows Vistaのサポートが終了しました。 これによりIE9のサポートは必要なくなり、今まで躊躇していたHTMLやCSSを利用できるようになりました。 Flexboxでコンポーネントはどう ...記事の続きを読む 続きを読む

Flexboxでどういうレイアウトができ、各プロパティはどのように挙動するのかがよく分かる -Flexbox playground | コリス

2016/02/09 188 users Fle Flexbox サポートブラウザ コリス Vista

2016年1月12日にIEの古いバージョンのサポートが終了し、Windows 7/8はIE11、VistaはIE9がサポートブラウザになりました。Vistaはアレなので、実質IE11を考えてWeb制作をすればよいことになります。IE11を対象した際に、Flexboxの導入を考える制作者も多いと思います。 ※Vistaは2017年にサポート終了（参考: Windows製品のライフサイクル ） Fle... 続きを読む

なぜサポートが終了した Web ブラウザーを使うと危険なのか? - monoe's blog - Site Home - MSDN Blogs

2015/10/14 167 users 前回 ユーザー バージョン 事情 来年

前回の記事でも紹介させていただいたように来年 (2016) の 1 月 12 日をもって、IE9 以前の Internet Explorer はサポートが終了します。 しかし、機能が停止したりするわけではありませんので、事情を知らないユーザーはそのままサポートが切れたバージョンの Internet Explorer を使用し続けてしまう可能性があります。もしくは、サポートが切れていることを知ってい... 続きを読む

css3アニメーションのレパートリーがきっと増える！動きの参考になる21サイト | 株式会社WEB企画スタッフブログ

2015/03/06 157 users レパートリー プロパティ 近頃 アニメーション 普及

css3でアニメーションを使用するサイトが近頃増えてきました。背景としては、css3アニメーションのプロパティにほぼ対応しているスマホ端末の普及や、animationプロパティ未対応のIE9（IE6～IE8を含む）のシェアが低下してきていることが挙げられると思います。 ですが裏を返してみると、css3に対応しているブラウザは年々増えてきていますので、今後ますます実装するサイトが増えていくのではない... 続きを読む

[CSS]2013年、素敵なアイデア満載のスタイルシートのテクニックのまとめ | コリス

2013/12/19 362 users Gmail ネック コリス 進化 Google Apps

今年もCSSの進化が止まりません。 これからのプロジェクトに使ってみたくなるような素敵なアイデア満載のクリエイティブなスタイルシートのテクニックを紹介します。 利用する時にネックになるのがIEですが、来年になるとXPのサポートが終了、そういえばGmailなどのGoogle AppsでのIE9のサポートも終了しました（参考：サポートされているブラウザ -Google）。来年はより多くのテクニックが利... 続きを読む

GoogleがIE9のサポート打ち切り決定、Gmail・Googleカレンダー・Googleドライブなどに影響 - GIGAZINE

2013/11/07 195 users ウェブブラウザ GIGAZINE Gmail http 影響

Windows8.1と共にウェブブラウザ「Internet Explorer(IE)」も最新版の11がリリースされました。これに伴って、Googleは、GmailなどでのIE9のサポート打ち切りを決めました。 Google Drops Support for IE9 http://googlesystem.blogspot.jp/2013/11/google-drops-support-for-i... 続きを読む

IE9, IE10が抱えるHelvetica問題について初めて知った件 | IDEA*IDEA

2013/07/03 427 users IDEA Helvetica Helvetica Neue

ドットインストールのお問合せでご指摘いただいたのですが、IE9、IE10で次のようなバグがあるそうです。知らなかった・・・爆発してくれ。 ■ 発動条件 次のような条件で発動します。 bodyのfont-family指定で、最初にHelvetica（Helvetica Neue）が記述されている。 閲覧しているPCにHelvetica（Helvetica Neue）がインストールされている。 ■ 現... 続きを読む

IE8以上ならもうスクリプト無しでOKのモーダルウインドウを表示するスタイルシート -CSS Modal | コリス

2013/05/13 146 users コリス iOS モーダルウインドウ スクリプト無し 配置

テキストや画像などのリンクをクリックすると、画像をはじめあらゆるHTMLの要素が配置可能なモーダルウインドウを表示するスタイルシートを紹介します。 CSS Modal CSS Modal -GitHub CSS Modalのデモ CSS Modalの使い方 CSS Modalのデモ デモはIE9を含む、すべての最新のモダンブラウザでご覧ください。モバイル系は、iOS, Android2/3/4のM... 続きを読む

古いIEでも無事動くか？–Webサイトの互換性テストサービスmodern.IEをMicrosoftが立ち上げ

2013/01/31 216 users Microsoft 古いＩＥ デベロッパ 手直し Webサイト

Microsoft自身がいくら変えたいと思っていても、いまだに古いバージョンのInternet Explorerを使っている人は多い。そのためデベロッパは、自分のWebアプリケーションが、たとえばIE7やIE8で無事に動くよう、テストや手直しに余計な時間をかけなければならない。IE9とIE10は、Microsoftが懸命にHTML5やCSS3などの標準規格の忠実な実装に努力した。そして、今や古いI... 続きを読む

妻のパン屋のWebサイトを四苦HackしてIE対応した話 - give IT a try

2013/01/17 336 users 続編 割合 2013-01-18 give IT a try

2013-01-18 妻のパン屋のWebサイトを四苦HackしてIE対応した話 Coupe Baguette デザイン はじめに 昨日公開した「第一回 プログラマ向けデザイン勉強会の内容を参考にして妻のパン屋のWebサイトをリニューアルしてみた」の続編を書きます。 今回は僕が苦労したIE6〜8対応のお話です。 実はIE8ユーザーの割合はIE9に次いで第2位！ Mac万歳！Chrome万歳！な僕にと... 続きを読む

[CSS]斜めのダイヤモンド状のグリッドを実装するスタイルシート | コリス

2013/01/14 157 users レスポンシブ コリス チュートリアル スクリプト グリッド

画像やスクリプトを使用せずに、スタイルシートだけで斜めのダイヤモンド状のグリッドを実装するチュートリアルを紹介します。 Who Says the Web is Just for Squares? デモ 実装 デモ スタイルにはCSS3を使用しているため、モダンブラウザもしくはIE9+でご覧ください。 デモページ：1,200pxで表示 グリッドはレスポンシブにも対応しています。 デモページ：800p... 続きを読む

[JS]派手な演出は無し！レスポンシブ対応のレイアウトを素早く構築するスクリプト -jquery.columns | コリス

2012/12/26 159 users jQuery コリス Safari Firefox スクリプト

サイズを変更するとアニメーションでパネルが移動するなどの派手な演出は一切無しで、レスポンシブ対応のレイアウトを素早く提供するjQueryのプラグインを紹介します。 jquery.columns -GitHub jquery.columnsのデモ jquery.columnsの使い方 jquery.columnsのデモ 対応ブラウザは、IE9/10, Firefox, Chrome, Safari,... 続きを読む

ブラウザーで本が読めるようになりました！ - Yahoo!ブックストア

2012/07/02 843 users ブラウザー Safari Firefox Chrome 対象

ブラウザー（IE9、Firefox、Chrome、Safari）で本が読めるようになりました！ 専用アプリケーションのインストールは不要です！　iPhone iPad Android、PCに対応！ ブラウザーで読めるってどういうこと？ 1.専用アプリケーションのインストールが不要！ これまでは専用アプリケーションのインストールが必要でしたが、対象のブラウザーでYahoo!ブックストアにアクセスする... 続きを読む

[JS]IE6/7/8でアクセスしたユーザーに新しいブラウザのインストールを促すスクリプト -IE Alert js | コリス

2012/06/17 148 users jquery.js コリス Opera Step Safari

IE Alert jsのデモ IE Alert jsの使い方 IE Alert jsのデモ デモはIE6/7/8でご覧ください。 IE9、Firefox, Chrome, Safari, Operaでは、下記のように通常通りに表示されるだけです。 IE Alert jsの使い方 使い方は簡単で、2ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外... 続きを読む

[CSS]ちょっと大胆に、斜めのラインを使うスタイルシートのチュートリアル | コリス

2011/12/25 149 users コリス コンテン ラッパー チュートリアル Safari

下記は各ポイントを意訳したものです。 デモ 実装 デモ 斜めのラインはCSS3で実装されているので、Chrome, Safari, Firefox, IE9でご覧ください。 demo 1 実装のポイント コンテンツ自身は回転させず、コンテンツのラッパーを回転させます。 回転させたコンテンツは表示領域からはみ出す部分もあるので、余剰分の処理も忘れずに。 HTML 見出しとテキストを含む個々のコンテン... 続きを読む

IEの異なるバージョンごとにスタイルシートを適用する方法のおさらい | コリス

2011/12/14 466 users コリス jQuery class おさらい CSS

CSSやJavaScriptを使って、IE6, IE7, IE8, IE9 とIEの異なるバージョンごとにスタイルシートを適用する方法のまとめを紹介します。 下記は各ポイントを意訳したものです。 CSS: 条件付きコメント(class) CSS: 条件付きコメント(外部スタイルシート) CSS: CSS Hack JavaScript JavaScript: jQuery おまけ CSS: 条件付... 続きを読む

透明度を表す「opacity」 と 「RGBa」の違いと使い分け｜Webpark

2011/08/17 100 users opacity Webpark RGBa Opera CSS

ともに透明度を表す「opacity」 と 「RGBa」ですが、違いをちゃんと理解して正しい使い分けをしましょう。 対応しているブラウザ ともにCSS3ですのでブラウザによってサポートしているもの、サポートしていないものがあります。 と言ってもIE以外は問題なく対応できています。IEについてはIE9から対応するようになりました。Firefox、Chrome、Safari、Operaなどはかなり前のバ... 続きを読む

[CSS]「:before」「:after」でタブのディテールを強化するスタイルシート | コリス

2011/05/15 121 users コリス Safari Firefox Chrome After

対応ブラウザは「:before」「:after」はCSS2ですが、スタイルに角丸などのCSS3を使用しているため、CSS3対応ブラウザ（Firefox, Chrome, Safari, IE9）でご覧ください。 HTML リスト要素を使用して、実装します。 Home Abou... 続きを読む

IE9ヤバイの話。 - NO UIHARU, NO LIFE. - subtech

2011/05/10 351 users エントリ Microsoft subtech 文字間隔 以下

はてなブックマーク - IE9ヤバイ。IE9の文字間隔・互換モード・DOCTYPE宣言について なんかブックマークのコメントを見てたら突っ込んでおくべきなような気がしたので少しごにょごにょと。 もともとMicrosoft寄りなので信者擁護乙みたいになってしまって、うむむ…って思ったのですがあまりに死ねみたいなコメントが延々と多いのでちょっとうーむと。 この元のエントリではわかりにくいですが以下の3... 続きを読む

IE9ヤバイ。IE9の文字間隔･互換モード･DOCTYPE宣言について

2011/05/07 900 users 出来栄え フォント 間隔 文字間隔 ヤバイ

IE9の不具合？IE9でフォントの間隔が不自然に狭くなる現象を調査しているうちに、色々と面倒臭い現象を発見しました。 IE9,不具合,字間,互換モード,DOCTYPE宣言などについて。 プライバシーポリシー IE9ヤバイ。悪い意味でヤバイ。サイト運営者によっては「これIE6より酷いんじゃない？」ってなりそうな出来栄え。一般ユーザーとして利用するにも、Webサイトが対応するまでは微妙に不便になりそう... 続きを読む

SVG Girlの公開と内部実装 | tech.kayac.com - KAYAC engineers' blog

2011/04/18 107 users KAYAC engineers SVG ago 内部実装 公開

乗り換え以外で初めてアメリカ行きました。ago（@kyo_ago）です。 すでに先週のこととなってしまいましたが、jsdo.it上でSVG Girlというコンテンツを発表したのでご紹介させていただきます。 （現在IE9のリリースに合わせて英語版のみ公開しています。日本語版は26日の日本語版IE9リリースにあわせて公開を予定しています） SVG Girlって？ SVG GirlはSVGを使ったアニメ... 続きを読む

初代からIE9に至るまでのインターネットエクスプローラーの歴史 - GIGAZINE

2011/03/30 123 users インターネットエクスプローラー GIGAZINE 初代 歴史

Internet Explorerが初めて世に出た時、今をときめく「Facebook」の創設者マーク・ザッカーバーグはまだ11歳で、ソフトウェアの市場はマイクロソフトの寡占状態でした。それから16年後の現在、マイクロソフトはInternet Explorer 9をリリースしています。 この16年の間に、Googleが生まれ、Facebook、Twitterなどのソーシャルメディアが爆発的な成長を見... 続きを読む

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

2011/02/27 266 users IETester valid Opera Safari コリス

デモ紹介1. 条件付きコメントの利用2. CSS Hackの利用3. 条件付きのHTML classデモ紹介デモページは、下記のように設定されています。スタンダードブラウザ（IE9, Firefox, Chrome, Safari, Operaなど）背景色がグレーIE8背景色がピンクIE7 or IE8互換モード背景色がグリーンIE6背景色がブルー下記はデモページをIETesterで表示したもので... 続きを読む

【レビュー】IE6、IE7、IE8、IE9をクラッシュさせる方法 | エンタープライズ | マイコミジャーナル

2011/01/17 419 users エンタープライズ マイコミジャーナル IE6 IE7 IE8

Taranfx.com - Your Gateway to Technology, Redefined. ブラウザは特定のHTMLやCSS、JavaScriptのコードを読み込むとクラッシュしたりフリーズすることが知られている。しかもそれは複雑怪奇なコードではなく、とても短いコードでも起こることがわかっている。特にIEをクラッシュさせたりフリーズさせるためのコードの多くがスニペットとして公開されて... 続きを読む

IE6/IE7/IE8/IE9の共存まとめ: 小粋空間

2011/01/16 332 users 小粋空間 IETester 共存 IE6 IE7

Windows 7やWindows VISTAでIE6/IE7/IE8/IE9を共存させる方法です。IE9はまだベータ段階ですが、周辺ツールも対応してきた頃なのでまとめてみました。 公式ブラウザの共存はできませんが、以下に示す方法で各バージョンの表示を確認することができます。最近はIETesterが主流になってきたようなので、そこを踏まえてます。 IETesterを利用＋IETesterでIE9を... 続きを読む