Webで最も人気のあるフロントエンド·テンプレート『html5-boilerplate』

html5-boilerplate

『html5-boilerplate』は無償でコピー、加工、再配布が可能なHTML5ベースのテンプレートパッケージです。

このパッケージのコンセプトとして、フロントエンド(初期段階)にかかる作業を短縮して、高速で堅牢、柔軟性のあるWEBアプリやサイトを素早く構築することを掲げています。

フロントエンド(初期段階)にかかる作業というと、各ブラウザの対応、CSSのリセット、jQuery、Modernizrのライブラリ対応、モバイル・スマホ対応、ApacheやGoogleの解析コードなど、これらを基本に構築をスタートすればさくさくプロジェクトステートできますというのが『html5-boilerplate』です。

HTML5 BOILERPLATE ショールーム

グーグル、マイクロソフト、米航空宇宙局(NASA)でのプロジェクトサイトでも『html5-boilerplate』のテンプレートを利用しているみたいです。他にも『html5-boilerplate』で作成されたサイトが紹介されています。

テンプレートデータのダウンロード

HTML5 Boilerplate、Initialiのサイトからダウンロードすることができます。

テンプレート『HTML5 BOILERPLATE』の内容

html5boilerplate.com から、ダウンロードしたデータを解凍して生成されるファイルの内容は以下のようになっています。(※2013年12月現在)

.gitattributes
.gitignore
.htaccess
404.html
apple-touch-icon-precomposed.png
CHANGELOG.md
CONTRIBUTING.md
crossdomain.xml
favicon.ico
humans.txt
index.html
LICENSE.md
README.md
robots.txt
tree.txt
│  
├─css
│      main.css
│      normalize.css
│      
├─doc
│      crossdomain.md
│      css.md
│      extend.md
│      faq.md
│      html.md
│      js.md
│      misc.md
│      TOC.md
│      usage.md
│      
├─img
│      .gitignore
│      
└─js
    │  main.js
    │  plugins.js
    │  
    └─vendor
            jquery-1.10.2.min.js
            modernizr-2.6.2.min.js

基本ファイル・ドキュメント

ファイル名 補足説明
.gitattributes Gitを使ったソース管理用の設定ファイル。公開時には必要のないファイルです。
.gitignore Gitを使ったソース管理用の設定ファイル。公開時には必要のないファイルです。
.htaccess Apache用の設定ファイル。
404.html 404ページテンプレート。
apple-touch-icon-precomposed.png アップル用アイコンイメージ。
CHANGELOG.md ソースコードの改変履歴。
CONTRIBUTING.md 利用しているライブラリやバグ内容、ソース管理についてのメモ。
crossdomain.xml Flashから別ドメインにある外部ファイルを読む場合の設定ファイル。
favicon.ico favicon用アイコンイメージ。
humans.txt 検索ロボット向けにrobots.txtがあるように、humans.txtは人間向けのサイト紹介テキストです。
index.html ページテンプレート。
LICENSE.md ライセンスについて。
README.md 読んでね
robots.txt 検索ロボット向けの「robots.txt」

CSSファイル

ファイル名 補足説明
normalize.css CSSの基本セットに「normalize.css」を使用しています。リセット系のCSSのように値をクリアにするより、デフォルト値を標準化して定義しています。
main.css 基本的な要素への設定、フォント、clearfix、印刷用、モバイル用のメディア別にも設定が書かれています。

JavaScriptファイル

ファイル名 補足説明
main.js 内容は空になっています。
plugins.js jQueryのプラグインや他のサードパーティスクリプトなどのプラグインを追加する場合に利用できます。
jquery jQueryのライブラリです。
modernizr HTML5、CSS3 の機能が使えるかどうかをテスト、対応状況に合わせて別途 CSS, JS を読み込む機能があります。

『html5-boilerplate』はデザインなどの装飾が無い状態から構築が出来るのでオリジナルでのカスタマイズがしやすいと思います。

関連記事

【HTML】Sass・SCSSを使ってWEBサイトの制作を効率化する

現在の多くのWEBサイトではHTMLとCSSによって構築されています。WEBサイトの制作方法を勉強するとHTMLとCSSについてを学ぶと、ここ最近は、SassやSCSSといったキーワードが出てきます。SassやSCSSを活用しなくても、もちろんWEBサイトを制作することが...続きを読む

2019.05.13HTMLコーディング

【フォト】世界で美しい星空保護区の星空

みなさんは「星空保護区」というのをご存知ですか?その名前の通り、保護すべき美しい星空が見える地域として認定しようという取り組みです。 国際ダークスカイ協会(IDA)によって世界中の暗い夜空の保護・保存を目指し、保護区を認定する活動が行われています。 UNESCO(ユネスコ)で...続きを読む

2016.07.13フォトギャラリー

【デザイン】ライセンスフリーのグラフィカルユーザインタフェーステンプレート

WEBサイトやパソコンの画面などに見られるメニューやボタンなどのグラフィカルユーザインタフェース(GUI)のテンプレートをまとめてみました。 Flat Style & iOS 7 Line Style UI Kit PSD フラットデザイン、iOS 7 イメー...続きを読む

2015.02.14インスピレーション

ネイルサロンBrillez(ブリレ)様ロゴ制作

ネイルサロン『Brillez(ブリレ)』様のロゴを制作いたしました。Brillez(ブリレ)はフランス語で輝くの意味があります。 お客様のご要望で、店内はランドマークとなるシャンデリアあり、高級感のある大人の女性の雰囲気なので、ロゴも店内の雰囲気に合わせてデザインをして...続きを読む

2015.01.14ロゴ制作

【フォト】鬼岩寺1月28日「厄除け火渡り」

藤枝にある鬼岩寺。弘法大師が当地の人々を苦しめていた鬼を退治した話にその名前の由来があり、鬼が鋭い爪を研いだといわれる「鬼かき岩」が残っています。 毎年1月28日には厄除け火渡りの行事が行われています。 フォトギャラリー ※写真をクリックすると拡大表示します。 [...続きを読む

2017.01.28フォトギャラリー