Web制作者向け
古いWebコンテンツではIE独自の機能を利用しないことには、リッチな機能を盛り込むことが実質的に不可能という状況でした。しかし、IE9以上からはWeb標準への準拠が高く、Microsoft側でも、IE独自機能に依存しないWeb標準へ準拠したコンテンツ作りを推奨して…
「HTML5 Advent Calendar 2013」の24日目の記事です。Webアプリのパフォーマンス改善と言えば、JavaScriptやDOMアクセスなど、既存の技術ベースな改善手法を想像する方も多いでしょう。最近では、こうした改善のあり方を、別の視点からもう少し広げようとい…
Microsoftは、6以降の全てのIEの動作をテストできる手段として、「Modern.IE」というサービスを提供しています。タイトルでは無料と言っていますが、実際には一部のサービスのみが無料となっています。本来なら有償のサービスを売り込みたいところなのでしょ…
IE11では、X-UA-Compatibleという制御パラメータを利用し、過去のWebブラウザの機能をエミュレートさせることができます。本記事では、X-UA-Compatibleの利用方法について解説します。 動作の仕様 設定方法 HTMLドキュメント内にX-UA-Compatibleを追加する A…
IE10では、X-UA-Compatibleという制御パラメータを利用し、過去のWebブラウザの機能をエミュレートさせることができます。本記事では、X-UA-Compatibleの利用方法について解説します。 動作の仕様 設定方法 HTMLドキュメント内にX-UA-Compatibleを追加する A…
IE9では、X-UA-Compatibleという制御パラメータを利用し、過去のWebブラウザの機能をエミュレートさせることができます。本記事では、X-UA-Compatibleの利用方法について解説します。 動作の仕様 設定方法 HTMLドキュメント内にX-UA-Compatibleを追加する Ap…
IE8では、X-UA-Compatibleという制御パラメータを利用し、過去のWebブラウザの機能をエミュレートさせることができます。本記事では、X-UA-Compatibleの利用方法について解説します。 動作の仕様 設定方法 HTMLドキュメント内にX-UA-Compatibleを追加する Ap…
(※ 本ドキュメントは古い情報です。正確な仕様は、こちらを参照して下さい。)IE10までは、「X-UA-Compatible」に対して、「IE=EmulateIE」で指定された対象バージョンのドキュメントモードでは、DOCTYPEスイッチの条件に従いQuirksモードへの切り替えを行っ…
IE10には、古いIEの動作とHTML5との相互運用を可能としたレンダリングエンジンとして動作するQuirksモードと、最新のレンダリングエンジンとして動作するStandardモードがあります。HTMLドキュメントの一番上でのDOCTYPE宣言を行うことにより切り替えを行い…
IE9には、IE5の動作を再現させるQuirksモードと、最新のレンダリングエンジンとして動作するStandardモードがあります。HTMLドキュメントの一番上でのDOCTYPE宣言を行うことにより切り替えを行います。IE9の場合、「X-UA-Compatibe」へ「IE=EmulateIE」とい…
IE7には、IE5の動作を再現させるQuirksモードと、最新のレンダリングエンジンとして動作するStandardモードがあります。HTMLドキュメントの一番上でのDOCTYPE宣言を行うことにより切り替えを行います。IE7からは、IE6まで問題になっていたXHTML1.0のDOCTYPE…
これまでWebシステム/サイトは、Webブラウザの種類でビューを切り替える「ブラウザ検出」という考え方が一般的でした。また、デスクトップ型かスマートデバイス型かをサーバで判断し、ビューを返す「デバイス検出」は、今もなお主流かと思います。しかし最近…
Googleの検索結果を操作する方法について解説します。どのサイトも断片的にしか説明していないため、本記事では変更作業からGoogle側へ反映するまでの一連の流れを手順書化して解説しています。★ 手順の流れ 1. 検索結果の表示を変更する コンテンツのタイト…
Web制作/開発に関わっていると、自分のやり方は本当に正しいのかと疑問に感じることはないでしょうか？Webの技術は目まぐるしい速度で進化していますが、そのノウハウは個人へ依存しているように思えます。体系的に学ぶにも、多くの学校ではツールや綺麗な作…
Internet Explorer11へアップデートされてから1ヶ月。多くのWebアプリが動作不良を起こし、混乱が生じているようです。IEは11から、「User Agent スニッフィング」と呼ばれる手段で、Webブラウザに依存した作り込みが行われることを防ぐため大胆な仕様変更を…
既存のWebサイト・システムがIE11で動作しない場合、ユーザエージェントの観点では以下の何れかで対策が可能です。 navigator.userAgent文字列からの判定 HTMLドキュメント内から、互換性モードの操作 上記の対策はどちらも、"課題"があります。近年のWeb開…
IE11でのみWebサイト・システムへアクセスできない場合、以下の問題が考えられます。 サーバ側でIE11からのアクセスを拒否している。 IE11のレンダリングエンジンに問題があり利用できない。 以下の対策で、改善される可能性があります。 1. サーバ側でIE11…
1300の優良サイトを調査してみたシリーズ、第13回は「ページレイアウト(Page Layout)」です。タイルレイアウト・可変グリッドレイアウト・レスポンシブWebデザインと、様々なページレイアウトの思想が時代の流れとともに生み出されてきました。ふろしき.jsの…
1300の優良サイトを調査してみたシリーズ、第12回は「ページスクローラー」です。ボタンクリックなどのイベントに反応して、ページの先頭や任意の要素にスクロールさせる機能を、「ページスクローラー」といいます。ふろしき.jsの調査では、1300中68サイト(5…
1300の優良サイトを調査してみたシリーズ、第11回は「コンテンツスクロールバー」です。利用規約などを表示する画面では、CSSの「overflow:scroll」プロパティを利用して、ブロック要素に対してスクロールバーを与えることがあります。これを「スクロールバ…
1300の優良サイトを調査してみたシリーズ、第10回は「フルスクリーンバックグラウンドイメージ(Full Screen Background Image)」です。背景にフルスクリーンの状態で画像を表示させるには、独特なノウハウを必要とします。この対策への呼び名は日本にはまだ…
1300の優良サイトを調査してみたシリーズ、第9回は「オーバーレイイメージ」です。Webページ上の画像をクリックした際に、同一ウィンドウ内に拡大された画像を表示する処理を、「オーバーレイ」や「オーバーレイイメージ」といいます。ふろしき.jsの調査では…
1300の優良サイトを調査してみたシリーズ、第8回は「pjax」です。Webアプリケーションには、「http://〜/sample.cgi」のようなクエリストリングでなく、「http://〜/#!/sample」のようにハッシュとして持たせ、Ajaxによってデータを動的に取得する仕組みのも…
★ 最新の機能が使いたいんだけど・・・ HTML5の登場で、既存の機能にも置き換えが進んでいます。とはいえ、古いIEがシェアを得てしまっている現状を鑑みると、いきなり新しいWeb標準を使うわけにもいきません。古いIEのために、Shim/Polyfillと呼ばれるライ…
やたらといっぱいあって、覚えるのが面倒なWebの開発/制作ツールたち。やつらを、いかにして最短ルートでマスターするかについて考え、記事にしてみます。コンテンツはこれから、、増えるはずです。 ★ a. OSSの開発ツール オープンソースのJavaScriptライブ…
1300の優良サイトを調査してみたシリーズ、第7回は「コンテンツスライダー」です。画像ファイルや動画ファイルをスライドショーのように表示させるアニメーションを、「コンテンツスライダー」といいます。デザインに関わるためどれがベストとも言えませんが…
1300の優良サイトを調査してみたシリーズ、第二回は「マウスオーバー・ロールオーバー」です。画像やブロック要素などのオブジェクトは、マウスポインタが当たった際にビジュアルデザインが変化することを求められることがあります。これを広義では「マウス…
1300の優良サイトが選んだシリース、第5回は「CSSのポリフィル・シム」です。レガシーIEは、CSSに不具合や新標準への未対応という問題があります。日々追加されるCSS3プロパティや新しいセレクタへの対応を必要とする場合、「ポリフィル」または「シム」と呼…
1300の優良サイトが選んだシリース、第4回は「ブラウザの種類・機能判定」です。以前「マルチブラウザとクロスブラウザの違いは何か？」という記事を書きました。コンテンツの相互運用性の対策を、「Webブラウザの種類」でやるか「Webブラウザの機能」でやる…
1300の優良サイトが選んだシリース、第3回は「AMDと遅延ロード」です。JavaScriptファイルのロードのパフォーマンス向上を図るメカニズムを「AMD(Asynchronous module definition)」といいます。Webアプリ開発を行なうデベロッパの方は、今後重要な知識にな…
