Home-theater-designers
新しいWebサイトを構築するときは、最近ではHTML5互換にする必要があります。しかし、HTML5の複雑さを最初から学ぶのに不必要な時間を費やしたくないのではないでしょうか。
幸いなことに、 HTML5ボイラープレートテンプレート 助けられる。これは、わずか数分でHTML5Webサイトを作成するために使用できるシンプルなフロントエンドテンプレートです。しかし、それはまた、複雑で完全な機能を備えたサイトの基盤として使用できるほど強力です。
mac osxをこのコンピューターにインストールすることはできません
このHTML5ボイラープレートのチュートリアルでは、テンプレートに含まれる内容、テンプレートの使用方法について知っておく必要のある基本事項、およびさらに学習するためのいくつかのリソースについて説明します。また、テンプレートを使用して、数行のHTMLのみで非常に基本的なサイトを作成した方法も示します。
HTML5ボイラープレートテンプレート
HTML5 Boilerplateからテンプレートをダウンロードすると、多数のフォルダーとファイルが取得されます。 ZIPファイルの内容は次のとおりです。
css
---main.css
---normalize.css
doc
img
js
---main.js
---plugins.js
---vendor
---jquery.min.js
---modernizr.min.js
.editorconfig
.htaccess
404.html
browserconfig.xml
favicon.ico
humans.txt
icon.png
index.html
robots.txt
site.webmanifest
tile.png
tile-wide.pngここでは、テンプレートのすべての要素について説明するのではなく、基本事項についてのみ説明します。ただし、すべてのファイルを使用するためのリソースがあることを確認するために、ヘルプドキュメントから始めます。
HTML5ボイラープレートヘルプドキュメント
ボイラープレートには、 GitHubでホストされているヘルプドキュメント 。これは、技術的な質問がある場合や、なぜ何かがそのように設計されているのか疑問に思っている場合に大きな助けになります。
ドキュメント内のほとんどすべてが、テンプレートのdocフォルダにも含まれています。ボイラープレートサイトの構築方法を理解するのに大いに役立つMarkdown（.md）ファイルがいくつか表示されます。
すべてを読み通したい場合は、TOC.mdから始めて、そこから他のMarkdownファイルへのリンクをたどってください。特定の問題に関するヘルプを探している場合は、関連していると思われるファイルを見つけてください。開始するのに適した場所はusage.mdです。
HTML5ボイラープレートのCSSから
HTML5ボイラープレートテンプレートには、main.cssとnormalize.cssの2つのCSSファイルが付属しています。
2番目のファイルnormalize.cssは、さまざまなブラウザーが一貫した方法で要素をレンダリングするのに役立ちます。それがどのように機能するかについての詳細は、 GitHubのnormalize.cssプロジェクト 。
一方、main.cssは、必要なコードを入力する場所です。 CSSでサイトをフォーマットする 。テンプレートに含まれている標準のCSSは、開発者とHTML5ボイラープレートコミュニティによって実施された調査の結果です。読みやすく、さまざまなブラウザでうまく表示されます。
独自のCSSを追加する場合は、作成者のカスタムスタイルセクションに追加できます。サンプルページにリンクスタイルを少し追加します。
基本CSSには、便利なヘルパークラスも多数含まれています。それらのいくつかは、標準のブラウザとスクリーンリーダー（またはいくつかの組み合わせ）からアイテムを非表示にします。
また、main.cssには、レスポンシブデザインと便利な印刷設定のサポートがあります。
これらの項目はすべて、CSSのコメントによって明確に説明されています。
一般に、基本CSSを使い始めることができます。
テンプレートへの独自のHTMLの追加
ボイラープレートには、404.htmlとindex.htmlの2つのHTMLファイルが含まれています。
インデックスページは、ホームページ（または、単純な1ページのポケットベルを使用する場合は唯一のページ）を作成する場所です。
ブラウザでインデックスページを開くと、1行のテキストが表示されます。しかし、HTMLを調べると、コードに隠れていることがはるかに多くなります。変更について本当に心配する必要があるのは、Google Analyticsコードだけです（テキスト「UA-XXXXX-Y」を見つけて、独自の追跡コードに置き換えます）。
インデックスページの残りのHTMLには、Webアプリの情報、古いブラウザーの通知、および便利なJavaScriptが含まれています。あなたが始めているとき、あなたはこれのどれかを台無しにする必要はないはずです。
ただし、それらを事前に入力しておくことは、サイトがHTML5を最大限に活用できるように準備されていることを確認するための良い方法です。
ページを作成するには、ファイルのタグの間にHTMLを挿入します。これが私が自分自身について追加するいくつかの基本的な情報です：
より多くのページを作成したいですか？このファイルのコピーを作成して名前を変更すると、すべてのHTMLをコピーして貼り付ける必要がなくなります。次に、コンテンツを追加します。
404ページをカスタマイズする場合は、HTMLファイルを変更するだけです。 404ページに何を入れるべきかわからない？これらのすばらしい404ページのデザイン例をご覧ください。
ファビコン（およびその他のアイコン）の追加
ファビコンを置き換えたいですか？次に、favicon.icoは、置き換える必要のあるファイルです。
まだ持っていない場合は、作成する必要があります。オンラインファビコンジェネレータを使用することも、独自に設計することもできます。 16 x 16ピクセルで、.icoファイルタイプであることを確認してください。
パフォーマンスを向上させるためのWindows10レジストリの調整
ファビコンにいくつかの考えを入れることをお勧めします。これらの有名なファビコンを使用して、ブレーンストーミングをガイドします。新しいファビコンを追加するときは、favicon.icoという名前であることを確認してください。
サイトのルートディレクトリには、icon.png、tile.png、tile-wide.pngの3つの画像があることに気付くかもしれません。これらは何のためですか？
- icon.pngは、Appleのタッチアイコンに使用されます。 Webアプリを作成する場合、このアイコンは、iPhoneまたはiPadユーザーがアプリをホーム画面に追加するときに使用されます。
- tile.pngおよびtile-wide.pngは、Windowsの「ピン」機能用であり、Windows10に表示されます。
これらすべての場合にアイコンを提供することをお勧めします---ただし、Webアプリを構築していない場合は、優先度が低くなる可能性があります。
機能の追加
HTMLとファビコン（および含めるCSS）を追加すると、サイトを公開する準備が整います。 HTML5ボイラープレートを使用するのはとても簡単です。サーバーにアップロードすれば完了です。
私たちのページは次のようになります。
ご覧のとおり、ほんの数行のテキストで、完全に機能する（少し当たり障りのない）Webサイトが作成されています。それほど多くはありませんが、ほんの数分しかかかりませんでした。そしてそれはHTML5で非常に拡張可能です。それがボイラープレートテンプレートの力です。
ただし、必要に応じて、ボイラープレートテンプレートを使用して実行できることは他にもたくさんあります。探している特定のものがある場合は、ヘルプドキュメントで見つかる可能性が高くなります。
HTML5で何ができるかわからないが、知りたい場合は、役立つWebデザインチュートリアルがたくさんあります。
共有 共有 つぶやき Eメール 互換性のないPCにWindows11をインストールしても大丈夫ですか？これで、公式のISOファイルを使用して古いPCにWindows 11をインストールできます...しかし、そうすることをお勧めしますか？
次を読む 関連トピック- プログラミング
- HTML5
- コーディングチュートリアル
ダンは、企業が需要とリードを生み出すのを支援するコンテンツ戦略およびマーケティングコンサルタントです。彼はまた、dannalbright.comで戦略とコンテンツマーケティングについてブログを書いています。
ダン・オルブライトのその他の作品ニュースレターを購読する
ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。
購読するにはここをクリックしてください