Internet_Explorer関連の記事一覧

20150530-IEの条件付きコメントをJavaScriptに置き換える-01

今回紹介するのはWeb制作の中でInternet Explorer（IE）の条件付きコメントが使用できない場合（禁止されている場合）にJavaScriptで対応する方法です。


●条件付きコメントとは？

条件付きコメントというのはIEで動作する、HTMLのコメント機能を利用した条件分岐ができる機能です。

簡単な例としてはIE６だけ読み込ませたい内容を書くには以下の様に書きます。IE6で独自に適用したいスタイルシートやJavaScriptの読み込みをすることが可能です。

<!--[if IE 6]>
　ここはIE 6だけが読み込みます
<![endif]-->

なお、この機能は、便利な機能ですがIE10で廃止されました。



●条件付きコメントをJavaScriptで置き換える

たとえば、IE8（Internet Explorer 8）以下で、HTML5の要素を有効にして、メディアクエリーを有効にしようとこんなコードを使いたいとします。

<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->


しかし、諸般の事情で条件付きコメントが使用できない場合は、JavaScriptで置き換えることで対応できます。

記事の続きを読む

20150417-Google-Codeの終了でhtml5shivがロードできなくなる-01

画像出典：Google Code


Google Codeがスパムや悪質なプロジェクトのために2016年1月25日に終了するというニュースが3月にありました。

　米Googleは3月12日（現地時間）、開発者向けにAPIなどを提供したり、オープンソースプロジェクトをホスティングするサービス「Google Code」を来年1月に閉鎖すると発表した。同日、新たなプロジェクトの作成はできなくなった。
「Google Code」、2016年1月25日に閉鎖へ　GitHubへの移行を奨励 - ITmedia エンタープライズ


その時は「開発者向けのページが閉鎖か、別に開発者ではないし…（プロジェクトをアップしているわけでもないし）」という位にしか思っていなかったのですが、実はWeb制作者に影響があるかもしれません！（というか私は影響がありました（汗））


●IE8対応で…

Internet Explorer 8（IE8）でHTML5対応するために、こんなコードをheadタグ内に書いていませんか？

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


そう、IE8はHTML5の新しい要素に対応していないので、スクリプトで対応するようにしてくれる優れもの「html5shiv」です。ファイルを自分で用意しなくてもホスティングしてくれているので簡単ですよね。

老舗のサイト「TAG index」のページでもそう書かれています。


私も使っています。というか、このブログのPC版は現在そうなっています。


この素晴らしいスクリプトのhtml5shivですが、ホスト名をよく見てみると「html5shiv.googlecode.com」。

そう「html5shiv.googlecode.com」です。


ダメですね…。

2016年1月25日を過ぎたら、html5shivのファイルがロードできなくなって、IE8では体裁が崩れます。

記事の続きを読む

20150406-JavaScriptでIEのバージョン判定-01

タイトルの通りですが、Internet Explorer（以下IE）のバージョンをJavaScriptで判定するコードです。（User Agentは使用しません）

それでは早速コードを紹介します。

//IEの判定 via https://w3g.jp/blog/tools/js_browser_sniffing
var _ua = (function(){
    return {
        lte_IE6:typeof window.addEventListener == "undefined" && typeof document.documentElement.style.maxHeight == "undefined",
        lte_IE7:typeof window.addEventListener == "undefined" && typeof document.querySelectorAll == "undefined",
        lte_IE8:typeof window.addEventListener == "undefined" && typeof document.getElementsByClassName == "undefined",
        lte_IE9:document.uniqueID && typeof window.matchMedia == "undefined",
        gte_IE10:document.uniqueID && window.matchMedia ,
        eq_IE8:document.uniqueID && document.documentMode === 8,
        eq_IE9:document.uniqueID && document.documentMode === 9,
        eq_IE10:document.uniqueID && document.documentMode === 10,
        eq_IE11:document.uniqueID && document.documentMode === 11,
//        eq_IE10:document.uniqueID && window.matchMedia && document.selection,
//        eq_IE11:document.uniqueID && window.matchMedia && !document.selection,
//        eq_IE11:document.uniqueID && window.matchMedia && !window.ActiveXObject,
        Trident:document.uniqueID
    }
})();


記事の続きを読む

CSSをいじっていたら、フォント表示を改善できて、キレイな表示になったので報告しておきます。

なお、かなり無理矢理ですので、場面に応じてお使い下さい。

対応ブラウザーはInternet Explorer・Firefoxです。（Internet Explorerは9以降かな？）


ざっくり行きたいなら、以下の様に書きます。

body { transform:scaleX(0.9999); }


Yahoo!のトップページのニュースの見出し部分で検証してみます。

ブラウザー内蔵の開発者ツールを使用してCSSを適用して、スクリーンショットを撮り、２倍に拡大して掲載しています。

●Internet Explorer 11

適用前

20141205-ウェブでのフォント表示をキレイに-IE-03


適用後

20141205-ウェブでのフォント表示をキレイに-IE-04


※IE9だと「-ms-transform:scaleX(0.9999);」

記事の続きを読む

20140527-Bing-Logo-01


仕事柄検索のページをよく使います。普段はGoogle・Yahoo!を使うのですが、ふとBingのページを開いてみたらMicrosoftからお知らせが表示されていたので紹介。


●ChromeでBing.comを開いたら

Windows 7の環境のChromeで開いたのですが、画面上部にお知らせが。

『Chromeをお使いですか？最新のInternet Explorer 11であれば高速で安全です。』

20140527-Microsoft-Bing検索-01


なかなか挑戦的ですね。確かにInternet Explorerは動作が何となく遅くて、Chromeは早い・安全ということで普及した気がするのですが、MicrosoftからInternet Explorer 11は違うのだよ！という自信を持ったメッセージが発せられています。Googleへの対抗心が見えている気がします。

Internet Explorer 11の動作は実際かなり早いので、毛嫌いされている方は試してみては。機能拡張などでカスタマイズする方には向きませんが。


それでは他のブラウザーでは…？と気になります。

記事の続きを読む

このブログのフッター部分にはメッセージを送るフォームがあります。

このフォームで何も書かずに「確認する」ボタンを押してフォーム送信したらどうなるのでしょうか。

20140424-フォームコントロール-HTML5-01


ページが移動して（画面が遷移して）エラーが表示されます。

「名前を入力して下さい」「メッセージを入力して下さい」というエラーが表示されます。

20140424-フォームコントロール-HTML5-02


こういうパターン、一昔前にはよくありましたよね。フォーム送信した後にエラーが表示されるパターン。

一昔前のフォームであれば、これでも仕方が無いのですが、HTML5の時代です。フォームのエレメントに属性を付けるだけで、フォームを送信する前にエラーのチェックができるのです。

属性は5秒以内で付けられる簡単なものですので、フォーム入力がある場合、ぜひ付けておきましょう。

それではその属性を紹介します。Firefox 28・Internet Explorer 11・Chrome 34での動作も調べてみました。

記事の続きを読む

20130213-Windows8-スタート画面にピン留めする-00

みなさん、Windows 8使っていますか？
私は発売記念のダウンロード版で安く購入しました。32bit版。


結構快適に動いていますし、新しいスタート画面も、スマートフォンやタブレット端末に慣れている方なら、すぐに慣れるかと思います。マウスだとちょっと違和感を感じるのかもしれませんが、私はペンタブレットを使っているので…。


さて、そのWindows 8の新しいスタート画面にウェブサイトのブックマークをタイルとして置けることをご存じでしたか？
これはピン留めという機能で実はInternet Explorer 9からの機能です。

スタート画面のタイルとして置かれると、まるでアプリのような感じです。
登録したウェブサイトへアクセスしやすくなるので、ウェブサイトへ繰り返し来てもらうために設定しておくことをお薦めします。


このピン留めしたサイトですが、Microsoftが言うにはなんと15〜50％アクセス数が増加するそうですよ！（Windows 7＋Internet Explorer9＋タスクバーへピン留め）
Developers can utilize pinned sites to better connect their site with their users and promote their site’s brand directly in the Windows start screen. We found that sites that used this feature with IE9 on Windows 7 see anywhere from a 15 percent to 50 percent increase in site visits.
Pinned Sites in Windows 8 - IEBlog - Site Home - MSDN Blogs


今回はWindows 8のスタート画面へのピン留めに大切な設定で最小限必要なものだけ紹介します。
ものすごく簡単です！


記事の続きを読む

On the Road Manuscript, #1 by Thomas Hawk


全然Internet Explorer 9を使っていないのですが（※1）、色々調べてみるとInternet Explorer 9のテキストレンダリングの改良がおもしろいので紹介。


Internet Explorer 9のテキストはなぜInternet Explorer 8より読みやすくなっているのか、というテーマです。

前回のブログで書いた「IE8とIE9でWebフォントのレンダリングを見比べてみる」 の後半で書いたClearTypeの精度の違いについての補足です。
 
記事の続きを読む

The faces behind the typefaces by Gabriel Figueiredo

しつこいですが、モリサワのTypeSquareをInternet Explorerで検証してみます。

今回はやはりWindowsではシェアの多いInternet Explorer 8についてです。
3月のInternet Explorer 6の半強制アップデートで、Windows XPでのInternet Explorer 8の増加も見込まれるので、言及しておかなければならないでしょう。


Internet Explorer 8では「Internet Explorerのフォントレンダリングは２種類用意されている？」で書いたようなCanvas要素に文字を描くことができませんので、普通のdiv要素やp要素に描かれるものだけということになります。（VMLを使えば別なのかな…？）

記事の続きを読む

ついに日本でも3月中旬よりInternet Explorer 6の半強制自動アップデートが始まりますね。



Windows XPユーザーはInternet Explorer 8へ、そしてWindows Vista・Windows 7ユーザーはInternet Explorer 9へアップデートされます。 

20120307-Internet-Explorer-アップデート-01

これはセキュリティ的にもWeb制作的にもうれしいです。


変なバグやらなんやらが少しでも解消されれば。
（とかいいつつ最近会社のサイトにIE6でposition:fixedが使える様になるライブラリを導入したり（←結局IE6対策している…汗））


Microsoftが本格的に新しいウェブブラウザへの移行を進めているので、Internet Explorer 9ユーザーが増加するかも！ということで、先日の「Internet Explorerのフォントレンダリングは２種類用意されている？」の補足を書く気になったので、書いておきます。

記事の続きを読む

ブログ著者

名前：（Google+のプロフィール）

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について

サイト内検索