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

出典: 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 がいくつか含まれています。

.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 属性

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

タグと

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

文字セット宣言 ():

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

IE での潜在的なコーディングセキュリティ問題を回避するために、この宣言はできるだけ早い段階 ( 要素など、攻撃者によって悪用される可能性のあるものの前) に表示される必要があります。 <p>互換モードメタタグ (<meta http-equiv="x-ua-compatibility" content="ie=edge">): </p> <p> <title> およびその他の <meta> を除くタグの場合、このタグは他のタグの前に宣言する必要があります。 <br> <br>x-ua 互換</p> <p>IE 8/9/10 はドキュメント互換モードをサポートしています。このモードはドキュメントの解析とページのレンダリングに影響します。したがって、サイト訪問者が IE 9 以降を使用している場合でも、IE が最新のレンダリングエンジンを使用しておらず、ページの解析に IE 5.5 レンダリングエンジンを使用する可能性があります。 </p> <p>x-ua-compatibility メタタグの詳細は次のとおりです。 </p> <p><meta http-equiv="x-ua-comptible" content="ie=edge"> <br> さらに、HTTP 応答ヘッダー x-ua-comptible: ie=edge を使用して Web ページデータを送信できます。この方法では、場合によってはそのモードが適切でない場合でも、IE 8/9/10 はページのレンダリングに利用可能な最新のモードを使用するようになります。したがって、この Web サイトを閲覧するすべてのブラウザーが可能な限り最高のユーザーエクスペリエンスを提供できるようにすることが重要です。 </p> <p>可能であれば、メタタグを削除し、HTTP 応答ヘッダーのみを送信することをお勧めします。その理由は、Web サイトが標準以外のポートで実行されている場合、IE はデフォルトで「内部サイトを互換表示で表示」し、メタタグが機能しないためです。 </p> <p>Web サーバーとして Apache を使用している場合は、.htaccess ファイルを使用して HTTP 応答ヘッダーを構成できます。別のネットワークサーバーの場合は、ここをクリックして他のサーバー構成情報を表示できます。 </p> <p> IE 11 以降、ドキュメントモードは非推奨になりました。ビジネスが依然として古い Web アプリケーションに依存している場合、またはビジネスが古いバージョンの IE 向けに設計されている場合は、全社でエンタープライズモードを使用することを検討してください。 </p> <p>モバイルビュー</p> <p>ビューポートメタタグを使用する場合は若干の違いがあります。詳細については、Apple の開発者向けドキュメントを参照してください。 HTML5 ボイラープレートは、さまざまな使用シナリオで適切なバランスを実現することを目的として、いくつかの簡単な設定で初期化されます。 </p> <p><meta name="viewport" content="width=device-width,Initial-scale=1"><br>ファビコンとタッチアイコン</p> <p>サイト全体のショートカットアイコンルートディレクトリに保存する必要があります。 HTML5 ボイラープレートは、開発者にデザインのリファレンスを提供するために、デフォルトで一連のアイコン (ファビコンや Apple Touch アイコンを含む) を提供します。 </p> <p>Modernizr</p> <p>HTML5 ボイラープレートは、Modernizr のカスタムバージョンを使用します。ご存知のとおり、Modernizr は、すべてのブラウザーで HTML 5 要素 (HTML 5 shiv が含まれています) を使用できるようにする JavaScript ライブラリであり、また、機能検出の結果に基づいて HTML 要素に異なるクラス名を追加します。これにより、開発者はブラウザでサポートされている CSS および JavaScript の機能を識別できます。 </p> <p> 一般に、ページの読み込み時間を最小限に抑えるための最良の方法は、Web ページ全体のレンダリングと解析の進行をブロックする外部スクリプトの読み込みプロセスを避けるために、ページの下部で JavaScript を呼び出すことです。ただし、ブラウザがまだサポートされていない HTML5 要素を正しく処理できるように、ブラウザがページをレンダリングする前に Modernizr スクリプトをロードして実行する必要があります。したがって、Modernizr スクリプトは、ドキュメントの先頭にロードできる唯一の JavaScript スクリプトである必要があります。 </p> <p>Putty スクリプト</p> <p>プロジェクトにポリフィルをロードする必要がある場合は、ポリフィルスクリプトが他の JavaScript よりも前にロードされていることを確認する必要があります。 cdn.polyfill.io などの Polyfill CDN サービスを使用している場合は、他のスクリプトの前にページの下部に配置してください。 </p> <p><script src="//cdn.polyfill.io/v1/polyfill.min.js"></script><br><script src="//ajax.googleapis. com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><br><script>window.jQuery || document.write('<script src="js/ vendor/jquery-1.11.2.min.js"></script>')</script><br><script src="js/plugins.js"></script><br><script src="js/main.js"></script><br>単に putty スクリプトを使いやすくしたい場合は、それらのスクリプトを js/plugins.js に含めることができます。ロードする必要があるポリフィルスクリプトが多数ある場合は、js/vendor フォルダーに Polyfills.js ファイルを作成できます。もちろん、この手法を使用する場合は、他の JavaScript スクリプトよりも前に Putty スクリプトが完全にロードされるように注意してください。 </p> <p>Modernizr スクリプトと Putty スクリプトについて誤解している人もいます。 Modernizr を正しく理解することが重要です。Modernizr は機能の検出のみを行い、機能の修正は実行しません。 Modernizr が焦点を当てている唯一の修正は、クロスブラウザーの Putty スクリプトの長いリストです。 </p> <p>コンテンツ領域</p> <p>HTML5 ボイラープレートテンプレートのコンテンツは、基本的に空です。これは、Web ページと Web アプリの両方のボイラープレートテンプレートの開発を容易にするために意図的に行われます。 </p> <p>ブラウザのアップグレードのヒント</p> <p>ボイラープレートのコンテンツ領域には、IE 6/7 のユーザーにブラウザの最新バージョンをインストールすることを推奨するヒントが含まれています。 IE 6/7 をサポートする予定がある場合は、関連するコードを削除する必要があります。 </p> <p>Google CDN によって配布される jQuery</p> <p>Google CDN が提供する jQuery は、プロトコルに依存しないパスを使用してページの下部に配置されます。 CDN バージョンが利用できない場合、またはオフラインバージョンが有効な場合に呼び出されるように、jQuery のローカルバージョンも設定されます。 </p> <p>Google CDN バージョンは、多くの代替バージョン (jQuery CDN など) よりも優れています。その理由は、一方では応答速度が速く、他方では最高の浸透率 (成功率の取得) があるためです。これにより、ライブラリファイルをユーザーのブラウザキャッシュに転送する成功率が向上します。 </p> <p>Google CDN はテンプレートで Web ページやアプリケーションを開発するためのデフォルトの配布ネットワークですが、さらに構成を行う必要がある場合があります。 WebPageTest などのサービスや、PageSpeed Insights や YSlow などのブラウザツールを使用してサイトをテストできます。これは、サイトが実際にどのように動作するかをテストし、特定のページやアプリを最適化できる領域を特定するのに役立ちます。 </p> <p>Google Analytics コード</p> <p>最後に、Google Analytics コードの一部があります。 Google では、このスクリプトをドキュメントの先頭に配置することを推奨しています。このスクリプトを Web ページの先頭に配置すると、ページが完全に読み込まれていない場合でもユーザーの訪問をカウントでき、ブラウザの最大同時接続数を増やすことができます。 </p> <p>詳細については、以下を参照してください: </p> <p>Google Universal Analytics コードの最適化<br>Analytics.js の開始<br>Google Analytics の例とツール<br>注: その理由Google Analytics は最も人気のある追跡ソリューションの 1 つであるため、Google Analytics コードはデフォルトで含まれています。ただし、その使用方法が決まっているわけではないため、代替手段を検討して、自分にとって最適なものを選択する必要があります。 </p> <p>CSS 解析</p> <p>テンプレート内のデフォルトの CSS ファイルは、条件付きクラス名、条件付きスタイルシート、Modernizr のパフォーマンスに依存しないため、自由に独自の設定に従うことができます。 </p> <p>Normalize.css</p> <p>すべてのブラウザーでより一貫性があり、標準に準拠したレンダリングを保証するために、最新の緊密に統合された HTML 5 の代替手段である Normalize.css を導入しました。ブラウザのCSSリセット。 </p> <p>Normalize.css は CSS 自体をリセットしません: </p> <p>標準化の修正が必要なスタイルのみを処理します<br>ブラウザの既存のデフォルトスタイルを完全に置き換えるのではなく保持します<br> ブラウザの欠陥を修正し、共通の違い <br> 微妙な改善により使いやすさを向上 <br> デバッグツールに干渉しない <br> 適切な開発ドキュメントを用意する <br> 詳細については、プロジェクトの Web サイトまたはブログ投稿を参照してください。 </p> <p>デフォルトスタイル</p> <p>Normalize.css に基づいて、次のようにいくつかの基本スタイルが記述されます。 </p> <p>テキストの読みやすさを向上させるための基本的なレイアウトスタイルを提供します<br>テキストが強調表示されたとき、text-shadow はデフォルトでキャンセルされます<br>img、video、fieldset、textarea などの一部の要素のデフォルトの配置を変更しました<br>古いブラウザのプロンプトスタイルを変更しました<br>非常に刺激的です開発者は、実際のニーズに基づいたデフォルトのスタイルバージョン。 </p> <p>共通スタイル</p> <p>基本スタイルに加えて、いくつかの共通の補助スタイルも提供します。 </p> <p>.hidden</p> <p>要素を視覚的に非表示にしたり、要素のコンテンツをスクリーンリーダーからブロックしたりする場合は、要素に非表示スタイルを追加できます。これらの要素は、JavaScript を使用して後で設定または表示したり、非表示にしたりできます。 </p> <p>.visuallyhidden</p> <p>要素を視覚的に非表示にしたい場合は、要素に .visuallyhidden スタイルを追加できますが、それでもスクリーンリーダーによって認識されます。 </p> <p>詳細については、以下を参照してください: </p> <p>CSS の動作: スクリーンリーダーユーザー専用の非表示コンテンツ<br>アクセシビリティのためのコンテンツの非表示<br>HTML5 ボイラープレート - 問題 #194<br> .invisible </p> <p>要素を視覚的に隠したい場合、または要素のコンテンツをスクリーンリーダーからブロックしたい場合は、要素に .invisible スタイルを追加できますが、このメソッドはページレイアウトには影響しません。 </p> <p>レイアウトから要素を削除する非表示スタイルとは異なり、非表示スタイルは、ドキュメントフロー内の位置や近くの要素の位置に影響を与えることなく、単に要素を非表示にするだけです。 </p> <p>注: キーワードのスタッキングに上記のスタイルを決して使用しないでください。検索エンジンでの Web サイトのランキングに間違いなく悪影響を及ぼします。 </p> <p>.clearfix</p> <p>clearfix スタイルを要素に追加すると、浮動子要素が常にラップされるようになります。 </p> <p>過去数年間、clearfix ハックにはさまざまなバリエーションがありましたが、ここでは micro clearfix を使用します。 </p> <p>メディアクエリ</p> <p>HTML5 ボイラープレートを使用すると、モバイルファーストでレスポンシブなデザインを簡単に開発できます。ただし、特効薬 (広義の意味: 極めて効果的な解決策) はないことに注意することが重要です。 </p> <p>幅広で高解像度のモバイルスタイルの構築に役立つメディアクエリを挿入しました。特定のデバイスの固定サイズを単に参照するのではなく、Web サイトのコンテンツに応じてブレークポイントを調整することをお勧めします。 </p> <p>モバイルファーストの原則に注意を払う必要がない場合は、メディアクエリステートメントを変更または削除することもできます。ウィンドウの幅が決まっている場合は、@media Only screen と (max-width: 480px) のように、固定サイズの代わりに max-width を使用できます。 </p> <p>モバイル開発の詳細については、「モバイルボイラープレート」を参照してください。 </p> <p>タイポグラフィスタイル</p> <p>最後に、印刷プロセスを最適化し、同時に印刷物の読みやすさを向上させるために、いくつかの便利なタイポグラフィスタイルを提供しました。 </p> <p>印刷時には、次のスタイルが適用されます: </p> <p>すべての背景色を削除し、フォントの色を黒に変更し、テキストシャドウを削除します。これにより、印刷ペイントを節約し、印刷プロセスを高速化します。 <br>リンクに下線を引き、URL アドレスを追加します。これにより、ユーザーが特定の参照アドレスを簡単に知ることができます。フラグメント識別子 (#href など) と javascript: 擬似プロトコル) の 2 つの例外があります。 <br>ユーザーが略語の具体的な意味を理解しやすくするために、略語を展開します。 <br>ブラウザのページング方法と、ページ分割時のページの上部と下部の最小行数を指定します。この属性をサポートするすべてのブラウザでは、次の解析が行われます: <br> 表の各ページにヘッダー (<thead>) があることを確認します <br /> ブロック参照、書式設定済みのテキスト、画像、表が切り捨てられるのを防ぎます。別のページに移動します。 <br />当該ページ以外にタイトルが表示されないように注意してください。 <br />印刷物に孤児や寡婦の属性が表示されないように注意してください。 <br />この文字体裁スタイルは、HTTP リクエストを減らすために他の CSS スタイルでラップされています。同様に、他のスタイルを簡単にオーバーライドできるように、常にスタイルシートの最後に配置する必要があります。 </p> <p>JS 解析</p> <p>main.js</p> <p>このファイルは、Web サイト/アプリケーション内で JavaScript コードを含めたり参照したりするために使用できます。大規模なプロジェクトの場合は、Require.js などのモジュールローダーを使用して、他のスクリプトの読み込みを容易にすることができます。 </p> <p>plugins.js</p> <p>このファイルは、jQuery プラグインやその他のサードパーティプラグインなどのすべてのプラグインを含めるために使用できます。 </p> <p>ここでの 1 つのトリックは、jQuery プラグインを (function($){ ...})(jQuery) クロージャに入れて、jQuery 名前空間の下に安全に存在するようにすることです。詳細については、jQuery プラグイン開発ドキュメントを参照してください。 </p> <p>plugins.js ファイルは、ブラウザがコンソールを無効にすることによって発生するコンソールエラーを防ぐために、デフォルトで小さなコードを保存します。コンソールメソッドが使用できない場合、このコードは対応するメソッドの関数値が null であることを確認し、ブラウザーがエラーを報告するのを防ぎます。 </p> <p>vendor</p> <p>このディレクトリは、すべてのサードパーティライブラリを保存するために使用できます。 jQuery と Modernizr の最新の縮小バージョンは、デフォルトでここに保存されます。 </p> <p>拡張およびカスタマイズ</p> <p>HTML5 ボイラープレートテーマを最適化するための提案をいくつか示します。すべての機能が特定のニーズに適しているわけではないため、デフォルトではこれらの機能はインポートされません。 </p> <p>App Store</p> <p>Chrome プラグインをインストールします</p> <p>アプリが Google のネットワーク管理ツールを通じて Web サイトに接続している場合、ユーザーは Web サイトから Chrome アプリを直接インストールできます。詳細については、組み込みの Chrome ストア開発ドキュメントを参照してください。 </p> <p><link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID"><br>iOS 6 以降のスマートアプリ Safari バナー</p> <p>次のメタタグを引用して App Store にアクセスする複雑な方法をユーザーに紹介する必要はありません。ユーザーは iOS アプリをダウンロードしたり、それを使用したりするためのよりフレンドリーな方法を提供できます。 🎜> </p><meta name="apple-itunes-app" content="app-id=APP_ID,app-argument=SOME_TEXT"><p>DNS プリロード<br> </p>つまり、DNS プリロードこれは、クライアントが DNS を所有するホストを解決してこれらの Web サイトをキャッシュできるように、ブラウザに現在の Web サイトのドメイン名を通知する方法であり、再度必要になったときのリクエスト速度は同じになります。 🎜> <p>暗黙的なプリロード</p> <p>ブラウザは、HTML 内のリンクタグを検出すると、ユーザーに多くの情報を自動的にプリロードしますが、現在、ブラウザはドメイン名をリクエストしています。クライアントシステムは、IP アドレスに基づいてドメイン名を割り当てます。クライアントは最初にキャッシュを確認し、キャッシュに存在しない場合は、DNS サーバーからの要求を送信します。これらの要求はバックグラウンドで発生し、サーバーをブロックしません。 </p> <p>このようにして、外部コンテンツの読み込みをブロックすることなく、必要な外部 IP アドレスをクライアントキャッシュに事前に読み込むことができ、ページのレンダリングが高速化されます。モバイル側では遅延が大きいため、これは明らかです。 </p> <p>暗黙的なプリロードを無効にする</p> <p><meta http-equiv="x-dns-prefetch-control" コンテンツ。 off"></p>X-DNS-Prefetch-Control メタタグまたは HTTP ヘッダーが無効になっている場合でも、ブラウザはすべての明示的な DNS プリフェッチリンクをプリロードします。<p> <br>注: Web サイトが依存している場合は、 </p> <p>明示的なプリロード</p> <p>通常、ブラウザは必要に応じて HTML をスキャンする場合にのみ外部ドメイン名をプリロードします。現在の HTML の外部にあるリソース (たとえば、リモートサーバーから JavaScript をリクエストする必要がある場合、またはすべての Web ページ情報を保存する CDN が必要な場合) の場合は、プリロードする必要があるすべてのドメイン名をリストできます。 </p> <p><link rel="dns-prefetch" href="//example.com"><br><link rel="dns-prefetch" href="//ajax.googleapis.com"> <br>リクエストする必要がある外部ドメイン名が多数ある場合は、上記の方法を使用することをお勧めします。ブラウザができるだけ早くそれらをロードできるように、Meta Charset 要素の後にそれらを記述できれば素晴らしいと思います。 </p> <p>一般的なプリロードリンク</p> <p>Amazon S3:</p> <p><link rel="dns-prefetch" href="//s3.amazonaws.com"><br> Google API:</p> <p><link rel="dns-prefetch" href="//ajax.googleapis.com"><br>Microsoft Ajax Content Delivery Network:</p> <p>< rel="dns-prefetch" href="//ajax.microsoft.com"><br><link rel="dns-prefetch" href="//ajax.aspnetcdn.com"><br> の場合DNS プリロードの詳細については、次を参照してください: </p> <p>https://developer.mozilla.org/en-US/docs/Controlling_DNS_prefetching<br>https://dev.chromium.org/developers/design-documents /dns-prefetching<br>http://blogs.msdn.com/b/ie/archive/2011/03/17/internet-explorer-9-network-performance-improvements.aspx<br>http://dayofjs .com/videos/22158462/web-browsers_alex-russel<br>Google Universal Analytics</p> <p>その他のトラッキング設定</p> <p>内部的に最適化された HTML5 ボイラープレート Google Universal Analytics スニペット内容はおおよそ次のとおりです: </p> <p>ga('create', 'UA-XXXXX-X', 'auto'); ga('send', 'pageview');<br>さらに変更したい場合は、Google の高度な設定を参照してください。設定、ページビュー、イベント開発ドキュメント。 </p> <p>IP アドレスを隠す </p> <p>一部の国では、2 つの法域に同じ厳格な法律がない場合、ドイツからドイツへのような個人情報の相互転送が許可されません。 EU は外部に送信されます。したがって、ネットワーク管理者は、Google Universal Analytics を使用する場合、個人情報がドイツから米国に転送されないようにする必要があります。開発者は、イベント/ページビューを送信する前に ga('set', 'anonymizeIp', true); を設定できます。 </p> <p>ga('create', 'UA-XXXXX-X', 'auto');<br>ga('set', 'anonymizeIp', true);<br>ga('send', 'pageview');<br>jQuery AJAX リクエストの追跡</p> <p>Google Analytics で jQuery AJAX リクエストを追跡する方法に関する Jango Steve の記事を次に示します。 </p> <p>次のコードを plugins.js に追加します: </p> <p>/*</p> <ul> <li><p>すべての jQuery AJAX リクエストを Google Analytics に記録します </p></li> <li><p>参照: http://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/<br>*/</p></li> </ul> <p> if (typeof ga !== "unknown" && ga !== null) {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="scode">$(document).ajaxSend(function(event, xhr, settings){ ga('send', 'pageview', settings.url);});</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>}<br />JavaScript エラーの追跡</p> <p>ga を定義した後、次の関数を追加します。 </p> <p>(function(window){<br /> var unknown,</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="scode"> link = function (href) { var a = window.document.createElement('a'); a.href = href; return a; };</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>window.onerror = function (メッセージ, ファイル, 行, 列) {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="scode"> 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 });</pre><div class="contentsignin">ログイン後にコピー</div></div> <p> };<br />}(window));<br />ページのスクロールを追跡</p> <p>ga を定義した後、次の関数を追加します: </p> <p>$(function(){</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="scode">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' ); }});</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>});<br>Internet Explorer</p> <p>IE 10 では、ユーザーは「デスクトップモード」に切り替えるように求められます </p> <p>メトロモードでは、IE 10 はプラグインをサポートしていません-ins (フラッシュなど)。 Web サイトでプラグインの使用が必要な場合は、x-ua-comptible メタタグを使用して、デスクトップモードに切り替えるようにユーザーに通知できます。 </p> <p><meta http-equiv="x-ua-comptible" content="requiresActiveX=true"><br>以下は、HTML5 ボイラープレートの x-ua-comptible のデフォルト値です: </p> <p><meta http-equiv="x-ua-comptible" content="ie=edge,requiresActiveX=true"><br>詳細については、プラグインの使用を求めるプロンプトに関する Microsoft の IEBlog 投稿を参照してください。 IE10メトロモード。 </p> <p>IE 9 以降の固定サイト</p> <p>固定が有効な場合、IE 9 ユーザーはタスクバーまたはスタートメニューにアプリケーションを追加できます。この機能は、ユーザーが要素をカスタマイズしやすくするための一連のツールも提供します。詳細については、IE9 固定サイトに関するドキュメントを参照してください。 </p> <p>ピン留めされた Web サイトに名前を付けます </p> <p>このタグを使用しない場合、Windows はページタイトルをアプリケーションのタイトルとして使用します。 </p> <p><meta name="application-name" content="Sample Title"><br>固定サイトにヒントを追加する</p> <p>ご存知のとおり、これはヒントツールです。ユーザーがピン留めされた Web サイトのアイコンの上にマウスを置くと、プレビューウィンドウが表示されます。 </p> <p><meta name="msapplication-tooltip" content="このサイトの機能の説明。"><br>固定サイトのデフォルトページを設定する</p> <p>サイトが固定特定の URL (ホームページなど) を指定する必要がある場合は、ここで設定します。良いアイデアは、次のように、固定されたサイトに特別に記述された URL を送信させ、開発者がその固定されたサイトを使用したユーザーの数を追跡できるようにすることです。</p> <p><meta name="msapplication-starturl" content="http://www.example.com/index.html?pinned=true"><br>IE コントロールボタンの色をカスタマイズします</p> <p> IE 9 以降では、固定 Web サイトアイコンの色が自動的に使用され、対応する影の色がブラウザボタンに追加されます。開発者が他の色をカスタマイズしない限り、カスタムカラーはカラーキーワード (赤) と 16 進数の色 (#ff0000) のみを使用できます。 )。</p> <p><meta name="msapplication-navbutton-color" content="#ff0000"><br>カスタムウィンドウサイズ</p> <p>固定サイトが開いている場合特定のサイズの場合、ここでサイズをカスタマイズできます。この関数は静的なピクセルサイズのみをサポートしており、最小値は 800x600 です。 =600"></p>ジャンプリストの追加<p> <br>開発者は、固定 Web サイトにジャンプリストを追加できます。マウスを右クリックすると、ジャンプリストがすぐに表示されます。各リスト項目は、それぞれを指します。特定の URL であり、独自のアイコン (通常は 16x16 アイコン) </p> <p><meta name="msapplication-task" content="name=.Task 1;action-uri=http://host/Page1" .html;icon-uri=http://host/icon1.ico"></p><meta name="msapplication-task" content="name =タスク 2;action-uri=http://microsoft. com/Page2.html;icon-uri=http://host/icon2.ico"><p>(Windows 8) 高度な品質の視覚効果 <br>Windows 8 では、開発者が PNG タイルイメージとタイルの背景色をカスタマイズします。詳細については IE ブログをご覧ください。<br> </p>Web サイト用に 144x144 の解像度のアイコンを作成します。キャンバス全体を塗りつぶし、背景色を透明に変更します。 <p>画像を 32 ビット PNG 形式で保存し、品質を低下させることなく最適化します。次に、名前を Metro-tile.png などの任意の名前に変更します。 </p>IE ブログ投稿内の参照タイルとその色に HTML メタ要素を追加できます。 <p>Windows 8 固定 Web サイトの情報識別<br> <br>IE 10 は、Web サイトの XML ドキュメントをポーリングすることで主要な情報を識別し、最初の画面のアプリケーションアイコンに表示できます。これにより、ユーザーはアプリを開いていない場合でも更新情報を受け取ることができます。識別値は、数値または事前定義された記号のリストからの 1 つです。 <br> </p>バッジ XML スキーマへのリンクを含む IEBlog のチュートリアル<p>利用可能なバッジの値</p><meta name="msapplication-badge" value="frequency=NUMBER_IN_MINUTES;polling-uri=http://www .example.com/path/to/file.xml"><p>IE 10 でクリック時のリンクの強調表示を無効にする<br> <br>これは、iOS Safari の -webkit-tap-highlight とよく似ています。この CSS プロパティとの違いは、HTML メタタグを使用し、色の値ではなくブール値であることです。この関数を使用すると、すべての <meta name="msapplication-tap-highlight" content="が有効または無効になります。">その他のヘルプとヒントについては、WebKit 指向アプリの IE10 への適応に関する Microsoft のドキュメントを参照してください。</p> <p>検索 </p> <p>検索エンジンスパイダーのサイトマップを設定します。 <br> </p>サイトマップの作成方法をご覧ください <p> </p><link rel="sitemap" type="application/xml" title="Sitemap" href ="/sitemap.xml"><p>検索エンジンからのページをブロックする</p> <p>元 FLickr コミュニティマネージャーの Heather Champ 氏によると、十分な賢明な方であれば、検索エンジンに「連絡先」ページと「苦情」ページを取得させるべきではありません。 ><meta name="robots" content="noindex"></p>リマインダー: 検索エンジンに表示される情報は、Firefox および IE 検索プラグインのページには表示されません。<p> <br>検索機能では、パフォーマンスを向上させるためにブラウザ検索プラグインの使用を検討できます。「検索プラグイン」は基本的に、プラグインとブラウザの情報相互作用を定義する XML ファイルです。 </p> <p><link rel="search" title="" type="application/opensearchdescription+xml" href=""></p>その他のパラメータ<p></p> <p>ポリフィルを使用します。 <br>Microformats と microdata を使用して、検索結果の精度を最適化します。 <br>Web アプリを構築している場合は、iOS 5 以降でスクロールするときに -webkit-overflow-scrolling: touch 経由でネイティブスタイルを呼び出すことを検討してください。 <br>Chrome の翻訳プロンプトをブロックしたい場合、またはウェブページで Google 翻訳を無効にしたい場合は、<meta name="google" value="notranslate"> を使用できます。特定のセクションのみ翻訳を無効にしたい場合は、class="notranslate" を追加できます。 <br>iOS で Safari による携帯電話番号の自動検出とフォーマットを無効にしたい場合は、<meta name="format-detection" content="telephone=no"> を使用できます。 <br>X-Robots タグヘッダーの実装を使用すると、開発段階で Web サイトが検索エンジンによってクロールされるのを防ぐことができます。 <br>現在のスクリーンリーダーは HTML5 を十分にサポートしていません。アクセシビリティエクスペリエンスを強化するには、accessifyhtml5.js を使用して ARIA ロールを HTML5 要素に追加することをお勧めします。 <br>購読</p> <p>RSS</p> <p>RSS 購読が必要ですか?こちらのチュートリアルをご覧ください。 RSS フィードを最初から作成する方法を学びます。 </p> <p><link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"><br>Atom</p> <p>Atom とRSS は非常によく似ており、気に入っていただけるかもしれません。Atom のドキュメントを参照してください。 </p> <p><link rel="alternate" type="application/atom+xml" title="Atom" href="/atom.xml"><br>ピンバック</p> <p>その他の場合Web サイトがあなたの Web サイトにリンクすると、サーバーに通知される場合があります。 href 属性には、ピンバック上のサービスのアドレスが含まれている必要があります。 </p> <p><link rel="pingback" href=""><br>詳細情報</p> <p>概要説明<br>ステップバイステップのサンプルケース<br>PHP ピンバックサービス<br>ソーシャルネットワーク</p> <p>Facebook グラフ</p> <p>ユーザーが現在のサイトを共有する場合、開発者は Facebook またはその他のソーシャルネットワークに共有する情報コンテンツを設定できます。以下は、開発者が必要とする最も基本的な情報です。より具体的なコンテンツタイプについては、Facebook の組み込み Open Graph コンテンツテンプレートを参照してください。 Facebook でサポートされている高度な機能を使用したい場合は、Open Graph チュートリアルを参照してください。 </p> <p><meta property="og:title" content=""><br><meta property="og:description" content=""><br><meta property=" og:image" content=""><br>Twitter カード</p> <p>Twitter カードは Facebook グラフと同様の機能を提供します。実際、Twitter ではカードが利用できない場合にもグラフのような機能を使用しています。このアプローチでは、Twitter では開発者が各ベースドメインでカーディング機能をアクティブ化する必要があることに注意してください。詳しい形式とアプリケーションの処理については、Twitter Cards の公式ドキュメントを参照してください。 </p> <p><meta name="twitter:card" content="summary"><br><meta name="twitter:site" content="@site_account"><br><meta name="twitter:creator" content="@individual_account"><br><meta name="twitter:url" content="http://www.example.com/path/to/page.html"> ;<br /><meta name="twitter:title" content=""><br><meta name="twitter:description" content=""><br><meta name="twitter: image" content="http://www.example.com/path/to/image.jpg"><br>URL</p> <p>正規 URL</p> <p>URL にパラメータを追加することで#または ? をクリックするとページのステータスが表示され、ブラウザや他のユーザーにとって役立ちます。 http://www.example.com/cart.html?shopping-cart-open=true は、http://www.example.com/cart.html よりも正確にページを定義します。 </p> <p><link rel="canonical" href=""><br>公式ショートリンク</p> <p> 検索エンジンまたは Web サイトのユーザーに「これはこの Web サイトの短縮アドレスです」というプロンプトを表示します、この方法はサポートされなくなりました。詳細については、Microformats wiki のショートリンクに関する記事を参照してください。 </p> <p><link rel="shortlink" href="h5bp.com"><br>モバイルアドレスを分離する</p> <p>デスクトップとモバイルで別の URL を使用する場合は、次の点を考慮する必要があります。検索エンジンのアルゴリズムが Web サイトの構成情報をより適切に解析できるようにする方法。 </p> <p>HTML ページに次のコメントを追加すると役立ちます: </p> <p>デスクトップ Web ページの場合は、<link rel="alternate" media="only screen and (max-width: 640px)" href=" など、関連するモバイルアドレスを指す link rel="alternate" タグを追加します。 http://m.example.com/page.html> <br>モバイル Web ページの場合は、関連するデスクトップアドレスを指すように link rel="canonical" タグを追加します。 " href= "http://www.example.com/page.html">。 <br>詳細については、次を参照してください: </p> <p>https://developers.google.com/webmasters/smartphone-sites/details#specialurls<br>https://developers.google.com/webmasters /smartphone -sites/feature-phones<br>Web アプリ</p> <p>Web アプリが iOS のデスクトップに追加されるとき、次のタグを使用して情報を取得できます: </p> <p>Use apple- mobile-web-app -capable。Web アプリケーションの Chrome への依存を軽減し、IOS アプリの表示サポートを提供します。 apple-mobile-web-app-status-bar-style を使用して、デフォルトビューのカラーモードを制御できます。 </p> <p><meta name="apple-mobile-web-app-capable" content="yes"><br><meta name="apple-mobile-web-app-status-bar- style" content="black"><br>デスクトップアイコンの名前を変更するには、apple-mobile-web-app-title を使用します。この機能は iOS 6 以降でサポートされています。 </p> <p><meta name="apple-mobile-web-app-title" content=""><br>詳細については、Apple の公式ドキュメントを参照してください。 </p> <p>Apple Touch アイコン</p> <p>Apple Touch アイコンは、iOS デバイスのデスクトップアイコンと同等です。 Apple Touch アイコンの主なサイズは次のとおりです。 </p> <p>57×57px – @1x ディスプレイを備えた iPhone および iPod Touch <br>72×72px – iOS ≤ 676× 76px – iOS を実行している @1x ディスプレイを備えた iPad および iPad mini ≥ 7<br>114×114px – iOS を実行している @2x ディスプレイを備えた iPhone ≤ 6<br>120×120px – iOS を実行している @2x および @3x ディスプレイを備えた iPhone ≥ 7<br>144×144px – iOS を実行する @2x ディスプレイを備えた iPad および iPad mini ≤ 6<br>152×152px – iOS 7<br>180×180px – iPad および iPad mini を実行する @2x ディスプレイを備えた iPad および iPad mini iOS 8 を実行している @2x ディスプレイを使用<br>ディスプレイサイズの意味:<br> </p>@1x - 非 Retina<p>@2x - Retina<br>@3x - Retina HD<br>iOS デバイスに関する詳細なディスプレイ情報, iOSデバイスの表示一覧をご覧ください。 <br> </p>ほとんどの場合、apple-touch-icon.png という名前の 180 × 180 ピクセルサイズのアイコンをページの <head> に含めることができます: <p> </p><link rel="apple-touch-icon" href="apple-touch-icon.png"><p>各デバイスに異なるコンテンツを持たせたい場合は、複数の Apple Touch アイコンを追加できます。詳細については、タッチアイコンに関する記事を参照してください。 <br> </p>Apple Touch 起動イメージ<p> </p>さらに、iOS 上の Web アプリケーションに起動インターフェイスを追加できます。この機能を使用するには、apple-touch-startup-image を使用し、関連する画像リンクを添付する必要があります。 iOS は複数の画面サイズで動作するため、画像をロードする前にメディアルックアップを使用してサイズを検出する必要があります。これは Retina iPhone の例です: <p> </p><link rel="apple-touch-startup-image" media="(max-device-width: 480px) および (-webkit-min-device-)ピクセル比: 2)" href="img/startup-retina.png"><p>ただし、この機能では、起動インターフェイスの画像を検出するために JavaScript の使用が必要になる場合があります。 Mobile Boilerplate はこの問題を解決する有効な機能を提供します。実装方法については helpers.js を参照してください。 <br> </p>Chrome モバイルウェブアプリ<p> </p>Chrome モバイルには、デスクトップにウェブアプリをインストールするための独自のメタタグがあり、Apple の属性タグよりも汎用性が高くなります。 <p> </p><meta name="mobile-web-app-capable" content="yes"><p>タッチアイコンにも適用されます:<br> </p><link rel="icon" size="192x192" href="highres-icon.png"><p>その他<br> </p>.gitignore<p> </p>HTML5 ボイラープレートでは、基本的なプロジェクトレベルの .gitignore が導入されています。主に、ソースコードがプロジェクト内の特定のファイルやディレクトリの管理を無視するようにするために使用されます。異なる開発環境では異なる無視リストを使用すると便利です。 <p> </p>システム固有およびエディター固有のファイルは、「グローバル無視」を使用して、システム内のすべてのライブラリの関連ファイルへの依存関係を無視する必要があります。 <p> </p>たとえば、グローバルに無視したい HOME ディレクトリで、次の内容を .gitignore ファイルに追加します。 <p> </p>[core]<p> excludesfile = ~/.gitignore<br>詳細については、次を参照してください: <br> </p>グローバル無視の詳細: https://help.github.com/ articles/ignore-files<p>GitHub 上の無視の包括的なセット: https://github.com/github/gitignore<br>.editorconfig<br> </p>.editorconfig ファイルは、開発者/開発チームのモチベーションを高め、支援するために使用されます。、「異なるエディターや IDE で一貫したコーディングスタイルを定義して維持する」で説明します。 <p></p> <p>デフォルトでは、.editorconfig にはコードスタイルを反映するいくつかの基本プロパティが含まれていますが、開発者は必要に応じて関連するプロパティをカスタマイズできます。 </p> <p>エディターと IDE が .editorconfig 構成ファイルをより適切に使用するには、開発者はプラグインをインストールする必要があります。 </p> <p>注: HTML5 ボイラープレートによって提供されるサーバー構成を使用する必要がない場合は、サーバーで .editorconfig ファイルの使用を許可しないことを強くお勧めします。このファイルは機密情報をブロックするためです。 </p> <p>詳細については、EditorConfig プロジェクトを参照してください。 </p> <p>サーバー構成</p> <p>HTML5 ボイラープレートは、Apache HTTP サーバーの .htaccess ファイルで構成されます。 Apache サーバーを使用していない場合は、サーバー構成をダウンロードして、使用しているサーバーに適合させることをお勧めします。 </p> <p>サーバーとスタック</p> <p>WEB サーバーとスタックの紹介はこのドキュメントの範囲をはるかに超えていますが、一般的に使用される資料をいくつか示します: </p> <p>Apache HTTP サーバー<br>LAMP (Linux、Apache、MySQL、および PHP)。他のバリアントには、MAMP、WAMP、または XAMPP が含まれます。<br>LAPP は MySQL の代わりに PostgreSQL を使用します<br>Nginx<br>LEMP は LAMP スタックに似ていますが、Nginx を使用します<br> IIS<br>ASP.NET<br>MEAN (MongoDB、Express、AngularJS、Node.js)<br>.htaccess</p> <p>.htaccess (ハイパーテキストアクセス) ファイルは、Apache HTTP サーバー構成ファイルです。一般的に使用される: </p> <p>URL の書き換え<br>キャッシュの制御<br>認証<br>サーバー側のインクルード<br>リダイレクト<br>Gzipping<br>メインストリームサーバーの構成ファイルを使用した場合 (通常は httpd.conf で呼び出されます)、.htaccess ファイルへのロジックの追加についてはよく知っている必要があります。たとえば、このセクションはメイン構成ファイル内にあります。 .htaccess ファイルは Apache の速度を低下させる可能性があるため、通常はこれをお勧めします。 </p> <p>ローカルの Apache モジュールを有効にするには、ここを参照してください。 </p> <p>.htaccess は主に次の目的で使用されます: </p> <p>Web フォントのクロスオリジンリクエストを許可します <br>ブラウザが画像をリクエストするとき、クロスオリジンリソース共有ヘッダー <br> を使用して 404 を処理します.html を 404 エラーとして表示するドキュメント<br>IE ユーザーのユーザーエクスペリエンスを向上させる<br>text/html および text/plain の文字エンコーディングとして UTF-8 を使用する<br>URL 書き換えエンジンを有効にする<br>www を強制または削除するURL の先頭。<br>デフォルトのドキュメントが見つからない場合、ディレクトリへの呼び出しをブロックします<br>ファイルアクセスを分離して機密情報の漏洩を防ぎます<br>MIME タイプのセキュリティリスクを軽減します<br>強制圧縮<br>通知ブラウザーサーバーからリクエストする必要があるかどうか特定のファイル、またはブラウザーのキャッシュから特定のファイルをフェッチする必要があるかどうか <br> .htaccess を使用する場合、すべての内部コメントを一度読むことをお勧めします。これらの一部はオプションです。 </p> <p>.htaccess ファイルの詳細については、ここを参照してください。 </p> <p>.htaccess のソースライブラリはここにあることに注意してください。 </p> <p>crossdomain.xml</p> <p>クロスドメインポリシーファイルは、Web クライアント (Adobe Flash Player、Adobe Reader など) からコンテンツが取得される XML ドキュメントです。これにより、Web クライアントからのデータの処理が可能になります。複数のドメイン名:</p> <p>データの読み取りを許可<br>クライアントがクロスドメインリクエストでカスタムヘッダー情報をインポートできるようにします<br>基本的なソケット接続が許可されています<br>注: クライアントが特定のソースからの場合ドメイン名がコンテンツを取得すると、コンテンツ要求が他のドメイン名にリダイレクトされます。その後、リモートドメイン名はクロスドメインポリシーファイルを使用してソースドメイン名から承認を取得し、最終的にクライアントが関連トランザクションの処理を続行できるようにする必要があります。。 </p> <p>詳細については、クロスドメインポリシーファイルの仕様を参照してください。 </p> <p>robots.txt</p> <p>robots.txt ファイルは、Web サイト内のクロール可能なページについて検索エンジンに通知するために使用されます。 </p> <p>デフォルトでは、ファイルには次の 2 行の情報が含まれています: </p> <p>ユーザーエージェント: * - 次のルールはすべての検索エンジンに適用されます <br>禁止: - Web サイト内のすべてのページクロール可能 <br> 特定のページをブロックする場合は、Disallow パラメーターの後に特定のステートメントを作成する必要があります (例: Disallow: /path)。すべてをブロックしたい場合は、「Disallow: /」だけを指定します。 </p> <p>/robots.txt はアクセス制御には使用されないため、このように使用しないでください。施錠されたドアではなく、「通行禁止」の標識と考えてください。 robots.txt ファイルを介してブロックされている URL は、クロールされていない場合でも検出される可能性があり、robots.txt ファイル内のコンテンツには誰でもアクセスできるため、プライベートコンテンツの場所が間接的に明らかになります。したがって、個人情報へのアクセスをブロックしたい場合は、合理的な検証メカニズムを使用することをお勧めします。 </p> <p>/robots.txt ファイルの詳細については、次を参照してください: </p> <p>robotstxt.org<br>Google による robots.txt ファイルの処理方法<br>browserconfig.xml</p> <p>Windows 8.1 起動インターフェイスでユーザーが固定したアプリケーションアイコンは、browserconfig.xml ファイルを通じてカスタマイズできます。このファイルでは、タイルの色、画像、さらには動的タイルをカスタマイズできます。 </p> <p>デフォルトでは、このファイルは 2 つの既存のタイル画像を指します: </p> <p>tile.png (558x558px): 小、中、大のタイルに使用されます。この画像は必要に応じて使用できます。サイズは自動的に変更されます。。 <br>tile-wide.png (558x270px): ワイドタイルのユーザー。<br>Web サイトをブックマークする場合、IE 11 はブックマーク内で同じ画像を使用することに注意してください。 </p> <p>browserconfig.xml ファイルの詳細については、MSDN を参照してください。 </p> <p>よくある質問</p> <p>jQuery のリンクに http が追加されないのはなぜですか? </p> <p>これは、プロトコル相対 URL の使用が原因です。 </p> <p>注: ブラウザーでローカル Web ページを直接プレビューしようとすると、ブラウザーは関連するリソースを取得しようとするため、特にプロトコル相対 URL を使用してリソースを読み込むことができません。ローカルファイルシステム。 Web ページをテストするには、Web ページのオンラインプレビューを可能にするローカル HTTP サーバーまたはファイルホスティングサービス (Dropbox など) を使用することをお勧めします。 </p> <p>ローカル HTTP サーバーのセットアップには、さまざまな短いコマンドを使用できます。 </p> <p>PHP 5.4.0 以降では、php -S localhost:8080 コマンドを使用して、ローカルディレクトリから起動および実行します。。 <br>Python 2.x は、python -m SimpleHTTPServer コマンドを使用してローカルディレクトリから起動および実行します。 <br>Python 3.x は、python -m http.server コマンドを使用してローカルディレクトリから起動および実行します。 <br>Ruby 1.9.2 以降では、ruby -run -ehttpd . -p8080 コマンドを使用してローカルディレクトリから起動および実行します。 <br>Node.js は、static -p 8080 または http-server -p 8080 コマンドを使用してサーバーをインストールし、起動します。 <br>最新バージョンの jQuery を Google CDN から自動的にロードしてみませんか? </p> <p>まず、Google CDN が指す jQuery ファイルは更新されなくなり、新しいバージョンの変更によって Web スクリプトが無効になるのを防ぐために、バージョン 1.11.1 でロックされます。 </p> <p>次に、一般的に、バージョンの更新は慎重に決定する必要があります。 Web ページが常に最新バージョンを参照する必要がない理由は次のとおりです。 </p> <p> 既存のプラグインやコードと互換性がない可能性がある <br> 特定のバージョンへの固定参照と比較して、常に最新バージョンを引用すると、ローカルキャッシュ時間が短縮されます。これは、ユーザーが長期キャッシュの利便性を享受できないことを意味します。 <br>Google Analytics コードがページの下部に配置されているのはなぜですか? Google では、<head> に配置することを推奨しています。 </p> <p><head> に配置する主な利点は、ページの読み込みが完了する前にユーザーが現在の Web ページから離れた場合でも、ページビュー (PV) を取得できることです。ただし、ページの下部に配置すると、全体的なパフォーマンスが向上する可能性があります。 </p> <p>HTML5 ボイラープレートにブートストラップを統合する方法。 </p> <p>簡単な方法は、Initializr を使用して、HTML5 ボイラープレートとブートストラップの両方を含むカスタムビルド環境を作成することです。 </p> <p>詳細については、記事「HTML5 ボイラープレートとブートストラップの統合」を参照してください。 </p> <p>HTML5 ボイラープレートの新しいバージョンがリリースされるたびに、開発者は Web サイトを更新する必要がありますか? </p> <p>絶対に必要ありません!家を建てた後、時々修繕は必要ですが、通常は基礎を敷き直す必要がないのと似ています。もちろん、新しいバージョンで変更を試したい場合は、それは十分に可能ですが、そうすることによるコストと利点を正しく比較検討することが最善です。 </p> <p>テクニカルサポートはどこで受けられますか? </p> <p>ヘルプが必要な場合は StackOverflow を使用してください。 </p> <p>この記事は HTML5 ボイラープレートの公式ドキュメントに基づいて翻訳されており、翻訳全体に私たちの独自の理解と考えが含まれています。翻訳が適切でない場合、または何か間違っている場合は、業界の友人にアドバイスを求めてください。この翻訳を転載したい場合は、英語のソースを明記してください: https://github.com/h5bp/html5-boilerplate/blob/master/src/doc/html.md。 </p> </div> </div> <div style="height: 25px;"> <div class="wzconBq" style="display: inline-flex;"> <span>関連ラベル：</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="//m.sbmmt.com/ja/search?word=装载html5boilerplate50中文文档" target="_blank">装载HTML 5 Boilerplate 5.0 中文文档</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;">ソース：php.cn</div> </div> <div class="wzconOtherwz"> <a href="//m.sbmmt.com/ja/faq/238163.html" title="ブートストラップ学習ノートブートストラップcomponent_html/css_WEB-ITnose"> <span>前の記事：ブートストラップ学習ノートブートストラップcomponent_html/css_WEB-ITnose</span> </a> <a href="//m.sbmmt.com/ja/faq/238171.html" title="CSS フレックスボックスのサンプルコード_html/css_WEB-ITnose"> <span>次の記事：CSS フレックスボックスのサンプルコード_html/css_WEB-ITnose</span> </a> </div> <div class="wzconShengming"> <div class="bzsmdiv">このウェブサイトの声明</div> <div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="wzconZzwz"> <div class="wzconZzwztitle">著者別の最新記事</div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/1796639331.html">NullPointerException とは何ですか?どのように修正すればよいですか?</a> </div> <div>2024-10-22 09:46:29</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/1796629482.html">初心者からプログラマーへ: 旅は C の基礎から始まります</a> </div> <div>2024-10-13 13:53:41</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/1796628545.html">PHP による Web 開発のロックを解除する: 初心者ガイド</a> </div> <div>2024-10-12 12:15:51</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/1796627928.html">C の謎を解く: 新人プログラマーのための明確でシンプルな道</a> </div> <div>2024-10-11 22:47:31</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/1796627806.html">コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング</a> </div> <div>2024-10-11 19:36:51</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/1796627670.html">内なるプログラマーを解き放つ: まったくの初心者のための C</a> </div> <div>2024-10-11 15:50:41</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/1796627643.html">C で生活を自動化する: 初心者向けのスクリプトとツール</a> </div> <div>2024-10-11 15:07:41</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/1796627620.html">PHP を簡単に: Web 開発の最初のステップ</a> </div> <div>2024-10-11 14:21:21</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/1796627574.html">Python で何でも構築: 創造性を解き放つための初心者ガイド</a> </div> <div>2024-10-11 12:59:11</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/1796627539.html">コーディングの鍵: 初心者のための Python の力を解き放つ</a> </div> <div>2024-10-11 12:17:31</div> </li> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">最新の問題</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/ja/wenda/176411.html" target="_blank" title="function_exists() はカスタム関数を決定できません" class="wdcdcTitle">function_exists() はカスタム関数を決定できません</a> <a href="//m.sbmmt.com/ja/wenda/176411.html" class="wdcdcCons">Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> から 2024-04-29 11:01:01</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>3</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>2240</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/ja/wenda/176410.html" target="_blank" title="Google Chromeのモバイル版を表示する方法" class="wdcdcTitle">Google Chromeのモバイル版を表示する方法</a> <a href="//m.sbmmt.com/ja/wenda/176410.html" class="wdcdcCons">こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> から 2024-04-23 00:22:19</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>11</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>2380</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/ja/wenda/176407.html" target="_blank" title="子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。" class="wdcdcTitle">子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。</a> <a href="//m.sbmmt.com/ja/wenda/176407.html" class="wdcdcCons">最初の 2 つの文は実行可能ですが、最後の文は実装できません。</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> から 2024-04-19 15:37:47</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>1989</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/ja/wenda/176406.html" target="_blank" title="親ウィンドウには出力がありません" class="wdcdcTitle">親ウィンドウには出力がありません</a> <a href="//m.sbmmt.com/ja/wenda/176406.html" class="wdcdcCons">document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> から 2024-04-18 23:52:34</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>1877</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/ja/wenda/176405.html" target="_blank" title="CSS マインドマッピングに関するコースウェアはどこにありますか?" class="wdcdcTitle">CSS マインドマッピングに関するコースウェアはどこにありますか?</a> <a href="//m.sbmmt.com/ja/wenda/176405.html" class="wdcdcCons">コースウェア</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> から 2024-04-16 10:10:18</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>0</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>1947</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>関連トピック</div> <a href="//m.sbmmt.com/ja/faq/zt" target="_blank">詳細> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/ja/faq/gnbtbrhmm"><img src="https://img.php.cn/upload/subject/202407/22/2024072212211382081.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="中国でビットコインを売買する方法" /> </a> <a target="_blank" href="//m.sbmmt.com/ja/faq/gnbtbrhmm" class="title-a-spanl" title="中国でビットコインを売買する方法"><span>中国でビットコインを売買する方法</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/ja/faq/linuxgshypdff"><img src="https://img.php.cn/upload/subject/202407/22/2024072213282690793.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Linuxでハードドライブをフォーマットする方法" /> </a> <a target="_blank" href="//m.sbmmt.com/ja/faq/linuxgshypdff" class="title-a-spanl" title="Linuxでハードドライブをフォーマットする方法"><span>Linuxでハードドライブをフォーマットする方法</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/ja/faq/linuxzmjrroot"><img src="https://img.php.cn/upload/subject/202407/22/2024072213535757945.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Linuxでroot権限を入力する方法" /> </a> <a target="_blank" href="//m.sbmmt.com/ja/faq/linuxzmjrroot" class="title-a-spanl" title="Linuxでroot権限を入力する方法"><span>Linuxでroot権限を入力する方法</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/ja/faq/qcfddfsynx"><img src="https://img.php.cn/upload/subject/202407/22/2024072213300017514.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="フロートをクリアするにはどのような方法がありますか?" /> </a> <a target="_blank" href="//m.sbmmt.com/ja/faq/qcfddfsynx" class="title-a-spanl" title="フロートをクリアするにはどのような方法がありますか?"><span>フロートをクリアするにはどのような方法がありますか?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/ja/faq/rediszmzhcfwq"><img src="https://img.php.cn/upload/subject/202407/22/2024072212140227147.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Redisをキャッシュサーバーとして使用する方法" /> </a> <a target="_blank" href="//m.sbmmt.com/ja/faq/rediszmzhcfwq" class="title-a-spanl" title="Redisをキャッシュサーバーとして使用する方法"><span>Redisをキャッシュサーバーとして使用する方法</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/ja/faq/rhjjjavadwjdq"><img src="https://img.php.cn/upload/subject/202407/22/2024072213260767203.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Java ラージファイル読み取り例外を解決する方法" /> </a> <a target="_blank" href="//m.sbmmt.com/ja/faq/rhjjjavadwjdq" class="title-a-spanl" title="Java ラージファイル読み取り例外を解決する方法"><span>Java ラージファイル読み取り例外を解決する方法</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/ja/faq/okxssm"><img src="https://img.php.cn/upload/subject/202407/22/2024072212274276379.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="大丈夫ですか？" /> </a> <a target="_blank" href="//m.sbmmt.com/ja/faq/okxssm" class="title-a-spanl" title="大丈夫ですか？"><span>大丈夫ですか？</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/ja/faq/dymyhkdsmys"><img src="https://img.php.cn/upload/subject/202407/22/2024072212084448934.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Douyin の親しい友人にはどのような個人情報が表示されるのでしょうか?" /> </a> <a target="_blank" href="//m.sbmmt.com/ja/faq/dymyhkdsmys" class="title-a-spanl" title="Douyin の親しい友人にはどのような個人情報が表示されるのでしょうか?"><span>Douyin の親しい友人にはどのような個人情報が表示されるのでしょうか?</span> </a> </li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="wzrOne"> <div class="wzroTitle">人気のおすすめ</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="URLってどういう意味ですか？" href="//m.sbmmt.com/ja/faq/418772.html">URLってどういう意味ですか？</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="DOM とはどういう意味ですか?" href="//m.sbmmt.com/ja/faq/414303.html">DOM とはどういう意味ですか?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="画像サイズを変更する方法" href="//m.sbmmt.com/ja/faq/414252.html">画像サイズを変更する方法</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="HTMLでフォントを太字にする方法" href="//m.sbmmt.com/ja/faq/414520.html">HTMLでフォントを太字にする方法</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="HTML画像のサイズを設定する方法" href="//m.sbmmt.com/ja/faq/475145.html">HTML画像のサイズを設定する方法</a> </div> </li> </ul> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="wzrThree"> <div class="wzrthree-title"> <div>人気のチュートリアル</div> <a target="_blank" href="//m.sbmmt.com/ja/course.html">詳細> </a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one">関連するチュートリアル <div></div></div> <div class="tabdiv swiper-slide" data-id="two">人気のおすすめ<div></div></div> <div class="tabdiv swiper-slide" data-id="three">最新のコース<div></div></div> </div> <ul class="one"> <li> <a target="_blank" href="//m.sbmmt.com/ja/course/812.html" title="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)" href="//m.sbmmt.com/ja/course/812.html">最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)</a> <div class="wzrthreerb"> <div>1423353 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/ja/course/74.html" title="PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ" href="//m.sbmmt.com/ja/course/74.html">PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ</a> <div class="wzrthreerb"> <div>4268879 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="74"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/ja/course/286.html" title="JAVA 初心者向けビデオチュートリアル" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 初心者向けビデオチュートリアル"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA 初心者向けビデオチュートリアル" href="//m.sbmmt.com/ja/course/286.html">JAVA 初心者向けビデオチュートリアル</a> <div class="wzrthreerb"> <div>2536890 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/ja/course/504.html" title="Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル" href="//m.sbmmt.com/ja/course/504.html">Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル</a> <div class="wzrthreerb"> <div>507500 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/ja/course/2.html" title="PHP ゼロベースの入門チュートリアル" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="PHP ゼロベースの入門チュートリアル"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP ゼロベースの入門チュートリアル" href="//m.sbmmt.com/ja/course/2.html">PHP ゼロベースの入門チュートリアル</a> <div class="wzrthreerb"> <div>862837 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="2"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="//m.sbmmt.com/ja/course/812.html" title="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)" href="//m.sbmmt.com/ja/course/812.html">最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)</a> <div class="wzrthreerb"> <div >1423353 回の学習</div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/ja/course/286.html" title="JAVA 初心者向けビデオチュートリアル" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 初心者向けビデオチュートリアル"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA 初心者向けビデオチュートリアル" href="//m.sbmmt.com/ja/course/286.html">JAVA 初心者向けビデオチュートリアル</a> <div class="wzrthreerb"> <div >2536890 回の学習</div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/ja/course/504.html" title="Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル" href="//m.sbmmt.com/ja/course/504.html">Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル</a> <div class="wzrthreerb"> <div >507500 回の学習</div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/ja/course/901.html" title="Web フロントエンド開発の簡単な紹介" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Web フロントエンド開発の簡単な紹介"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Web フロントエンド開発の簡単な紹介" href="//m.sbmmt.com/ja/course/901.html">Web フロントエンド開発の簡単な紹介</a> <div class="wzrthreerb"> <div >215877 回の学習</div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/ja/course/234.html" title="PSビデオチュートリアルをゼロからマスターする" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="PSビデオチュートリアルをゼロからマスターする"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PSビデオチュートリアルをゼロからマスターする" href="//m.sbmmt.com/ja/course/234.html">PSビデオチュートリアルをゼロからマスターする</a> <div class="wzrthreerb"> <div >890482 回の学習</div> <div class="courseICollection" data-id="234"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="three" style="display: none;"> <li> <a target="_blank" href="//m.sbmmt.com/ja/course/1648.html" title="[Web フロントエンド] Node.js クイックスタート" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web フロントエンド] Node.js クイックスタート"/> </a> <div class="wzrthree-right"> <a target="_blank" title="[Web フロントエンド] Node.js クイックスタート" href="//m.sbmmt.com/ja/course/1648.html">[Web フロントエンド] Node.js クイックスタート</a> <div class="wzrthreerb"> <div >7476 回の学習</div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/ja/course/1647.html" title="海外のWeb開発フルスタックコースの完全なコレクション" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="海外のWeb開発フルスタックコースの完全なコレクション"/> </a> <div class="wzrthree-right"> <a target="_blank" title="海外のWeb開発フルスタックコースの完全なコレクション" href="//m.sbmmt.com/ja/course/1647.html">海外のWeb開発フルスタックコースの完全なコレクション</a> <div class="wzrthreerb"> <div >5978 回の学習</div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/ja/course/1646.html" title="Go言語実践GraphQL" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go言語実践GraphQL"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Go言語実践GraphQL" href="//m.sbmmt.com/ja/course/1646.html">Go言語実践GraphQL</a> <div class="wzrthreerb"> <div >4941 回の学習</div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/ja/course/1645.html" title="550W ファンマスターが JavaScript をゼロから段階的に学習します" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W ファンマスターが JavaScript をゼロから段階的に学習します"/> </a> <div class="wzrthree-right"> <a target="_blank" title="550W ファンマスターが JavaScript をゼロから段階的に学習します" href="//m.sbmmt.com/ja/course/1645.html">550W ファンマスターが JavaScript をゼロから段階的に学習します</a> <div class="wzrthreerb"> <div >698 回の学習</div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/ja/course/1644.html" title="Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる" href="//m.sbmmt.com/ja/course/1644.html">Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる</a> <div class="wzrthreerb"> <div >24753 回の学習</div> <div class="courseICollection" data-id="1644"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper2', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrthreeTab>div').click(function(e){ $('.wzrthreeTab>div').removeClass('check') $(this).addClass('check') $('.wzrthreelist>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div>最新のダウンロード</div> <a href="//m.sbmmt.com/ja/xiazai">詳細> </a> </div> <script> $(document).ready(function(){ var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{ speed:1000, autoplay:{ delay:3500, disableOnInteraction: false, }, pagination:{ el:'.sjyx_banSwiperwz .swiper-pagination', clickable :false, }, loop:true }) }) </script> <div class="wzrfourList swiper3"> <div class="wzrfourlTab swiper-wrapper"> <div class="check swiper-slide" data-id="onef">ウェブエフェクト <div></div></div> <div class="swiper-slide" data-id="twof">公式サイト<div></div></div> <div class="swiper-slide" data-id="threef">サイト素材<div></div></div> <div class="swiper-slide" data-id="fourf">フロントエンドテンプレート<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery エンタープライズメッセージフォームの連絡先コード" href="//m.sbmmt.com/ja/toolset/js-special-effects/8071">[フォームボタン] jQuery エンタープライズメッセージフォームの連絡先コード</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 MP3 オルゴール再生効果" href="//m.sbmmt.com/ja/toolset/js-special-effects/8070">[プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 クールなパーティクルアニメーションナビゲーションメニューの特殊効果" href="//m.sbmmt.com/ja/toolset/js-special-effects/8069">[メニューナビゲーション] HTML5 クールなパーティクルアニメーションナビゲーションメニューの特殊効果</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery ビジュアルフォームのドラッグアンドドロップ編集コード" href="//m.sbmmt.com/ja/toolset/js-special-effects/8068">[フォームボタン] jQuery ビジュアルフォームのドラッグアンドドロップ編集コード</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="VUE.JS 模倣 Kugou 音楽プレーヤーコード" href="//m.sbmmt.com/ja/toolset/js-special-effects/8067">[プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤーコード</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="古典的な HTML5 プッシュボックスゲーム" href="//m.sbmmt.com/ja/toolset/js-special-effects/8066">[html5特殊効果] 古典的な HTML5 プッシュボックスゲーム</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="画像効果を追加または削減するための jQuery スクロール" href="//m.sbmmt.com/ja/toolset/js-special-effects/8065">[画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="CSS3 個人アルバムカバーホバーズーム効果" href="//m.sbmmt.com/ja/toolset/js-special-effects/8064">[フォトアルバム効果] CSS3 個人アルバムカバーホバーズーム効果</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/toolset/website-source-code/8328" title="室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート" target="_blank">[フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/toolset/website-source-code/8327" title="フレッシュカラーの個人履歴書ガイドページテンプレート" target="_blank">[フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/toolset/website-source-code/8326" title="デザイナーのクリエイティブな仕事の履歴書 Web テンプレート" target="_blank">[フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/toolset/website-source-code/8325" title="現代のエンジニアリング建設会社のウェブサイトのテンプレート" target="_blank">[フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/toolset/website-source-code/8324" title="教育サービス機関向けのレスポンシブ HTML5 テンプレート" target="_blank">[フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/toolset/website-source-code/8323" title="オンライン電子書籍ストアモールのウェブサイトテンプレート" target="_blank">[フロントエンドテンプレート] オンライン電子書籍ストアモールのウェブサイトテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/toolset/website-source-code/8322" title="IT テクノロジーがインターネット企業の Web サイトテンプレートを解決します" target="_blank">[フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイトテンプレートを解決します</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/toolset/website-source-code/8321" title="パープルスタイル外国為替取引サービスウェブサイトテンプレート" target="_blank">[フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/toolset/website-materials/3078" target="_blank" title="かわいい夏の要素のベクター素材 (EPS+PNG)">[PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/toolset/website-materials/3077" target="_blank" title="4 つの赤い 2023 卒業バッジベクター素材 (AI+EPS+PNG)">[PNG素材] 4 つの赤い 2023 卒業バッジベクター素材 (AI+EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/toolset/website-materials/3076" target="_blank" title="歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）">[バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/toolset/website-materials/3075" target="_blank" title="金色の卒業帽ベクター素材（EPS+PNG）">[PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/toolset/website-materials/3074" target="_blank" title="黒と白のスタイルの山アイコンベクター素材 (EPS+PNG)">[PNG素材] 黒と白のスタイルの山アイコンベクター素材 (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/toolset/website-materials/3073" target="_blank" title="異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）">[PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/toolset/website-materials/3072" target="_blank" title="フラットスタイルの植樹祭バナーベクター素材 (AI+EPS)">[バナー画像] フラットスタイルの植樹祭バナーベクター素材 (AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/toolset/website-materials/3071" target="_blank" title="9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）">[PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）</a> </div> </li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/toolset/website-source-code/8328" target="_blank" title="室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート">[フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/toolset/website-source-code/8327" target="_blank" title="フレッシュカラーの個人履歴書ガイドページテンプレート">[フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/toolset/website-source-code/8326" target="_blank" title="デザイナーのクリエイティブな仕事の履歴書 Web テンプレート">[フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/toolset/website-source-code/8325" target="_blank" title="現代のエンジニアリング建設会社のウェブサイトのテンプレート">[フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/toolset/website-source-code/8324" target="_blank" title="教育サービス機関向けのレスポンシブ HTML5 テンプレート">[フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/toolset/website-source-code/8323" target="_blank" title="オンライン電子書籍ストアモールのウェブサイトテンプレート">[フロントエンドテンプレート] オンライン電子書籍ストアモールのウェブサイトテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/toolset/website-source-code/8322" target="_blank" title="IT テクノロジーがインターネット企業の Web サイトテンプレートを解決します">[フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイトテンプレートを解決します</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/toolset/website-source-code/8321" target="_blank" title="パープルスタイル外国為替取引サービスウェブサイトテンプレート">[フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート</a> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper3', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrfourlTab>div').click(function(e){ $('.wzrfourlTab>div').removeClass('check') $(this).addClass('check') $('.wzrfourList>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> </div> </div> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p> </div> <div class="footermid"> <a href="//m.sbmmt.com/ja/about/us.html">私たちについて</a> <a href="//m.sbmmt.com/ja/about/disclaimer.html">免責事項</a> <a href="//m.sbmmt.com/ja/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1734627061"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script>  <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script>  </body> </html>

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