[CSS]幅や高さが不明な要素を中心に配置する、IE8対応の古い方法とモダンブラウザ対応の最新の方法 | コリス

2018/07/04 51 users コリス CSS 要素 両方 方向

CSSで子要素を親要素の中心に配置するには、水平と垂直の両方の方向に対して中央揃えにする必要があります。特に、子要素の幅や高さが不明な場合はやっかいです。 幅や高さが不明な子要素を親要素の中心に配置するIE8にも対応した古い方法、モダンブラウザ対応の最新の方法を紹介します。 Centering: The Newest Coolest... 続きを読む

[JS]数字をくるくる回転させて、指定した数字を表示させるスクリプト -odometer | コリス

2018/06/25 59 users コリス スクリプト パフォーマンス 数字 古いブラウザ

数字をくるくる回転させて、指定した数字を表示させるスクリプトを紹介します。 サポートするブラウザはIE8+を含むモダンブラウザすべてで、古いブラウザでは自動的にフォールバックされ、非常にパフォーマンスの高いCSSアニメーションで表示されます。 odometer odometer -GitHub odometerのデモ odometerの使い方 odom... 続きを読む

2016年以降に「IE8に対応して」といわれたとき思い出したい六項目 - Qiita

2016/09/15 358 users リスク クライアント 正式サポート 事情 ブラウザ

日本では、2016年1月13日でIE8の正式サポートが終了しました。 それでも、まだIE8でもちゃんと閲覧できるサイトを作って欲しいと言われることがあります。 正式なサポートが終了したブラウザを使うリスクや対応工数を考えると、 クライアントには「IE8は対応外です」としっかり説得すべきです。 でも、大人の事情で対応することになった際に、気をつけるべきことをまとめました。 1. IE8は対応外と突っ... 続きを読む

CSSはやっぱり便利！最近のWebページでよく使うさまざまなコンポーネントを実装するスタイルシートのまとめ | コリス

2016/07/08 427 users 加速 ひと昔前 コリス ブラウザ JavaScript

ここ数年でCSSは加速度的に進化し、ひと昔前まではJavaScriptを使用しないと実装できなかったのが、CSSのみで実装できるようになりました。また、サポートすべきブラウザもIE8が除かれるようになり、今まで躊躇してい ...記事の続きを読む 続きを読む

[CSS]古いバージョンのIEがサポート終了したので、どんどん使っていきたいCSSのテクニックのまとめ | コリス

2016/01/27 458 users Bootstrap コリス CSS テクニック 正式版

IE8がサポート外になり、喜んでいる制作者の人も多いと思います。 正式版がリリース予定のjQuery 3もBootstrap 4もIE8はサポート外です。 古いバージョンのIEをサポート外にすると、CSSで使えるテクニッ ...記事の続きを読む 続きを読む

ぼくたちの愛したIE8[PDF] - JSer.info 5周年記念イベント

2016/01/18 57 users ぼくたち PDF JSer.info 5周年記念イベント

JSer.info 5周年記念イベント #jserinfo ぼくたちの愛したIE8 はせがわようすけ @hasegawayosuke #jserinfoJSer.info 5周年記念イベント 自己紹介 はせがわようすけ @hasegawayosuke XSSのほうから来ました http://utf-8.jp/ author of jjencode, aaencode さよなら Intern... 続きを読む

2016年に取り入れていきたい、CSSのテクニック・ライブラリのまとめ | コリス

2016/01/05 318 users コリス 古いブラウザ イラスト 古いバージョン CSS

2016年は、1月12日に古いバージョンのIEのサポートが終了します。 IE8, 9, 10などの古いブラウザへの対応に時間を割く必要がなくなり、今まで躊躇していたCSSやJavaScriptが多くの人に利用されるようになると思います。 これからどんどん取り入れていきたいCSSのテクニック・ライブラリを紹介します。 イラスト: Girls Design Materials 2016年1月12日から... 続きを読む

IE8にもFlexboxを対応させる、flexibility.jsがとっても便利！ | Webクリエイターボックス

2016/01/05 215 users Flexbox CSS Flexible Box レイアウト

昨年からいろんなサイトで続々と実装されてきているFlexbox。従来の方法とは違い、簡単にCSSでレイアウトを組めちゃう素敵技です。しかし、Internet Explorer8や9等の古いブラウザーには対応しておらず、Flexboxを使いたくても使えない…というWeb制作者さんも少なくないはず。そんな悩みを今回の記事で解消します！ Flexboxって何？ FlexboxとはFlexible Box... 続きを読む

[CSS]IE8もサポート、レスポンシブ対応のさまざまなレイアウトを手軽に使いたい人にぴったりな超軽量スタイルシート -GridLayout | コリス

2015/08/21 92 users コリス マルチカラム スティッキー グリッドレイアウト CSS

最近のWebページでよく使用されるシンプルな1カラム、マルチカラム、カード型のレイアウトをはじめ、フッタが常に最下部に表示されるスティッキー、Webアプリなど、人気のグリッドレイアウトを簡単に実装できる超軽量スタイルシートを紹介します。 もちろんレスポンシブ対応で、古い環境（IE8+, iOS5+, Android3+）もサポートされています。 レイアウト用だけのフレームワークを必要としている人に... 続きを読む

Bootstrap 4 alphaの主な特徴、IE8のサポート終了、Sassに移行、CSSの単位はremとem採用 | コリス

2015/08/20 55 users rem alpha Sass コリス less

2015年8月19日（Bootstrap誕生4周年）にリリースされた、Bootstrap 4 alphaの主な特徴を紹介します。 IE8のサポート終了、Sassに移行、CSSの単位はremとem採用など、かなり変更されています。 Bootstrap 4 alpha 上記の公式ブログに主な特徴が掲載されていたので、ざっと意訳しました。 LessからSassに移行 コンパイラにはlibSassを使用。... 続きを読む

JavaScript - Babel で IE8 対応する地獄 - Qiita

2015/03/16 52 users Babel Webpack Qiita Polyfill 地獄

IE8 対応が必要な JavaScript に Babel (+ webpack) を使っているんだけど、素直に書くと動かないところがあったのでメモ。 とある事情により Polyfill も叶わない環境を想定している。 大体これと同じ内容: Caveats · Babel class を使うためには・・・ class を使ったコードを Babel に変換させると Object.defineProp... 続きを読む

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

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

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

SVG のフォールバックは結局 Modernizr に落ち着いた件 | WWW WATCH

2015/02/26 51 users フォールバック jQuery Modernizr SVG 環境

タイトルでほぼ言い切ってる感じなんですが...... SVG に対応していない環境 （IE8 以前とか、旧 Android の標準ブラウザとか） に対するフォールバックの方法はいくつかありますが、色々試して、最終的に img 要素で SVG を配置した上で、Modernizr と簡単な JavaScript （とりあえず jQuery） 書いて SVG 未対応ブラウザに対しては代替画像に差し替える... 続きを読む

うわぁIE8で表示がおかしい！その原因をチェックしてアドバイスしてくれるオンラインサービス -IE8 Linter | コリス

2015/02/10 101 users 基準 現状 アドバイス モダンブラウザ ページ制作

モダンブラウザを基準にページ制作をする人が増えてきましたが、IE8を完全に切るのはなかなか難しいのが現状です。 そんなIE8で、あれ表示がおかしいぞ！という時に、その原因のアドバイスをしてくれる便利なオンラインサービスを...記事の続きを読む 続きを読む

IE8でツイートボタン貼り付けるとエラーが出る件 - < /gecko >

2015/01/27 52 users Gecko Widget URI エラー https

2015年1月26日時点でのメモです。今後どうなっているかはわかりません。 先週くらい（2015年1月19日頃）からツイートボタンを貼り付けているページをIE8で見ると以下のエラーが出るようになった。 Script error widgets.js Code: 0 URI: https://platform.twitter.com/widget/js 相変わらず役に立たないエラーである。 発生して... 続きを読む

[CSS]動画を背景に使い、オーバーレイでコンテンツを配置するテクニック（IE8、スマホへの対応方法） | コリス

2014/09/05 136 users video要素 レスポンシブ対応 コリス ブラウザ 自動再生

動画を背景としてブラウザいっぱいに表示し、その上にオーバーレイでコンテンツを配置するCSSのテクニックを紹介します。 動画の背景はレスポンシブ対応、video要素に対応していないIE8や、動画の自動再生に対応していないスマホへの対応方法も！ Create Fullscreen HTML5 Page Background Video 下記は各ポイントを意訳したものです。 以前紹介した時（前の記事）か... 続きを読む

jquery 1.xと2.x の違い、さらに動作を音速にするための設定 | まとめーたー

2014/07/16 485 users 音速 wp-content アイル まとめーた 動作

photoBy: http://www.jose-aguilar.com/blog/wp-content/uploa… まずは jquery 1.x と 2.x の違い 1.x 系は IE8 以前をサポートするが遅い、重い 2.x 系は IE8 以前のサポートは捨てて、いるが軽い、早い アイル トン・セナじゃあるまいしそんなに早くしてどうすんの？ Webページがたった1秒高速化するだけでECサイト... 続きを読む

CSS3からの新しい単位「rem」をIE8でも利用できるようにするスクリプト -REM unit polyfill | コリス

2014/04/10 89 users rem コリス font-size スクリプト フォント

当ブログで紹介した「フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック」でこれからのfont-sizeの単位に「rem」を使う方法など、CSS3の新しい単位「rem」は非常に魅力的ですが一つ問題があります。 それは「rem」はIE8をサポートしていないこと。 ここで紹介するのは、その問題を解決するIE8でも「rem」を使えるようにするスクリプトです。使い方はスクリプトを外部フ... 続きを読む

愛と憎しみのIE6──IE6開発者と現開発者が本音とを思い出を語り合う（前編）#ie6 #ie8 #ie11｜CodeIQ MAGAZINE

2014/04/09 480 users 憎しみ tag エンタープライズ 本音 IE6

愛と憎しみのIE6──IE6開発者と現開発者が本音とを思い出を語り合う（前編）#ie6 #ie8 #ie11 2014.04.09 Category：エンジニアコラム Tag：IE ,Windows ,エンタープライズ ,ブラウザ 2014年4月9日にWindows XP、Office 2003、Internet Explorer 6（IE6）のサポートが終了する。IE4がリリースされた頃から、デ... 続きを読む

[CSS]リスト要素を左寄せぴったりに配置するスタイルシートのテクニック | コリス

2014/03/10 210 users コリス 黒丸 CSS ネガティブマージン 四角

中黒のような黒丸、四角、数字など、リストの先頭につくマークを左寄せに揃えるスタイルシートのテクニックを紹介します。 対応ブラウザはIE8+で、ネガティブマージンは使用しません。 Align Lists Flush Left ブラウザごとに異なるサイズのマークでも、数字のリストで1桁から2, 3桁と増えても全てに対応できるテクニックです。 まずは、マークアップから。 HTML ulもolもシンプルな... 続きを読む

[JS]モーダルウインドウの実装を検討する時はこのスクリプトもチェック！ -vex | コリス

2014/02/12 72 users vex jQuery コリス モーダルウインドウ ウィンドウ

カスタマイズ性に優れ、シンプルなものからカラフルなものまでさまざまなテーマも用意されており、簡単に実装できる超軽量（6KB）のjQueryのプラグインを紹介します。 レスポンシブ対応、IE8+もサポート、ウインドウを表示する際のアニメーションも優雅でいい感じ！ vex vex -GitHub vexのデモ vexの使い方 vexのデモ デモではvexのさまざまなスタイルをショー形式で楽しむことがで... 続きを読む

[JS]SVGを始める人にぴったり、ウェブページでSVG画像を安心して利用できるスクリプト -SVGMagic | コリス

2014/01/29 147 users jQuery GitHub コリス SVG ウェブページ

ページ上の画像や背景画像として使用したSVG画像をSVG非サポートブラウザで表示した際にPNG画像に自動変換するjQueryのプラグインを紹介します。 SVGMagic SVGMagic -GitHub 上記ページを、SVG非サポートブラウザで表示した時にはこんな感じに。 IE8だとPNG画像で表示されました SVGMagicではSVG非サポートブラウザではPNG画像を生成し自動で置き換えて表示す... 続きを読む

[JS]多階層のナビゲーションを今風にサイドを利用して実装するスクリプト -MultiLevel Push Menu | コリス

2013/12/05 75 users コリス jQuery スクリプト ナビゲーション 多階層

タブレットによさそうな、もちろんスマフォやデスクトップ（IE8にも）対応しているナビゲーションの各階層を次々に押し出して重ねて表示するjQueryのプラグインを紹介します。 Multi-level push menu MultiLevel Push Menu -GitHub MultiLevel Push Menuのデモ MultiLevel Push Menuの使い方 MultiLevel Pu... 続きを読む

意外と知られていない、IE11リリースによる本当の危機 - ふろしき.js - 実用的なWeb技術を発信

2013/11/26 522 users ふろしき.js 危機 エンタープライズ 発信 Web技術

2013-11-26 意外と知られていない、IE11リリースによる本当の危機 IE IE11 互換性対策 Internet Explorerはエンタープライズでの利用が想定されるため、Microsoft製品で広く適用されているサポート ライフサイクル ポリシーを確認すると、最低でも10年のサポートが受けられると考えている人も多いでしょう。IE8も9も10も、みんなそうなると信じて疑わないIT管理者... 続きを読む

【CSS3】メディアクエリをIE7、IE8でも使えるようにする at softelメモ

2013/05/13 57 users メディアクエリ CSS IE7 CSS3 script src

2013/04/12 / Category css, html5 問題 あら？IE8はメディアクエリ（cssの@media何々）使えないんでしたっけ？ 答え IE9からはメディアクエリが使えるけど、IE6、IE7、IE8は使えない。 こちらのスクリプトを使うと、何とかなるでしょう。 <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js... 続きを読む