実験、簡易サイト作成に！HTMLコードのテンプレートサンプルを作ってみた

よこのじ（@yokonoji_work）です。

HTMLやCSSについて一通り扱えるようになった後、JavaScriptやPHPも取り入れて実験や簡易的なサイトを作ることが多いため、そのためのテンプレートを作ってみました。

HTMLテンプレートサンプル

こちらのサイトが、そのテンプレートサンプルです。Bootstrapをベースにして、Navbarや2カラムのcontainerを配置しています。Webページを作るときはこれを利用してサクっと作ることができます。リンク先のページのソースコードをまるっとコピペしてもらえればそのまま動きます。

HTML Template：https://yokonoji.github.io/project/html-template

解説

作ったページはそのまま公開もできるようにいくつかポイントがあります。

1つはdns-prefetchを使って、Google Adsense関連のページで読み込まれるドメインの名前解決を行っている点です。これにより、ページアクセス時のDNS Lookupを事前に済ませて広告表示を速くすることができます。

<meta http-equiv="x-dns-prefetch-control" content="on">
<!--Adsense関連の名前解決-->
<link rel="dns-prefetch" href="//pagead2.googlesyndication.com">
<link rel="dns-prefetch" href="//cm.g.doubleclick.net">
<link rel="dns-prefetch" href="//googleads.g.doubleclick.net">
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link rel="dns-prefetch" href="//ade.googlesyndication.com">
<link rel="dns-prefetch" href="//tpc.googlesyndication.com">
<link rel="dns-prefetch" href="//googleads4.g.doubleclick.net">

SNS用のカード表示も用意しています。これらのメタタグにサイトのURLや画像の指定を行えばTwitterやFacebookでの拡散も問題ありません。

<!--SNS用カード-->
<meta property="og:url" content="サイトのURL" />
<meta property="og:title" content="サイトタイトル" />
<meta property="og:type" content="website">
<meta property="og:description" content="サイトの説明をここに書く" />
<meta property="og:image" content="画像をURLで指定" />
<meta name="twitter:card" content="summary　か　summary_large_image" />
<meta name="twitter:site" content="Twitterユーザー名　@yokonoji_work" />
<meta property="og:site_name" content="サイトタイトル" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="Facebook appIDを入力">

その他、ファビコンやFont Awesomeのcss読み込み、google fontsでNoto Sans JPの読み込み、Bootstrapのcss, js、jQueryの読み込みを記述済みです。

ちょっとした実験、簡易サイトの作成に自分でカスタマイズしたテンプレートを持つと何かと便利ですよ。