HTML 5 ボイラープレート 5.0 中国語ドキュメントの読み込み_html/css_WEB-ITnose

出典: http://www.w3cplus.com/html5/html5-boilerplate.html

この記事は、HTML5 の公式ドキュメントに基づいて翻訳されており、主にアーキテクチャと関連するものを紹介しています。 HTML5 ボイラープレートの側面に関する知識。そして、HTML5 ボイラープレートに基づいて独自のプロジェクトを作成する方法を詳しく紹介します。
基本的なディレクトリ構造

基本的な HTML5 ボイラープレート サイトの初期ディレクトリ構造は次のとおりです。

│ └── Normalize.css

§── doc
til── img
├── js
│ っていつ── main.js
│ っていつ── プラグイン 。 js
│ └── ベンダー
│ ∴── jquery.min.js
│ └── modernizr.min.js
§── .editorconfig
§── .htaccess
§── 404.html
っていつ── apple-touch-icon.png
っていつ── browserconfig.xml
っていつ──index.html
っていつ──人間.txt
§── robots.txt
til──crossdomain.xml
§── favicon.ico
§── tile-wide.png
└── tile.png
以下は、このディレクトリの構成とその使用方法の概要です。

css

/css フォルダーには、プロジェクト内のすべての CSS ファイルが保存されます。このフォルダーには、プロジェクトをビルドする前に開発者に標準化された開発環境を提供するための初期化用の CSS が含まれています。

doc

/doc フォルダーには、HTML5 ボイラープレートのすべての開発ドキュメントが保存されます。開発者の個人プロジェクトの基本ドキュメントとして使用できます。

js

/js フォルダーには、プロジェクト内のすべての js ファイルが保持されます。ライブラリ、プラグイン、カスタム コードをここに配置でき、開発者がプロ​​ジェクトを構築するのに役立つ初期化用の js がいくつか含まれています。

.htaccess

このファイルのデフォルトは、Apache の Web サーバー構成情報です。詳細については、Apache Server Configs リポジトリを参照してください。

Web サイトがホストされているサーバーが Apache ではない場合、関連するサーバーの構成情報は Server Configs プロジェクトで見つけることができます。

404.html

開発者がプロ​​ジェクトの構築を迅速に開始できるようにカスタマイズされた 404 ページ。

browserconfig.xml

このファイルには、IE11 の動的タイルの設定情報が含まれています。

詳細については、MSDN を参照してください。

.editorconfig

このファイルの役割は、エディターと IDE の範囲内で開発者とそのチームを支援し、動機付けすることです。

index.html

このページにはデフォルトの HTML 構造が含まれており、開発者はそれをページの基本構造として使用することをお勧めします。開発者がサーバー側のテンプレート エンジンを使用している場合は、プロジェクトのビルドの開始時にページ構造をテンプレート エンジンに統合する必要がある場合があります。

開発者がディレクトリ構造を変更した場合は、必ず CSS と JavaScript の参照を同時に更新してください。

開発者が Google Analytics スクリプトを使用している場合は、Web ページの下部にある関連スクリプトの Analytics ID が正しく記述されていることを確認してください。

humans.txt

このファイルには、Web サイトやアプリケーションの開発チームや開発技術などの情報が記録されます。

robots.txt

このファイルは、検索エンジンによってブロックされたページを記録します。

crossdamin.xml

クロスドメインリクエストに使用されるテンプレート。

アイコン

必要に応じて、デフォルトの favicon.ico、tile.png、tile-wide.png、Apple Touch アイコンを置き換えることができます。

詳細については、Hans によるこの記事 - HTML5 ボイラープレート Favicon および Apple Touch Icon PSD-Template を参照してください。

HTML 解析

HTML5 ボイラープレートは、デフォルトで 2 つの HTML ページを提供します:

index.html

404.html

index.html

no-js クラス

no-js クラスを使用すると、開発者は、JavaScript が有効か (.js) か無効か (.no-js) に基づいて、カスタム スタイルをより簡単かつ正確に追加できます。

このトリックを使用すると、ブラウザーのちらつき (FOUC) を回避するのにも役立ちます。

lang 属性

ページのコンテンツで使用される言語を記述するために、100db36a723c770d327fc0aef2ce13b1 に lang 属性を追加することを真剣に検討してください。たとえば、

a0bb8a6aa2bc16881f941c06b53af9e1

タグと

タグの順序は次のとおりです。

文字セット宣言 (09477266eebbc8a01f42387ae29e71dd):

この宣言は、最初の 1024 バイトに完全に含まれている必要があります。文書の内容。

IE での潜在的なコーディング セキュリティ問題を回避するために、この宣言はできるだけ早い段階 (b2386ffb911b14667cb8f0f91ea547a7 要素など、攻撃者によって悪用される可能性のあるものの前) に表示される必要があります。

互換モード メタ タグ (3adaa2e7250f1835e283b41569d28e1b):

b2386ffb911b14667cb8f0f91ea547a7 およびその他の e8e496c15ba93d81f6ea4fe5f55a2244 を除くタグの場合、このタグは他のタグの前に宣言する必要があります。

x-ua 互換

IE 8/9/10 はドキュメント互換モードをサポートしています。このモードはドキュメントの解析とページのレンダリングに影響します。したがって、サイト訪問者が IE 9 以降を使用している場合でも、IE が最新のレンダリング エンジンを使用しておらず、ページの解析に IE 5.5 レンダリング エンジンを使用する可能性があります。

x-ua-compatibility メタ タグの詳細は次のとおりです。

ba5b733e4ec9e085b7cab8ca889e50d4
さらに、HTTP 応答ヘッダー x-ua-comptible: ie=edge を使用して Web ページ データを送信できます。この方法では、場合によってはそのモードが適切でない場合でも、IE 8/9/10 はページのレンダリングに利用可能な最新のモードを使用するようになります。したがって、この Web サイトを閲覧するすべてのブラウザーが可能な限り最高のユーザー エクスペリエンスを提供できるようにすることが重要です。

可能であれば、メタ タグを削除し、HTTP 応答ヘッダーのみを送信することをお勧めします。その理由は、Web サイトが標準以外のポートで実行されている場合、IE はデフォルトで「内部サイトを互換表示で表示」し、メタ タグが機能しないためです。

Web サーバーとして Apache を使用している場合は、.htaccess ファイルを使用して HTTP 応答ヘッダーを構成できます。別のネットワーク サーバーの場合は、ここをクリックして他のサーバー構成情報を表示できます。

IE 11 以降、ドキュメント モードは非推奨になりました。ビジネスが依然として古い Web アプリケーションに依存している場合、またはビジネスが古いバージョンの IE 向けに設計されている場合は、全社でエンタープライズ モードを使用することを検討してください。

モバイル ビュー

ビューポート メタ タグを使用する場合は若干の違いがあります。詳細については、Apple の開発者向けドキュメントを参照してください。 HTML5 ボイラープレートは、さまざまな使用シナリオで適切なバランスを実現することを目的として、いくつかの簡単な設定で初期化されます。

c9bdfcd264f6bdb5e162254806b4786e
ファビコンとタッチ アイコン

サイト全体のショートカット アイコンルート ディレクトリに保存する必要があります。 HTML5 ボイラープレートは、開発者にデザインのリファレンスを提供するために、デフォルトで一連のアイコン (ファビコンや Apple Touch アイコンを含む) を提供します。

Modernizr

HTML5 ボイラープレートは、Modernizr のカスタム バージョンを使用します。ご存知のとおり、Modernizr は、すべてのブラウザーで HTML 5 要素 (HTML 5 shiv が含まれています) を使用できるようにする JavaScript ライブラリであり、また、機能検出の結果に基づいて HTML 要素に異なるクラス名を追加します。これにより、開発者はブラウザでサポートされている CSS および JavaScript の機能を識別できます。

一般に、ページの読み込み時間を最小限に抑えるための最良の方法は、Web ページ全体のレンダリングと解析の進行をブロックする外部スクリプトの読み込みプロセスを避けるために、ページの下部で JavaScript を呼び出すことです。ただし、ブラウザがまだサポートされていない HTML5 要素を正しく処理できるように、ブラウザがページをレンダリングする前に Modernizr スクリプトをロードして実行する必要があります。したがって、Modernizr スクリプトは、ドキュメントの先頭にロードできる唯一の JavaScript スクリプトである必要があります。

Putty スクリプト

プロジェクトにポリフィルをロードする必要がある場合は、ポリフィル スクリプトが他の JavaScript よりも前にロードされていることを確認する必要があります。 cdn.polyfill.io などの Polyfill CDN サービスを使用している場合は、他のスクリプトの前にページの下部に配置してください。

4c7e1195dc445b49955660ae72f8e9ef2cacc6d41bbb37262a98f745aa00fbf0
56e1d966c32e35151211e8b7f827d7a82cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83awindow.jQuery || document.write('89793d45ed08b962ed4ff88ab2297d262cacc6d41bbb37262a98f745aa00fbf0')2cacc6d41bbb37262a98f745aa00fbf0
dd1520bb86a103dadf2cc2b4d1a0b3c82cacc6d41bbb37262a98f745aa00fbf0
422c5e1e6b8c2924950f66a4c5039e632cacc6d41bbb37262a98f745aa00fbf0
単に putty スクリプトを使いやすくしたい場合は、それらのスクリプトを js/plugins.js に含めることができます。ロードする必要があるポリフィル スクリプトが多数ある場合は、js/vendor フォルダーに Polyfills.js ファイルを作成できます。もちろん、この手法を使用する場合は、他の JavaScript スクリプトよりも前に Putty スクリプトが完全にロードされるように注意してください。

Modernizr スクリプトと Putty スクリプトについて誤解している人もいます。 Modernizr を正しく理解することが重要です。Modernizr は機能の検出のみを行い、機能の修正は実行しません。 Modernizr が焦点を当てている唯一の修正は、クロスブラウザーの Putty スクリプトの長いリストです。

コンテンツ領域

HTML5 ボイラープレート テンプレートのコンテンツは、基本的に空です。これは、Web ページと Web アプリの両方のボイラープレート テンプレートの開発を容易にするために意図的に行われます。

ブラウザのアップグレードのヒント

ボイラープレートのコンテンツ領域には、IE 6/7 のユーザーにブラウザの最新バージョンをインストールすることを推奨するヒントが含まれています。 IE 6/7 をサポートする予定がある場合は、関連するコードを削除する必要があります。

Google CDN によって配布される jQuery

Google CDN が提供する jQuery は、プロトコルに依存しないパスを使用してページの下部に配置されます。 CDN バージョンが利用できない場合、またはオフライン バージョンが有効な場合に呼び出されるように、jQuery のローカル バージョンも設定されます。

Google CDN バージョンは、多くの代替バージョン (jQuery CDN など) よりも優れています。その理由は、一方では応答速度が速く、他方では最高の浸透率 (成功率の取得) があるためです。これにより、ライブラリ ファイルをユーザーのブラウザ キャッシュに転送する成功率が向上します。

Google CDN はテンプレートで Web ページやアプリケーションを開発するためのデフォルトの配布ネットワークですが、さらに構成を行う必要がある場合があります。 WebPageTest などのサービスや、PageSpeed Insights や YSlow などのブラウザ ツールを使用してサイトをテストできます。これは、サイトが実際にどのように動作するかをテストし、特定のページやアプリを最適化できる領域を特定するのに役立ちます。

Google Analytics コード

最後に、Google Analytics コードの一部があります。 Google では、このスクリプトをドキュメントの先頭に配置することを推奨しています。このスクリプトを Web ページの先頭に配置すると、ページが完全に読み込まれていない場合でもユーザーの訪問をカウントでき、ブラウザの最大同時接続数を増やすことができます。

詳細については、以下を参照してください:

Google Universal Analytics コードの最適化
Analytics.js の開始
Google Analytics の例とツール
注: その理由Google Analytics は最も人気のある追跡ソリューションの 1 つであるため、Google Analytics コードはデフォルトで含まれています。ただし、その使用方法が決まっているわけではないため、代替手段を検討して、自分にとって最適なものを選択する必要があります。

CSS 解析

テンプレート内のデフォルトの CSS ファイルは、条件付きクラス名、条件付きスタイル シート、Modernizr のパフォーマンスに依存しないため、自由に独自の設定に従うことができます。

Normalize.css

すべてのブラウザーでより一貫性があり、標準に準拠したレンダリングを保証するために、最新の緊密に統合された HTML 5 の代替手段である Normalize.css を導入しました。ブラウザのCSSリセット。

Normalize.css は CSS 自体をリセットしません:

標準化の修正が必要なスタイルのみを処理します
ブラウザの既存のデフォルト スタイルを完全に置き換えるのではなく保持します
ブラウザの欠陥を修正し、共通の違い
微妙な改善により使いやすさを向上
デバッグ ツールに干渉しない
適切な開発ドキュメントを用意する
詳細については、プロジェクトの Web サイトまたはブログ投稿を参照してください。

デフォルト スタイル

Normalize.css に基づいて、次のようにいくつかの基本スタイルが記述されます。

テキストの読みやすさを向上させるための基本的なレイアウト スタイルを提供します
テキストが強調表示されたとき、text-shadow はデフォルトでキャンセルされます
img、video、fieldset、textarea などの一部の要素のデフォルトの配置を変更しました
古いブラウザのプロンプト スタイルを変更しました
非常に刺激的です開発者は、実際のニーズに基づいたデフォルトのスタイル バージョン。

共通スタイル

基本スタイルに加えて、いくつかの共通の補助スタイルも提供します。

.hidden

要素を視覚的に非表示にしたり、要素のコンテンツをスクリーン リーダーからブロックしたりする場合は、要素に非表示スタイルを追加できます。これらの要素は、JavaScript を使用して後で設定または表示したり、非表示にしたりできます。

.visuallyhidden

要素を視覚的に非表示にしたい場合は、要素に .visuallyhidden スタイルを追加できますが、それでもスクリーン リーダーによって認識されます。

詳細については、以下を参照してください:

CSS の動作: スクリーン リーダー ユーザー専用の非表示コンテンツ
アクセシビリティのためのコンテンツの非表示
HTML5 ボイラープレート - 問題 #194
.invisible

要素を視覚的に隠したい場合、または要素のコンテンツをスクリーン リーダーからブロックしたい場合は、要素に .invisible スタイルを追加できますが、このメソッドはページ レイアウトには影響しません。

レイアウトから要素を削除する非表示スタイルとは異なり、非表示スタイルは、ドキュメント フロー内の位置や近くの要素の位置に影響を与えることなく、単に要素を非表示にするだけです。

注: キーワードのスタッキングに上記のスタイルを決して使用しないでください。検索エンジンでの Web サイトのランキングに間違いなく悪影響を及ぼします。

.clearfix

clearfix スタイルを要素に追加すると、浮動子要素が常にラップされるようになります。

過去数年間、clearfix ハックにはさまざまなバリエーションがありましたが、ここでは micro clearfix を使用します。

メディア クエリ

HTML5 ボイラープレートを使用すると、モバイルファーストでレスポンシブなデザインを簡単に開発できます。ただし、特効薬 (広義の意味: 極めて効果的な解決策) はないことに注意することが重要です。

幅広で高解像度のモバイル スタイルの構築に役立つメディア クエリを挿入しました。特定のデバイスの固定サイズを単に参照するのではなく、Web サイトのコンテンツに応じてブレークポイントを調整することをお勧めします。

モバイルファーストの原則に注意を払う必要がない場合は、メディア クエリ ステートメントを変更または削除することもできます。ウィンドウの幅が決まっている場合は、@media Only screen と (max-width: 480px) のように、固定サイズの代わりに max-width を使用できます。

モバイル開発の詳細については、「モバイル ボイラープレート」を参照してください。

タイポグラフィ スタイル

最後に、印刷プロセスを最適化し、同時に印刷物の読みやすさを向上させるために、いくつかの便利なタイポグラフィ スタイルを提供しました。

印刷時には、次のスタイルが適用されます:

すべての背景色を削除し、フォントの色を黒に変更し、テキストシャドウを削除します。これにより、印刷ペイントを節約し、印刷プロセスを高速化します。
リンクに下線を引き、URL アドレスを追加します。これにより、ユーザーが特定の参照アドレスを簡単に知ることができます。フラグメント識別子 (#href など) と javascript: 擬似プロトコル) の 2 つの例外があります。
ユーザーが略語の具体的な意味を理解しやすくするために、略語を展開します。
ブラウザのページング方法と、ページ分割時のページの上部と下部の最小行数を指定します。この属性をサポートするすべてのブラウザでは、次の解析が行われます:
表の各ページにヘッダー (4d3ef30d3653a0abd3b9259db24310cd
iOS 6 以降のスマート アプリ Safari バナー

次のメタ タグを引用して App Store にアクセスする複雑な方法をユーザーに紹介する必要はありません。ユーザーは iOS アプリをダウンロードしたり、それを使用したりするためのよりフレンドリーな方法を提供できます。 🎜>

3564d57f03b690053f06965ef4940931

DNS プリロード

つまり、DNS プリロードこれは、クライアントが DNS を所有するホストを解決してこれらの Web サイトをキャッシュできるように、ブラウザに現在の Web サイトのドメイン名を通知する方法であり、再度必要になったときのリクエスト速度は同じになります。 🎜>

暗黙的なプリロード

ブラウザは、HTML 内のリンク タグを検出すると、ユーザーに多くの情報を自動的にプリロードしますが、現在、ブラウザはドメイン名をリクエストしています。クライアント システムは、IP アドレスに基づいてドメイン名を割り当てます。クライアントは最初にキャッシュを確認し、キャッシュに存在しない場合は、DNS サーバーからの要求を送信します。これらの要求はバックグラウンドで発生し、サーバーをブロックしません。

このようにして、外部コンテンツの読み込みをブロックすることなく、必要な外部 IP アドレスをクライアント キャッシュに事前に読み込むことができ、ページのレンダリングが高速化されます。モバイル側では遅延が大きいため、これは明らかです。

暗黙的なプリロードを無効にする

c86cd26923402699f9cd3fe22c42b83f

X-DNS-Prefetch-Control メタ タグまたは HTTP ヘッダーが無効になっている場合でも、ブラウザはすべての明示的な DNS プリフェッチ リンクをプリロードします。

注: Web サイトが依存している場合は、

明示的なプリロード

通常、ブラウザは必要に応じて HTML をスキャンする場合にのみ外部ドメイン名をプリロードします。現在の HTML の外部にあるリソース (たとえば、リモート サーバーから JavaScript をリクエストする必要がある場合、またはすべての Web ページ情報を保存する CDN が必要な場合) の場合は、プリロードする必要があるすべてのドメイン名をリストできます。

8ef62c28ec3a34957830ba1993a480f9
1faac59dabc000a93dc5ebfade23ab2d
リクエストする必要がある外部ドメイン名が多数ある場合は、上記の方法を使用することをお勧めします。ブラウザができるだけ早くそれらをロードできるように、Meta Charset 要素の後にそれらを記述できれば素晴らしいと思います。

一般的なプリロードリンク

Amazon S3:

8b0fc011a754b4659646f7005f0c44bd
Google API:

1faac59dabc000a93dc5ebfade23ab2d
Microsoft Ajax Content Delivery Network:

48817d5ea4f81920d8f1d6919afadaa3
c1b31d3698fcffc42c5eccfea2bd8250
の場合DNS プリロードの詳細については、次を参照してください:

https://developer.mozilla.org/en-US/docs/Controlling_DNS_prefetching
https://dev.chromium.org/developers/design-documents /dns-prefetching
http://blogs.msdn.com/b/ie/archive/2011/03/17/internet-explorer-9-network-performance-improvements.aspx
http://dayofjs .com/videos/22158462/web-browsers_alex-russel
Google Universal Analytics

その他のトラッキング設定

内部的に最適化された HTML5 ボイラープレート Google Universal Analytics スニペット 内容はおおよそ次のとおりです:

ga('create', 'UA-XXXXX-X', 'auto'); ga('send', 'pageview');
さらに変更したい場合は、Google の高度な設定を参照してください。設定、ページビュー、イベント開発ドキュメント。

IP アドレスを隠す

一部の国では、2 つの法域に同じ厳格な法律がない場合、ドイツからドイツへのような個人情報の相互転送が許可されません。 EU は外部に送信されます。したがって、ネットワーク管理者は、Google Universal Analytics を使用する場合、個人情報がドイツから米国に転送されないようにする必要があります。開発者は、イベント/ページビューを送信する前に ga('set', 'anonymizeIp', true); を設定できます。

ga('create', 'UA-XXXXX-X', 'auto');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
jQuery AJAX リクエストの追跡

Google Analytics で jQuery AJAX リクエストを追跡する方法に関する Jango Steve の記事を次に示します。

次のコードを plugins.js に追加します:

/*

• すべての jQuery AJAX リクエストを Google Analytics に記録します

• 参照: http://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/
  */

if (typeof ga !== "unknown" && ga !== null) {

$(document).ajaxSend(function(event, xhr, settings){    ga('send', 'pageview', settings.url);});

}
JavaScript エラーの追跡

ga を定義した後、次の関数を追加します。

(function(window){
var unknown,

  link = function (href) {      var a = window.document.createElement('a');      a.href = href;      return a;  };

window.onerror = function (メッセージ, ファイル, 行, 列) {

  var host = link(file).hostname;  ga('send', {    'hitType': 'event',    'eventCategory': (host == window.location.hostname || host == undefined || host == '' ? '' : 'external ') + 'error',    'eventAction': message,    'eventLabel': (file + ' LINE: ' + line + (column ? ' COLUMN: ' + column : '')).trim(),    'nonInteraction': 1  });

};
}(window));
ページのスクロールを追跡

ga を定義した後、次の関数を追加します:

$(function(){

var isDuplicateScrollEvent,    scrollTimeStart = new Date,    $window = $(window),    $document = $(document),    scrollPercent;$window.scroll(function() {    scrollPercent = Math.round(100 * ($window.height() + $window.scrollTop())/$document.height());    if (scrollPercent > 90 && !isDuplicateScrollEvent) { //page scrolled to 90%        isDuplicateScrollEvent = 1;        ga('send', 'event', 'scroll',            'Window: ' + $window.height() + 'px; Document: ' + $document.height() + 'px; Time: ' + Math.round((new Date - scrollTimeStart )/1000,1) + 's'        );    }});

});
Internet Explorer

IE 10 では、ユーザーは「デスクトップ モード」に切り替えるように求められます

メトロ モードでは、IE 10 はプラグインをサポートしていません-ins (フラッシュなど)。 Web サイトでプラグインの使用が必要な場合は、x-ua-comptible メタ タグを使用して、デスクトップ モードに切り替えるようにユーザーに通知できます。

9c46474d2796eab56bf9e9b1ffcb2756
以下は、HTML5 ボイラープレートの x-ua-comptible のデフォルト値です:

9d0fca015b2f580318eaab42fd7c8342
詳細については、プラグインの使用を求めるプロンプトに関する Microsoft の IEBlog 投稿を参照してください。 IE10メトロモード。

IE 9 以降の固定サイト

固定が有効な場合、IE 9 ユーザーはタスクバーまたはスタート メニューにアプリケーションを追加できます。この機能は、ユーザーが要素をカスタマイズしやすくするための一連のツールも提供します。詳細については、IE9 固定サイトに関するドキュメントを参照してください。

ピン留めされた Web サイトに名前を付けます

このタグを使用しない場合、Windows はページ タイトルをアプリケーションのタイトルとして使用します。

9b986f0117f39aa72d720c54e579173f
固定サイトにヒントを追加する

ご存知のとおり、これはヒント ツールです。ユーザーがピン留めされた Web サイトのアイコンの上にマウスを置くと、プレビュー ウィンドウが表示されます。

362f26f927d54204c3a5c599411ad654
固定サイトのデフォルト ページを設定する

サイトが固定 特定の URL (ホームページなど) を指定する必要がある場合は、ここで設定します。良いアイデアは、次のように、固定されたサイトに特別に記述された URL を送信させ、開発者がその固定されたサイトを使用したユーザーの数を追跡できるようにすることです。

2af914b8c5cdf70fe34346948dd27b76
IE コントロール ボタンの色をカスタマイズします

IE 9 以降では、固定 Web サイト アイコンの色が自動的に使用され、対応する影の色がブラウザ ボタンに追加されます。開発者が他の色をカスタマイズしない限り、カスタム カラーはカラー キーワード (赤) と 16 進数の色 (#ff0000) のみを使用できます。 )。

4c020a15437f46f31ee67dfe68ca77fe
カスタム ウィンドウ サイズ

固定サイトが開いている場合特定のサイズの場合、ここでサイズをカスタマイズできます。この関数は静的なピクセル サイズのみをサポートしており、最小値は 800x600 です。 =600">

ジャンプ リストの追加

開発者は、固定 Web サイトにジャンプ リストを追加できます。マウスを右クリックすると、ジャンプ リストがすぐに表示されます。各リスト項目は、それぞれを指します。特定の URL であり、独自のアイコン (通常は 16x16 アイコン)

b8a21bb4f349f2380093f20deaee3710

af90fb8b9f7ed36b3de18af9ac6b70fb

(Windows 8) 高度な品質の視覚効果
Windows 8 では、開発者が PNG タイル イメージとタイルの背景色をカスタマイズします。詳細については IE ブログをご覧ください。

Web サイト用に 144x144 の解像度のアイコンを作成します。キャンバス全体を塗りつぶし、背景色を透明に変更します。

画像を 32 ビット PNG 形式で保存し、品質を低下させることなく最適化します。次に、名前を Metro-tile.png などの任意の名前に変更します。

IE ブログ投稿内の参照タイルとその色に HTML メタ要素を追加できます。

Windows 8 固定 Web サイトの情報識別

IE 10 は、Web サイトの XML ドキュメントをポーリングすることで主要な情報を識別し、最初の画面のアプリケーション アイコンに表示できます。これにより、ユーザーはアプリを開いていない場合でも更新情報を受け取ることができます。識別値は、数値または事前定義された記号のリストからの 1 つです。

バッジ XML スキーマへのリンクを含む IEBlog のチュートリアル

利用可能なバッジの値

95e29fbc309c7e4c43e80fbb30f4fbf3

IE 10 でクリック時のリンクの強調表示を無効にする

これは、iOS Safari の -webkit-tap-highlight とよく似ています。この CSS プロパティとの違いは、HTML メタ タグを使用し、色の値ではなくブール値であることです。この関数を使用すると、すべての その他のヘルプとヒントについては、WebKit 指向アプリの IE10 への適応に関する Microsoft のドキュメントを参照してください。

検索

検索エンジン スパイダーのサイトマップを設定します。

サイトマップの作成方法をご覧ください

422cea215222ad73a76bcc17ef18c2e6

検索エンジンからのページをブロックする

元 FLickr コミュニティ マネージャーの Heather Champ 氏によると、十分な賢明な方であれば、検索エンジンに「連絡先」ページと「苦情」ページを取得させるべきではありません。 >1378350dca22923a1b0e56322dcb386a

リマインダー: 検索エンジンに表示される情報は、Firefox および IE 検索プラグインのページには表示されません。

検索機能では、パフォーマンスを向上させるためにブラウザ検索プラグインの使用を検討できます。「検索プラグイン」は基本的に、プラグインとブラウザの情報相互作用を定義する XML ファイルです。

6d55a66de157980c4f18e29700cdd573

その他のパラメータ

ポリフィルを使用します。
Microformats と microdata を使用して、検索結果の精度を最適化します。
Web アプリを構築している場合は、iOS 5 以降でスクロールするときに -webkit-overflow-scrolling: touch 経由でネイティブ スタイルを呼び出すことを検討してください。
Chrome の翻訳プロンプトをブロックしたい場合、またはウェブページで Google 翻訳を無効にしたい場合は、19f77106cf2f7c0dd226cb29e772a281 を使用できます。特定のセクションのみ翻訳を無効にしたい場合は、class="notranslate" を追加できます。
iOS で Safari による携帯電話番号の自動検出とフォーマットを無効にしたい場合は、2924b2a0235d5d217597a306df5f1ea7 を使用できます。
X-Robots タグ ヘッダーの実装を使用すると、開発段階で Web サイトが検索エンジンによってクロールされるのを防ぐことができます。
現在のスクリーン リーダーは HTML5 を十分にサポートしていません。アクセシビリティ エクスペリエンスを強化するには、accessifyhtml5.js を使用して ARIA ロールを HTML5 要素に追加することをお勧めします。
購読

RSS

RSS 購読が必要ですか?こちらのチュートリアルをご覧ください。 RSS フィードを最初から作成する方法を学びます。

6b05b03f714e8671ccee2ba2eb5fc9b5
Atom

Atom とRSS は非常によく似ており、気に入っていただけるかもしれません。Atom のドキュメントを参照してください。

32412e30b90d99213368e99096fe2bad
ピンバック

その他の場合Web サイトがあなたの Web サイトにリンクすると、サーバーに通知される場合があります。 href 属性には、ピンバック上のサービスのアドレスが含まれている必要があります。

6d49089210b2058f50ecd442e545769c
詳細情報

概要説明
ステップバイステップのサンプルケース
PHP ピンバックサービス
ソーシャル ネットワーク

Facebook グラフ

ユーザーが現在のサイトを共有する場合、開発者は Facebook またはその他のソーシャル ネットワークに共有する情報コンテンツを設定できます。以下は、開発者が必要とする最も基本的な情報です。より具体的なコンテンツ タイプについては、Facebook の組み込み Open Graph コンテンツ テンプレートを参照してください。 Facebook でサポートされている高度な機能を使用したい場合は、Open Graph チュートリアルを参照してください。

7f6a1d8fc48fc1ea44c142807e56fbe2
3fe4dd7e4e7d3c82635825a50b88c092
3ac216945a695ebb0c19db222ead0d46
Twitter カード

Twitter カードは Facebook グラフと同様の機能を提供します。実際、Twitter ではカードが利用できない場合にもグラフのような機能を使用しています。このアプローチでは、Twitter では開発者が各ベース ドメインでカーディング機能をアクティブ化する必要があることに注意してください。詳しい形式とアプリケーションの処理については、Twitter Cards の公式ドキュメントを参照してください。

8d0fa842febe39b63e0c898c67c98a05
2c1c97d5d0bdfeaee3688e4863ab3545
0114a3fd154b1d7b1b680d94791328cc
9fc1919e2fbcc90bcefd3b5ee60ed6f7
4a01b599099fb7f1b438ddd2a7db3a7b
a0b25a25deb0dca60760f515a8f2ad3b
URL

正規 URL

URL にパラメータを追加することで#または ? をクリックするとページのステータスが表示され、ブラウザや他のユーザーにとって役立ちます。 http://www.example.com/cart.html?shopping-cart-open=true は、http://www.example.com/cart.html よりも正確にページを定義します。

843dc159ceab0c05483ddd8c53ca9a7f
公式ショートリンク

検索エンジンまたは Web サイトのユーザーに「これはこの Web サイトの短縮アドレスです」というプロンプトを表示します、この方法はサポートされなくなりました。詳細については、Microformats wiki のショートリンクに関する記事を参照してください。

89ff2cab0ab835dcf28ad1166870fe4d
モバイル アドレスを分離する

デスクトップとモバイルで別の URL を使用する場合は、次の点を考慮する必要があります。検索エンジンのアルゴリズムが Web サイトの構成情報をより適切に解析できるようにする方法。

HTML ページに次のコメントを追加すると役立ちます:

デスクトップ Web ページの場合は、795acfd498b6b755cf4156c0f5b8ee90
モバイル Web ページの場合は、関連するデスクトップ アドレスを指すように link rel="canonical" タグを追加します。 " href= "http://www.example.com/page.html">。
詳細については、次を参照してください:

https://developers.google.com/webmasters/smartphone-sites/details#specialurls
https://developers.google.com/webmasters /smartphone -sites/feature-phones
Web アプリ

Web アプリが iOS のデスクトップに追加されるとき、次のタグを使用して情報を取得できます:

Use apple- mobile-web-app -capable。Web アプリケーションの Chrome への依存を軽減し、IOS アプリの表示サポートを提供します。 apple-mobile-web-app-status-bar-style を使用して、デフォルト ビューのカラー モードを制御できます。

87e6354d25f0d56a236c86a2032d4857
3d1108b169f99f94385d61ecb27a4ff7
デスクトップ アイコンの名前を変更するには、apple-mobile-web-app-title を使用します。この機能は iOS 6 以降でサポートされています。

3a062b4d981d1df0b2af56330e94682a
詳細については、Apple の公式ドキュメントを参照してください。

Apple Touch アイコン

Apple Touch アイコンは、iOS デバイスのデスクトップ アイコンと同等です。 Apple Touch アイコンの主なサイズは次のとおりです。

57×57px – @1x ディスプレイを備えた iPhone および iPod Touch
72×72px – iOS ≤ 676× 76px – iOS を実行している @1x ディスプレイを備えた iPad および iPad mini ≥ 7
114×114px – iOS を実行している @2x ディスプレイを備えた iPhone ≤ 6
120×120px – iOS を実行している @2x および @3x ディスプレイを備えた iPhone ≥ 7
144×144px – iOS を実行する @2x ディスプレイを備えた iPad および iPad mini ≤ 6
152×152px – iOS 7
180×180px – iPad および iPad mini を実行する @2x ディスプレイを備えた iPad および iPad mini iOS 8 を実行している @2x ディスプレイを使用
ディスプレイ サイズの意味:

@1x - 非 Retina

@2x - Retina
@3x - Retina HD
iOS デバイスに関する詳細なディスプレイ情報, iOSデバイスの表示一覧をご覧ください。

ほとんどの場合、apple-touch-icon.png という名前の 180 × 180 ピクセル サイズのアイコンをページの 93f0f5c25f18dab9d176bd4f6de5d30e に含めることができます:

b051c74ed228563f31cd7ec122896ff5

各デバイスに異なるコンテンツを持たせたい場合は、複数の Apple Touch アイコンを追加できます。詳細については、タッチ アイコンに関する記事を参照してください。

Apple Touch 起動イメージ

さらに、iOS 上の Web アプリケーションに起動インターフェイスを追加できます。この機能を使用するには、apple-touch-startup-image を使用し、関連する画像リンクを添付する必要があります。 iOS は複数の画面サイズで動作するため、画像をロードする前にメディア ルックアップを使用してサイズを検出する必要があります。これは Retina iPhone の例です:

3189909b724bcd5b396b621499cbb392

ただし、この機能では、起動インターフェイスの画像を検出するために JavaScript の使用が必要になる場合があります。 Mobile Boilerplate はこの問題を解決する有効な機能を提供します。実装方法については helpers.js を参照してください。

Chrome モバイル ウェブ アプリ

Chrome モバイルには、デスクトップにウェブ アプリをインストールするための独自のメタ タグがあり、Apple の属性タグよりも汎用性が高くなります。

40113e2602f9478f94914a40926d725d

タッチ アイコンにも適用されます:

b71806635733a8273d7dae347f8693c1

その他

.gitignore

HTML5 ボイラープレートでは、基本的なプロジェクト レベルの .gitignore が導入されています。主に、ソース コードがプロジェクト内の特定のファイルやディレクトリの管理を無視するようにするために使用されます。異なる開発環境では異なる無視リストを使用すると便利です。

システム固有およびエディター固有のファイルは、「グローバル無視」を使用して、システム内のすべてのライブラリの関連ファイルへの依存関係を無視する必要があります。

たとえば、グローバルに無視したい HOME ディレクトリで、次の内容を .gitignore ファイルに追加します。

[core]

excludesfile = ~/.gitignore
詳細については、次を参照してください:

グローバル無視の詳細: https://help.github.com/ articles/ignore-files

GitHub 上の無視の包括的なセット: https://github.com/github/gitignore
.editorconfig

.editorconfig ファイルは、開発者/開発チームのモチベーションを高め、支援するために使用されます。 、「異なるエディターや IDE で一貫したコーディング スタイルを定義して維持する」で説明します。

デフォルトでは、.editorconfig にはコード スタイルを反映するいくつかの基本プロパティが含まれていますが、開発者は必要に応じて関連するプロパティをカスタマイズできます。

エディターと IDE が .editorconfig 構成ファイルをより適切に使用するには、開発者はプラグインをインストールする必要があります。

注: HTML5 ボイラープレートによって提供されるサーバー構成を使用する必要がない場合は、サーバーで .editorconfig ファイルの使用を許可しないことを強くお勧めします。このファイルは機密情報をブロックするためです。

詳細については、EditorConfig プロジェクトを参照してください。

サーバー構成

HTML5 ボイラープレートは、Apache HTTP サーバーの .htaccess ファイルで構成されます。 Apache サーバーを使用していない場合は、サーバー構成をダウンロードして、使用しているサーバーに適合させることをお勧めします。

サーバーとスタック

WEB サーバーとスタックの紹介はこのドキュメントの範囲をはるかに超えていますが、一般的に使用される資料をいくつか示します:

Apache HTTP サーバー
LAMP (Linux、Apache、MySQL、および PHP)。他のバリアントには、MAMP、WAMP、または XAMPP が含まれます。
LAPP は MySQL の代わりに PostgreSQL を使用します
Nginx
LEMP は LAMP スタックに似ていますが、Nginx を使用します
IIS
ASP.NET
MEAN (MongoDB、Express、AngularJS、Node.js)
.htaccess

.htaccess (ハイパーテキスト アクセス) ファイルは、Apache HTTP サーバー構成ファイルです。一般的に使用される:

URL の書き換え
キャッシュの制御
認証
サーバー側のインクルード
リダイレクト
Gzipping
メインストリーム サーバーの構成ファイルを使用した場合 (通常は httpd.conf で呼び出されます)、.htaccess ファイルへのロジックの追加についてはよく知っている必要があります。たとえば、このセクションはメイン構成ファイル内にあります。 .htaccess ファイルは Apache の速度を低下させる可能性があるため、通常はこれをお勧めします。

ローカルの Apache モジュールを有効にするには、ここを参照してください。

.htaccess は主に次の目的で使用されます:

Web フォントのクロスオリジンリクエストを許可します
ブラウザが画像をリクエストするとき、クロスオリジンリソース共有ヘッダー
を使用して 404 を処理します.html を 404 エラーとして表示する ドキュメント
IE ユーザーのユーザー エクスペリエンスを向上させる
text/html および text/plain の文字エンコーディングとして UTF-8 を使用する
URL 書き換えエンジンを有効にする
www を強制または削除するURL の先頭。
デフォルトのドキュメントが見つからない場合、ディレクトリへの呼び出しをブロックします
ファイル アクセスを分離して機密情報の漏洩を防ぎます
MIME タイプのセキュリティ リスクを軽減します
強制圧縮
通知ブラウザー サーバーからリクエストする必要があるかどうか 特定のファイル、またはブラウザーのキャッシュから特定のファイルをフェッチする必要があるかどうか
.htaccess を使用する場合、すべての内部コメントを一度読むことをお勧めします。これらの一部はオプションです。

.htaccess ファイルの詳細については、ここを参照してください。

.htaccess のソース ライブラリはここにあることに注意してください。

crossdomain.xml

クロスドメイン ポリシー ファイルは、Web クライアント (Adobe Flash Player、Adobe Reader など) からコンテンツが取得される XML ドキュメントです。これにより、Web クライアントからのデータの処理が可能になります。複数のドメイン名:

データの読み取りを許可
クライアントがクロスドメインリクエストでカスタムヘッダー情報をインポートできるようにします
基本的なソケット接続が許可されています
注: クライアントが特定のソースからの場合ドメイン名がコンテンツを取得すると、コンテンツ要求が他のドメイン名にリダイレクトされます。その後、リモート ドメイン名はクロスドメイン ポリシー ファイルを使用してソース ドメイン名から承認を取得し、最終的にクライアントが関連トランザクションの処理を続行できるようにする必要があります。 。

詳細については、クロスドメイン ポリシー ファイルの仕様を参照してください。

robots.txt

robots.txt ファイルは、Web サイト内のクロール可能なページについて検索エンジンに通知するために使用されます。

デフォルトでは、ファイルには次の 2 行の情報が含まれています:

ユーザーエージェント: * - 次のルールはすべての検索エンジンに適用されます
禁止: - Web サイト内のすべてのページクロール可能
特定のページをブロックする場合は、Disallow パラメーターの後に特定のステートメントを作成する必要があります (例: Disallow: /path)。すべてをブロックしたい場合は、「Disallow: /」だけを指定します。

/robots.txt はアクセス制御には使用されないため、このように使用しないでください。施錠されたドアではなく、「通行禁止」の標識と考えてください。 robots.txt ファイルを介してブロックされている URL は、クロールされていない場合でも検出される可能性があり、robots.txt ファイル内のコンテンツには誰でもアクセスできるため、プライベート コンテンツの場所が間接的に明らかになります。したがって、個人情報へのアクセスをブロックしたい場合は、合理的な検証メカニズムを使用することをお勧めします。

/robots.txt ファイルの詳細については、次を参照してください:

robotstxt.org
Google による robots.txt ファイルの処理方法
browserconfig.xml

Windows 8.1 起動インターフェイスでユーザーが固定したアプリケーション アイコンは、browserconfig.xml ファイルを通じてカスタマイズできます。このファイルでは、タイルの色、画像、さらには動的タイルをカスタマイズできます。

デフォルトでは、このファイルは 2 つの既存のタイル画像を指します:

tile.png (558x558px): 小、中、大のタイルに使用されます。この画像は必要に応じて使用できます。サイズは自動的に変更されます。 。
tile-wide.png (558x270px): ワイド タイルのユーザー。
Web サイトをブックマークする場合、IE 11 はブックマーク内で同じ画像を使用することに注意してください。

browserconfig.xml ファイルの詳細については、MSDN を参照してください。

よくある質問

jQuery のリンクに http が追加されないのはなぜですか?

これは、プロトコル相対 URL の使用が原因です。

注: ブラウザーでローカル Web ページを直接プレビューしようとすると、ブラウザーは関連するリソースを取得しようとするため、特にプロトコル相対 URL を使用してリソースを読み込むことができません。ローカルファイルシステム。 Web ページをテストするには、Web ページのオンライン プレビューを可能にするローカル HTTP サーバーまたはファイル ホスティング サービス (Dropbox など) を使用することをお勧めします。

ローカル HTTP サーバーのセットアップには、さまざまな短いコマンドを使用できます。

PHP 5.4.0 以降では、php -S localhost:8080 コマンドを使用して、ローカル ディレクトリから起動および実行します。 。
Python 2.x は、python -m SimpleHTTPServer コマンドを使用してローカル ディレクトリから起動および実行します。
Python 3.x は、python -m http.server コマンドを使用してローカル ディレクトリから起動および実行します。
Ruby 1.9.2 以降では、ruby -run -ehttpd . -p8080 コマンドを使用してローカル ディレクトリから起動および実行します。
Node.js は、static -p 8080 または http-server -p 8080 コマンドを使用してサーバーをインストールし、起動します。
最新バージョンの jQuery を Google CDN から自動的にロードしてみませんか?

まず、Google CDN が指す jQuery ファイルは更新されなくなり、新しいバージョンの変更によって Web スクリプトが無効になるのを防ぐために、バージョン 1.11.1 でロックされます。

次に、一般的に、バージョンの更新は慎重に決定する必要があります。 Web ページが常に最新バージョンを参照する必要がない理由は次のとおりです。

既存のプラグインやコードと互換性がない可能性がある
特定のバージョンへの固定参照と比較して、常に最新バージョンを引用すると、ローカル キャッシュ時間が短縮されます。これは、ユーザーが長期キャッシュの利便性を享受できないことを意味します。
Google Analytics コードがページの下部に配置されているのはなぜですか? Google では、93f0f5c25f18dab9d176bd4f6de5d30e に配置することを推奨しています。

93f0f5c25f18dab9d176bd4f6de5d30e に配置する主な利点は、ページの読み込みが完了する前にユーザーが現在の Web ページから離れた場合でも、ページ ビュー (PV) を取得できることです。ただし、ページの下部に配置すると、全体的なパフォーマンスが向上する可能性があります。

HTML5 ボイラープレートにブートストラップを統合する方法。

簡単な方法は、Initializr を使用して、HTML5 ボイラープレートとブートストラップの両方を含むカスタム ビルド環境を作成することです。

詳細については、記事「HTML5 ボイラープレートとブートストラップの統合」を参照してください。

HTML5 ボイラープレートの新しいバージョンがリリースされるたびに、開発者は Web サイトを更新する必要がありますか?

絶対に必要ありません!家を建てた後、時々修繕は必要ですが、通常は基礎を敷き直す必要がないのと似ています。もちろん、新しいバージョンで変更を試したい場合は、それは十分に可能ですが、そうすることによるコストと利点を正しく比較検討することが最善です。

テクニカル サポートはどこで受けられますか?

ヘルプが必要な場合は StackOverflow を使用してください。

この記事は HTML5 ボイラープレートの公式ドキュメントに基づいて翻訳されており、翻訳全体に私たちの独自の理解と考えが含まれています。翻訳が適切でない場合、または何か間違っている場合は、業界の友人にアドバイスを求めてください。この翻訳を転載したい場合は、英語のソースを明記してください: https://github.com/h5bp/html5-boilerplate/blob/master/src/doc/html.md。