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

関連記事

モバイルサイトを構築するときに役立つフレームワーク5選

スマートフォンやタブレットなどのモバイル端末の普及に合わせて、モバイル端末によるWEBサイトへのアクセスやモバイルアプリケーションの需要が多くなってきていることを感じます。 今回はモバイル端末に最適化されたWEBサイトやアプリケーションを制作するときに役立つフレームワー...続きを読む

2015.02.08HTMLコーディング

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

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

2017.01.28フォトギャラリー

Google ChromeでSSL化(暗号化)されていないページを閲覧すると警告表示がされます

2018年7月から最新のGoogle Chrome ブラウザを使用して、WEBサイト(ホームページ)を閲覧すると、SSL化されていないページでは、「保護されていません/保護されていない通信」という警告文が表示されるようになりました。Google が「保護されたウェブの普及を目指し...続きを読む

2018.08.18SSLWEB

【WP】ユーザーの一覧、ユーザー別に最新記事を表示する方法

キュレーションサイトなど最近では複数のライターによって運営される情報サイトをよく見ることができます。そのようなサイトにおいて、ユーザーの一覧を表示する、さらには1ページ内にユーザー事に最新記事を表示するといったページがほしいときがあります。 今回は、WordPressでユー...続きを読む

2016.07.14WordPress

【ソーシャルメディア】2004から2013年までのソーシャルメディアの成長

検索エンジンジャーナルによる2004から2013年までのソーシャルメディアの成長をあらわした図解です。( Search Engine Journal ) The Growth of Social Media v2.0 [INFOGRAPHIC] 図解をみてみると、...続きを読む

2015.02.17WEB