作成時間15秒！HTML5サイトを目的に合わせて簡単に作成出来るサイト「Initializr」

HTML5、CSS3、Javascriptを使用したサイトを簡単につくることが出来るテンプレートサイト「HTML5 Boilerplate」。このBoilerplateを利用してさらに簡単に15秒程度で目的に合わせてHTML5のテンプレートを作ることが出来るサイト「Initializr」の紹介です。Javascript、Modernizr、webサーバの設定などを簡単に組み込んだり、外したり出来ます。

使用方法は、とても簡単で必要に合わせていくつかのオプションを選択します。多くの場合、デフォルトの設定で問題ないと思います。

まずは、こちらのサイト「Initializr – Start your HTML5 project in 15 seconds!」にアクセスします。

サンプルページが必要な場合は、「Initializr sample page」を選択してください。(デフォルトで選択されています。)

Javascriptを使用する場合はこちらから。

HTML5、CSS3などの新しいweb技術が自走されているか検出するスクリプト「Modernizr」を実装の選択。

webサーバの設定が必要な場合はここで選択します。

Downloadボタンをクリックしてファイルをダウンロードします。

実際に作成したサイトのテンプレートを見てみるとこんな感じになっています。

後は、「TODO_LIST」を見ながらいくつか修正を加えれば完了です。はじめてHTML5に触れる人には勉強にもいいかもです。

ちなみに、IEにHTML5要素を認識させる「html5shiv」スクリプトはデフォルトで組み込まれています。

関連記事：

Webコンテンツのメインを張るのはFlashかそれともHTML5か、とうとうブラウザ上で「直接対決」が実現 – DNA

タブレットに完全対応、HTML5で書かれたAP通信のサイトのインターフェイスがかっこいい – DNA

口汚くデザインについてアドバイスしてくれるサイト「Good Fucking Design Advice」 – DNA

PCサイト上の画像をモバイル機器向けサイト用に自動変換、配信までしてくれるサービス「tinySrc」 – DNA

シンプルなUIがとてもステキ、ある意味究極のお天気予報サイト「Is it raining in your city?」 – DNA

ウェブページ製作者は必見、HTMLやJavascript等のチートシート19個 – DNA

各国政府からGoogleへの削除依頼をまとめたサイト「Transparency Report」 – DNA

世界中からのTwitterの「つぶやき」をリアルタイムにヒートマップ表示できるサイト「A WORLD OF TWEETS」 – DNA

Googleが提供するAPIやアプリなどを元素周期表で表現したサイト「Google APIs & Developer Products」 – DNA

高音質な雨音をループ再生し続けることができるサイト「RainyMood.com」 – DNA

あのトラウマがよみがえる……！Internet Explorerの「あのエラー」をJavaScriptで見事に再現 – DNA

Facebookのルーツとなったサイト「Facemash.com」のドメインが約260万円で売却 – DNA

ちょっとでも数学が好きになろうとした男の子らしい工夫 – DNA

海外のQ＆Aサイトで見られた「ネットワークのホスト名、どうやって決めてる？」の回答いろいろ – DNA

通販サイトAmazonのちょっと怖い「よく一緒に購入されている商品」 – DNA