HTMLテンプレート

【便利!】HTML5の初期テンプレートのダウンロード

html5を作る上で静的なテンプレートがあると便利ですね。

こちらでは最低限のテンプレートの解説、ダウンロードをしていただくことが可能です。
また、HTMLの静的テンプレートから、phpを使った最低限include(共通化)されたテンプレートの2種類を準備しましたのでよろしければご利用ください。

静的テンプレート構成

静的テンプレートのダウンロードファイルには以下が含まれています。

静的テンプレートのソース

reset.cssのソース

reset.cssとは各ブラウザ間で生じるデフォルトのCSSの適応範囲を統一するものとなります。
firefoxではデフォルトは〇pxに設定されているのにchromeだ●pxに設定されているなど、
少なからずブラウザ間で差異は生じます。
複数のブラウザで正しく見れるようにするのも大切なことですので、ぜひ適応させてください。

動的テンプレート構成

こちらではphpを使ってincludeをされているものを準備しました。

共通化することのメリットは、一か所を修正することで済むことです。今どきのサーバーでphpが使えないなんてものはないので、このままご利用いただけるかと思います。

h1 の部分はSEO的にもページ単位で設定したほうがいいので共通化せずそのままを置いてます。

動的テンプレートのダウンロードファイルには以下が含まれています。

表示は共通化しただけですので静的のと同じです。
CSSは省きます

動的テンプレートのソース

静的な部分との違いは
以下でまとめているかどうかの違いだけです。


当然他の部分もinclude したい部分あればこの方式でできます。
よくあるのがサイドメニューやアナリティクスなど同じものを多くのページに表示させるときなどが便利です。

毎回使うようなものはこのようにまとまってると非常に便利なのです。