実装が簡単で、動作も快適！CSSのみで実装されたアニメーションも気持ちいいモーダルボックス- Light Modal | コリス

2017/12/01 51 users スタイ モーダルボックス コリス CSS モダンブラウザ

一昔前までは、完全にJavaScriptの領域でした。 IE9+を含む、すべてのモダンブラウザで動作する、CSSで実装されたモーダルボックスを紹介します。 非常に軽量なので動作も快適、そして実装も簡単と3拍子揃ったスタイ ...記事の続きを読む 続きを読む

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... 続きを読む

IE9+もサポート、CSS3 Flexboxを始める人にぴったりな極めてシンプルな使いやすいフレームワーク -FOX CSS | コリス

2015/10/20 72 users コリス Sass Flexbox CSS 一行

そろそろFlexboxを使ってみたいな、と考えている人にぴったりなCSS/Sassの超軽量フレームワークを紹介します。 もちろんFlexboxをバリバリ使っていて、シンプルなのが必要な人にもぴったりです。 FlexboxはIE11+対応ですが、IE9+にも一行加えるだけで同じHTMLで実装できます。 FOX CSS FOX CSS -GitHub Flexboxの各プロパティの使い方は、以前の記事... 続きを読む

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

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

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

JavaScript - inputやtextareaの値が変わったらイベント発火（IME入力中を除く） - Qiita

2015/09/17 51 users focus 発火 textarea Qiita input

※IE11ではFocus取得・喪失時に入力エリアが空の場合にイベントが発火します。 ※IE9ではIME入力中にFocusを喪失すると2回イベントが発火します。これは通常のIME入力確定のイベントと下記の入力値が変わった時のFocus喪失によるイベントの発火が起こるためです。 ※IE9では入力値が変わったときにFocusを喪失するとイベントが発火します。 ※上記の検証には含まれていませんが、IE9で... 続きを読む

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... 続きを読む

[JS]レイヤーに要素を配置し、分離して3Dにぐるぐる回転させるスクリプト -CSSMatrix | コリス

2013/04/03 64 users jQuery コリス ペー スクリプト レイヤー

jQueryのプラグイン「CSSMatrix」を使って、不連続のレイヤーに要素を配置し、それぞれを分離して3Dにぐるぐる回転して表示するデモを紹介します。 3D-ifying Documents Using CSS Transforms デモは最新のモダンブラウザでご覧ください、IEは9+、できればIE10でご覧ください。 demo 1 demo 1は、IE9+とモダンブラウザで動作するためのベー... 続きを読む

バージョン別セキュリティ既定値一覧表 - IE デベロッパー センター

2013/03/22 57 users センター IE6 IE7 IE1 セキュリティ設定

更新日: 2013 年 2 月 15 日バージョン別セキュリティ既定値一覧表　セキュリティ設定 [IE6/Windows XP SP3 | IE7/Windows Vista Enterprise | IE8/Windows 7 Enterprise | IE9/Windows 7 Enterprise | IE10/Windows 8]バージョン別セキュリティ既定値一覧表 詳細設定 [IE6/I... 続きを読む

古い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,... 続きを読む

画像不要！HTML5のCanvasでグレースケールのマウスオーバーが作れるチュートリアル | デザイナーブログ | 株式会社LIG

2012/10/15 81 users canvas チュートリアル Opera Safari 殆ど

こんにちは、ももこです。 HTML5の新要素であるCanvasを使って、グレースケールのマウスオーバーを実現するチュートリアルをご紹介します！ 現在CanvasはFirefox/Chrome/Safari/Opera/IE9など殆どのブラウザの最新版で実装されています。 未対応のIE8以前のバージョンにはgoogleが公開しているExplorerCanvasやuupaa-excanvas.jsを読... 続きを読む

ブラウザーで本が読めるようになりました！ - 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」と当スクリプト・スタイルシートを外... 続きを読む

IE 6 / 7 からの自動アップグレードが国内でも3月中旬より開始 - Engadget Japanese

2012/03/06 68 users Engadget Japanese 自動アップグレード

2001年生まれの「腐った牛乳」こと Internet Explorer 6 が、ついに日本でも自動アップグレードの対象となります。これはマイクロソフトが世界的に進めている旧版 IE 一掃キャンペーンの一環で、IE6 / IE7 を利用している Windows XP SP3 ユーザには IE8 を、IE7 / IE 8 を利用している Windows 7 / Vista SP2 ユーザには IE9... 続きを読む

[CSS]ol要素を美しくスタイルし、アニメーションをちょっとだけ加えるテクニック | コリス

2012/02/19 97 users コリス 矩形 ポパー アロー Safari

デモ 実装 対応ブラウザ デモ デモはIE9, Firefox, Chrome, Safariでご覧ください。 擬似要素のアニメーションは、Firefoxのみサポートしています。 デモページ：Demo 1 数字を矩形にスタイルし、ホバーで数字からアローが伸びます。 ※アニメーションはFirefoxのみです。 実装 HTML HTMLは非常にシンプルで、ol要素を入れ子にして実装するだけです。 <o... 続きを読む

「crocro.jscam」JavaScriptでWebカメラの画像を取得するライブラリ

2012/01/20 65 users ラベリング ライブラリ デバッグ キャプチャ Webカメラ

はじめに 「crocro.jscam」は、JavaScriptで、Webカメラの画像を取得するためのライブラリです。　動作対象はHTML5以上、PCとなります。デバッグを行ったのは、Chrome16、IE9、Firefox9になります。　本ライブラリは、以下のようなことを行なえます。 Webカメラの画像のキャプチャ。 キャプチャした画像の2値化（白黒化）。 2値化を元にしたラベリング（領域分割）。... 続きを読む

[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: 条件付... 続きを読む