検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >HTML5テンプレート：プロジェクト用のベーススターターHTMLボイラープレート

HTML5テンプレート：プロジェクト用のベーススターターHTMLボイラープレート

Joseph Gordon-Levitt
Joseph Gordon-Levittオリジナル
2025-02-08 08:50:08522ブラウズ

独自のHTML5テンプレートを構築する：簡潔なガイド

HTML5 Template: A Base Starter HTML Boilerplate for Any Project

この記事では、独自のHTML5テンプレートを作成する方法について説明します。 HTML Basicテンプレートの重要な要素を説明し、最後に使用してさらに構築できるシンプルなテンプレートを提供します。

この記事を読んだ後、独自のHTML5テンプレートがあります。今すぐHTMLテンプレートコードを取得したい場合は、この記事を後でお読みください。最後のHTML5テンプレートを次に示します。

キーポイント

    HTML5テンプレートは、再利用可能なテンプレートとして、必要なHTML要素を含む、各プロジェクトの開始時に繰り返しコード作成を避けるのに役立ちます。
    • 基本的なHTML5テンプレートには、ドキュメントタイプ宣言、言語属性を備えた要素、
  • を介した文字エンコード、およびレスポンシブデザインのビューポート設定を含める必要があります。 通常、<meta charset="utf-8">html5テンプレート
    • セクションの重要な要素には、通常、SEOのメタデータ、CSSスタイルシートへのリンク、およびオプションのJavaScriptファイルが含まれています。
  • ソーシャルメディアの最適化の場合、オープングラフメタタグを追加すると、ソーシャルプラットフォームで共有されたときにコンテンツの表示効果が強化されます。
  • テンプレートにFaviconとAppleのタッチアイコンを含めると、ブランドアイデンティティを構築し、デバイス全体でユーザーエクスペリエンスを向上させるのに役立ちます。
  • 閉じた前にjavaScriptファイルを置く
    • タグは、ロードスクリプトを遅らせることでブラウザがページをより速くレンダリングできるため、ページの読み込み速度を改善できます。
HTMLテンプレートとは何ですか？

各Webサイトは異なりますが、Webサイトから別のWebサイトまで、多くのことが基本的に同じです。同じコードを何度も書き込む代わりに、独自の「テンプレート」を作成します。テンプレートは、プロジェクトを開始するたびに使用するテンプレートであり、ゼロから始めることを妨げることができます。

ウィキペディアはテンプレートを次のように説明しています

コードスニペットは、複数の場所で繰り返し表示され、変更はほとんどありません。

HTML5を学習し、ツールボックスに新しいテクノロジーを追加すると、将来のすべてのプロジェクトを開始するためにHTMLテンプレートを構築することができます。それは間違いなくやる価値があり、あなたがあなた自身のHTML5テンプレートを構築するのに役立つオンラインでたくさんの出発点があります。

html5テンプレートの非常に簡単な例

この記事の最後に提供される完全なテンプレートには、多くのコンテンツが含まれています。しかし、あなたはそれをそのようにする必要はありません - 特にあなたがちょうど学び始めたとき。これは非常にシンプルな「初心者」のHTML5テンプレートです。これはおそらく必要な唯一のものです。 上記のコードを.htmlファイルに貼り付けると、Webページがあります！この基本的なHTML5テンプレートには、次のセクションにリストされている要素の一部と、Webブラウザーに表示されるシンプルなタイトル要素が含まれています。

その構造を詳しく見てみましょう。 

<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">


  <h1>Page Title</h1>
  

</code>

html5テンプレートの構造

HTMLテンプレートには通常、次の部分が含まれています
  1. ドキュメントタイプ宣言（またはdoctype）
  2. 要素
  3. 文字エンコード
  4. ビューポート要素
  5. <title></title>、説明と著者
    6. ソーシャルカードのグラフ要素を開く
    7. ファビコンとタッチアイコン
    8. css styleSheet link
    9. javaScriptファイルリンク
ドキュメントタイプの宣言と

要素に加えて、上記の要素のほとんどは、HTMLテンプレートのセクションにあります。

html5ドキュメントタイプステートメント

HTML5テンプレートは、ドキュメントタイプの宣言または

doctypeから始める必要があります。 Doctypeは、ブラウザまたは他のパーサーにどのような種類のドキュメントを探しているかを伝える1つの方法にすぎません。 HTMLファイルの場合、これはHTMLの特定のバージョンとタイプを意味します。 Doctypeは、常にHTMLファイルの上部にある最初のアイテムである必要があります。何年も前に、Doctype宣言はugい混乱を覚えにくいことはありませんでした。通常は「XHTML Strict」または「HTML Transitional」と指定されていました。

html5の出現により、それらの理解できない迷惑なものは消えました、そして今あなたはこれだけが必要です：

<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">


  <h1>Page Title</h1>
  

</code>
シンプルで明確です。 「5」は声明からはっきりと消えました。 Webタグの現在のバージョンは「HTML5」と呼ばれますが、実際には以前のHTML標準の進化にすぎません。将来の仕様は、今日の開発にすぎません。 「HTML6」は決してないので、現在の状態のWebタグは通常、単に「HTML」と呼ばれます。

ブラウザはWeb上の古いコンテンツをサポートする必要があるため、Doctypeに依存して、特定のドキュメントでサポートする機能をブラウザに伝えることはありません。言い換えれば、Doctypeは最新のHTML機能にページに準拠していません。実際、使用されているDoctypeに関係なく、ブラウザはケースごとに機能サポートケースを決定します。実際、ページに新しいHTML5要素を使用して古いDoctypeを使用でき、ページは新しいDoctypeを使用するときと同じようにレンダリングできます。

要素

要素は、HTMLファイルの上位レベル要素です。つまり、ドキュメント内のDoctype以外のすべてが含まれています。 要素は、およびパーツの2つの部分に分割されます。 Webページファイル内の他のすべてのコンテンツは、要素内または内部に配置されます。次のコードには、Doctype宣言の後に配置され、および要素が含まれている要素が表示されます。

html 
<code class="language-html"><!DOCTYPE html></code>

でタグを使用する方法 セクションには、文書に関する重要な情報が含まれています。これは、文字エンコードやCSSファイルへのリンク、場合によってはJavaScriptファイルなど、エンドユーザーに表示されません。この情報は、ブラウザ、検索エンジン、スクリーンリーダーなどのマシンで使用されます。

上記の

…タグの間に含まれるすべての要素は重要ですが、エンドユーザーはそれを見ません -

テキストを除いて、オンライン検索とブラウザのタグに表示されます。 
<code class="language-html">
  
  
  
  
</code>

html

でタグを使用する方法

セクションには、テキスト、画像などなど、ブラウザに表示されるすべてのものが含まれています。エンドユーザーに何かを見せたい場合は、オンとオフの間に…タグ：

に配置してください。 
<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">


  <h1>Page Title</h1>
  

</code>

HTML5 Template: A Base Starter HTML Boilerplate for Any Project

lang属性は何ですか？

上記のコード（

）に示すように、lang要素には属性が含まれている必要があります。その主な目的は、スクリーンリーダーなどの支援技術に、声を出して読むときにそれらを発音する方法を伝えることです。 （このプロパティはページの検証には必要ありませんが、ほとんどのバリデーターは、それを含めない場合は警告を発します。）

上記に示すlang属性の値はenであり、ドキュメントが英語で記述されていることを指定します。他のすべての話された言語には、フランス語のfr、ドイツ語のde、ヒンディー語などの値があります。 （ウィキペディアで言語コードの完全なリストを見つけることができます。）hi

htmlドキュメント文字エンコード

htmlドキュメント

セクションの最初の行は、ドキュメントの文字エンコードを定義する行です。 Webページで読む文字と記号は一連の数字として定義され、一部の文字（文字など）は多くの方法でエンコードされています。したがって、どのWebページを参照すべきかをコンピューターに伝えることは便利です。インジケータ文字エンコーディングは、バリデーターに警告を発することのないオプションの機能ですが、ほとんどのHTMLページでは推奨されます。 

<code class="language-html"><!DOCTYPE html></code>
注：一部の古いブラウザが正しくエンコードされている文字を読み取ることを確認するには、ドキュメントの最初の512文字のどこかに宣言をエンコードする文字全体を含める必要があります。また、コンテンツベースの要素の前に表示される必要があります（例の後半に表示される

要素など）。 <title></title> なぜHTML5テンプレートでUTF-8文字エンコードを使用するのですか？

上記の文字エンコードの例では、UTF-8文字セットを使用します。ほとんどすべての場合、

はドキュメントで使用する必要がある値です。このエンコーディングは、他のエンコーディングに含まれていないさまざまな文字をカバーします。たとえば、Webで奇妙なキャラクターに遭遇した可能性があります。これは明らかにバグです。これは通常、ブラウザがドキュメントで指定された文字セットに予想される文字を見つけることができないためです。

utf-8UTF-8は、世界中のさまざまな言語の多くのキャラクターや、多くの有用なシンボルを含む、さまざまなキャラクターをカバーしています。 World Wide Web Allianceが説明するように：

Unicodeベースのエンコーディング（UTF-8など）は複数の言語をサポートでき、あらゆる言語の混合ページとフォームに適合させることができます。その使用は、サーバー側のロジックを排除する可能性があり、それにより、各サービスページまたは各着信フォームの提出の文字エンコードを個別に決定します。これにより、多言語のWebサイトまたはアプリケーションの処理の複雑さが大幅に削減されます。

文字エンコードの完全な説明はこの記事の範囲を超えていますが、より深く掘り下げたい場合は、HTML仕様で文字エンコードについて読むことができます。

X-UA-Compatibleとはどういう意味ですか？

あなたは時々あなたのHTMLドキュメントのにこの行を見る：

<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">


  <h1>Page Title</h1>
  

</code>

このメタタグにより、Web Authorsはページをレンダリングするインターネットエクスプローラーのバージョンを選択できます。インターネットエクスプローラーが主に悪いメモリになっているので、コードからこの行を安全に削除できます。 （HTML5テンプレートから削除しました。）IEの古いバージョンでページが表示されると確信している場合は、それを含める価値があるかもしれません。このメタタグの詳細については、Microsoft Webサイトで読むことができます。

ビューポート要素

ビューポート要素は、ほぼすべてのHTML5テンプレートに表示される機能です。レスポンシブなWebデザインとモバイルファーストデザインにとって非常に重要です：

<code class="language-html"><!DOCTYPE html></code>

この<meta>要素には、名前/値セットとして一緒に機能する2つのプロパティが含まれています。この場合、名前はviewportに設定され、値はwidth=device-width, initial-scale=1に設定されています。これはモバイルデバイスのみです。値には2つの部分があることに気付くでしょう。

  • ：Webサイトに提示したいビューポートのピクセル幅。 width=device-width
  • ：これは0.0〜10.0の間の正の数字である必要があります。 「1」の値は、デバイスの幅とビューポートサイズの間の1：1の比率を示します。 initial-scale
MDNのこれらのメタ要素プロパティの詳細については、ほとんどの場合、このメタ要素とその設定がモバイルファーストレスポンシブWebサイトに最適であることを知っておく必要があります。

、説明と著者<title></title>

HTMLベーステンプレートの次の部分には、次の3行が含まれています。 

<code class="language-html">
  
  
  
  
</code>
ブラウザのタイトルバーに表示されるもの（たとえば、ブラウザタブの上にホバーするとき）も検索結果に表示されます。この要素は、

セクションの唯一の要素です。説明と著者の金属はオプションですが、検索エンジンに重要な情報を提供します。検索結果では、上記のコード例のタイトルと説明を以下に示します。 <title></title>

HTML5 Template: A Base Starter HTML Boilerplate for Any Project

に任意の数の有効な要素を配置できます。

ソーシャルカードのグラフ要素を開く

上記のように、

すべてのメタ要素はオプションですが、多くはSEOおよびソーシャルメディアマーケティングに適しています。 HTML5テンプレートの次の部分には、これらのメタエレメントオプションの一部が含まれています。 これらの要素は、いわゆるオープングラフプロトコルを利用しており、使用できる他の多くの要素があります。これらは、最も頻繁に使用する要素です。 Open Graph Webサイトで、利用可能なオープングラフメタオプションの完全なリストを表示できます。

ここに含まれるこれらの要素は、ソーシャルメディアの投稿にリンクされたときにWebページの外観を強化します。たとえば、ここに含まれる5つの<meta>要素は、次のデータが埋め込まれたソーシャルカードに表示されます。

コンテンツのタイトル
    • 提供されたコンテンツタイプ
    • コンテンツ仕様url
    • コンテンツの説明
  • コンテンツに関連付けられている
    • 画像
ソーシャルメディアで共有されている投稿が表示されると、通常、これらのデータビットがソーシャルメディアの投稿に自動的に追加されます。たとえば、GitHubホームページへのリンクを含めると、ツイートに次のものが表示されます。

HTML5 Template: A Base Starter HTML Boilerplate for Any Project

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

HTML5テンプレートの次の部分には、FaviconおよびApple Touchのアイコンとして含まれるリソースを示す

要素が含まれています。 <link>

Faviconは、誰かがあなたのウェブサイトをチェックすると、ブラウザタブに表示されます。 
<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">


  <h1>Page Title</h1>
  

</code>
ファイルは古いブラウザで使用されており、コードに含める必要はありません。プロジェクトのrootディレクトリに

ファイルが含まれている限り、ブラウザは自動的に見つけます。 favicon.icoファイルは、SVGアイコンをサポートする最新のブラウザで使用されます。代わりに.pngファイルを使用することもできます。 favicon.ico favicon.svg最後の要素は、ユーザーのホーム画面にページを追加するときにAppleデバイスで使用されるアイコンを参照します。

他のアイコンを参照するWebアプリケーションマニフェストファイルなど、追加のオプションをここに含めることができます。詳細については、このトピックに関するAndrey Sitnikの記事を読むことをお勧めします。しかし、ここに含まれるものは、単純なHTML初心者テンプレートに十分です。

CSSスタイルシートとJavaScriptファイルが含まれています

HTMLの最後の2つの重要な部分は、テンプレートを開始することです。1つ以上のStyleSheetsと場合によってはJavaScriptファイルへの参照です。もちろん、両方ともオプションですが、少なくともCSSスタイルを持っていないサイトはほとんどありません。

htmlテンプレートにCSS styleSheetを含める

スタイルシートはドキュメントのどこにでも含めることができますが、通常、

セクション：

に表示されます。 

<code class="language-html"><!DOCTYPE html></code>
要素は、Webブラウザーを外部StyleSheetに向けて、これらのCSSスタイルをページに適用できるようにします。

要素には、<link>属性が必要です。過去には、通常は<link>属性もありましたが、実際には必要ありませんでした。そのため、ウェブ上にそれを含む古いコードを見つけた場合、削除するだけです。 rel stylesheet cssリンクの最後にtypeクエリ文字列を追加したことに注意してください。これは完全にオプションです。これは、スタイルシートを更新してこのクエリ文字列を更新するときに便利なトリックです（たとえば、1.1または2.0に更新します）。これにより、ブラウザがCSSファイルの古いキャッシュされたコピーを破棄し、新しい1つのバージョンをロードすることが保証されるためです。

<link>要素を使用してWebページにCSSを含める必要がないことは注目に値します。 <style></style>セクション。これはレイアウトを実験する場合は非常に便利ですが、これらのスタイルは他のページでアクセスできないため、非効率的および/または重複するコードになるため、アクティブサイトでは一般的にはお勧めしません。 htmlテンプレートにjavascriptファイルを含める

javaScriptコードは通常

に渡されます ⋮ <p> </p>タグ：

にスクリプトを埋め込みました 
<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">


  <h1>Page Title</h1>
  

</code>
古いブラウザと新しい要素に関する

手順

html5が導入されたとき、<article></article>や<aside></aside>などの多くの新しい要素が含まれていました。正体不明の要素のサポートは、古いブラウザーにとって大きな問題だと思うかもしれませんが、そうではありません！ほとんどのブラウザは、実際に使用するタグを気にしません。 <recipe></recipe>要素（または<ziggy></ziggy>要素）を含むHTMLドキュメントがあり、CSSが特定のスタイルをその要素に添付している場合、ほぼすべてのブラウザがこのようにそれを処理します。 。

もちろん、そのような仮定は確認されず、アクセシビリティの問題があるかもしれませんが、ほとんどすべてのブラウザーで正しくレンダリングされます。例外は、インターネットエクスプローラーの古いバージョンです（つまり）。バージョン9の前に、IEは認識されていない要素がスタイルを受信することをブロックしました。レンダリングエンジンは、これらの不思議な要素を「未知の要素」として扱うため、外観や行動を変えることはできません。これには、想像した要素だけでなく、新しいHTML5要素を含むこれらのブラウザバージョンの開発時に定義されていなかった要素も含まれます。

幸いなことに、新しい要素スタイルをサポートしていない古いブラウザは最近ではほとんど存在していません。そのため、ほとんどすべてのプロジェクトで新しいHTML要素を心配することなく安全に使用できます。

つまり、古いブラウザを本当にサポートする必要がある場合は、John Resigが元々開発したシンプルなJavaScriptスニペットである信頼できるHTML5 SHIVを使用できます。 Sjoerd Visscherの作品に触発され、IEの古いバージョンで新しいHTML5要素を様式にしました。実際、これは今日は必要ありません。 Caniuse.comが示すように、HTML5要素は使用中のすべてのブラウザでサポートされています。

完全なhtml5テンプレート

これは私たちの最終的なHTML5テンプレートです - どのプロジェクトでも使用できるシンプルなテンプレート：

このシンプルで使いやすいHTML5テンプレートコードを今日のプロジェクトに入れることができます！これに基づいて、

タグと
<code class="language-html"><!DOCTYPE html></code>
タグの間に必要なものを追加できます。

結論

オンラインで多くのHTML初心者テンプレートとフレームワークがあり、既製のCSSとJavaScriptファイル、および好きなように使用および変更できる多くの事前書き込みコンテンツがあります。これは私たちの目標ではありません。ここで提供する基本的なテンプレートには、Webページを設計する際に必要なものがすべて含まれているため、毎回ゼロから始める必要はありません。

最初に表示する基本的なHTMLページテンプレート、または上に表示してプロジェクトで使用して使用してください。時間が経つにつれて、あなたは頻繁に必要としない内容があり、ここで言及していないことのいくつかが頻繁に使用していることがあることに気付くかもしれません。そのため、ワークフローに合わせてテンプレートを更新できます。

次のステップ

ウェブレイアウトを次のレベルに引き上げる良い方法は、美しいWebデザインの原則、第4版を使用することです。この本は、デザインの原則を教え、とを教えて、ウェブ上でそれらを実装する方法を示します。 2020年9月に完全に書き直され、他の場所で読んでいない最先端のテクノロジーが含まれています。

CSSの知識を磨くために、最新のCSSプロジェクトコースでは、CSS3の最新の高度なバージョンを習得するのに役立ちます。

それとは別に、インタラクティブでプログラム的でリアクティブなUIを使用して、ウェブサイトまたはWebアプリケーション開発を次のレベルに引き上げることができます。たとえば、JavaScriptとReactのSitePointの膨大なリソースを見てください。そして、最高の足場Webツールとライブラリのガイドを使用して、新しいプロジェクトをより速く開始する方法を学びます。または、コーディングを学習せずにWebエクスペリエンスを構築したい場合は、コードレスの動きに関するスターターガイドをお読みください。最新のコードレスツールはゲームチェンジャーです。多くの場合、コーディングの強力な代替品を提供するのに十分な力が初めてあります。

html5テンプレートfaq

最後に、HTML5テンプレートコードに関するよくある質問に答えます。

HTMLのテンプレートは何ですか？

テンプレートは、プロジェクトを開始するたびに使用されるHTMLページテンプレートであるため、ゼロから開始することを避けます。ドキュメントタイプの宣言や、各Webページに表示される基本的なHTML要素などの一般的な要素が含まれます。

テンプレートはテンプレートですか？

はい。テンプレートは、キャラクターエンコード、

、

要素、CSSおよびJavaScriptファイルなど、あらゆるWebページに表示される基本要素へのリンクを含む非常にシンプルなHTML初心者テンプレートです。

HTMLでテンプレートを作成する方法は？

独自のHTMLテンプレートを作成する1つの方法は、Webページを取得し、ソースコードをコピーし、各Webページに表示される最も基本的な要素を除くすべてを削除することです。または、既製のhtml5テンプレートを取得して.htmlファイルに貼り付けると、準備ができています！

HTML5テンプレートは何に使用されていますか？

Webページを設計するとき、空白の.htmlページから始めて、すべての退屈なコードをゼロから書くことほど悪いことはありません。 HTML5テンプレートは、一意のデザインとコンテンツの作業をすぐに開始できるように、実行を開始する必要があるすべてのHTMLテンプレートコードを提供します。

テンプレートの例は何ですか？

インターネットにはHTML5テンプレートの例がたくさんあります。時間が経つにつれて、HTMLを自分で書く方法に基づいて独自のテンプレートを作成できます。 HTML5テンプレートの例は、ほとんどのWebページで必要なすべての基本要素を提供します。

非常に簡単なスタートとして、これを使用できます：

<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">


  <h1>Page Title</h1>
  

</code>

HTMLの開始コードは何ですか？

htmlドキュメントは常にドキュメントタイプの宣言で始まります：<!DOCTYPE html>。次に、Webページ上の他のすべてのコンテンツを含むタグがあります。 の2つの子要素は、および要素です。 HTML5テンプレートには、Webページに必要なすべての基本開始コードが含まれています。

すべてのHTMLファイルにはテンプレートが必要ですか？

理想的には、はい。 HTMLテンプレートは、Webブラウザーで有用なアクションを実行するために、HTMLページのコードの最小量を提供します。 WebサイトのすべてのページでHTMLテンプレートコードを使用できます。通常、テンプレートの一般的な要素は、フレームワークやインクルードファイルなど、単一のソースからページに注入され、すべてのページのテンプレートを一度に更新できます。 HTML5テンプレートは、開始する必要があるすべてのHTMLテンプレートコードを提供します。

以上がHTML5テンプレート：プロジェクト用のベーススターターHTMLボイラープレートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript html5 css css3 html xhtml for 字符串 样式表 viewport github microsoft 搜索引擎 ui SEO
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSフィルターの創造力の探求とブレンド次の記事：CSSフィルターの創造力の探求とブレンド

関連記事

続きを見る