HTML5テンプレートとして各地で紹介されているInitializrですが、初期設定がいろいろ必要になってきます。その設定方法をTODO.txtの内容を翻訳してInitializrの説明と合わせて解説します。
Initializr
まずはInitializrのInitializrから。
サンプルの有無を選択。
jQueryなどのjavascriptの有無を選択。
HTML5非対応ブラウザのためのスクリプトの選択。
サーバーの設定ファイルの有無を選択。
シンプルさを求めるなら「No, thanks」でいいと思います。
GoogleAnalyticsのサンプルの有無。
UA-XXXXX-Xに自分のサイトIDを設定することになります。
選択が終わったらダウンロードすれば良いのですが、
この後、少しだけ設定が必要になるのでその解説をします。
基本的にはTODO.txtの項目をこなしていけばOKです。
Initializrの設定方法
Change lang="en" in the tag if your page is not in English
英語ページじゃない場合は変更してください。
<html lang="en" class="no-js">
↓
<html lang="ja" class="no-js">
Fill:
<title></title>
<meta name="description" content="">
<meta name="author" content="">
タイトルなどを埋めてください。
<title></title>
<meta name="description" content="">
<meta name="author" content="">
↓
<title>Html5 Collect initializr demo</title>
<meta name="description" content="Html5Collectのinitializrツールのデモです。">
<meta name="author" content="wazgo">
Change the favicons
faviconを変えてね。ということで、favicon.icoを自前のものに変更。
Remove the jQuery test in index.html and script.js, and the link to this TODO list.
テスト用に作成されているコードを消してください、とのことで下の２つを消去。
<p id="jquery-test" href="#" class="info">jQuery is not loaded (http://localhost/ needed)</p>
Your HTML5 project is almost ready! Please check the <a href="TODO.txt">TODO list</a>.
Make a 404.html page if you have a 404 redirection in your server configuration file
404.htmlを作成してサーバーに設定しておいてください、
とのことで必須ではないけど作成します。
index.htmlをコピって404.htmlを作成。
不要な要素を削除して「お探しのページは見つかりませんでした。」など案内文を書きましょう。
Initializrの推奨設定
Use CSS versionning to force the cache refresh:
<link rel="stylesheet" href="css/style.css?v=[current_version]">
CSSを変更してもキャッシュが効いていて昔のものが反映されてしまう事が良くあります。
その場合、versionを設定すればキャッシュを強制的に新しいものに書き換えることができます。
サンプルではv=2となっているけど、v=3とかv=4とか書けばCSSが即反映されます。数字はなんでもOKです。
To fix the PNG background image of an element in IE6, add the .png_bg class to this element.
IE6は透過PNGがイケていないので対策する場合は.png_bgを作成してください。
To apply a particular style to an element in a specific version of Internet Explorer,
use the .ie6, .ie7, .ie8 and .ie9 in the CSS selector for this element:
IEのバージョン対策のために、それぞれ.ie6や.ie7などの要素が効いています。
設定サンプルはこちらです。
.ie6 #myelement{
margin-left: 20px;
}
これはIE6の場合#myelementにはmargin-left: 20px;が効きます。
ここまでくれば自由に変更してOKです。
ぜひHTML5サイトにチャレンジしてみてくださいね！
