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

関連記事

【WP】アップロードするメディアフォルダをカスタマイズする

wordpressでは画像などのメディアファイルを投稿すると初期設定では「投稿年」「投稿月」のフォルダが作られ、そのフォルダ内にデータがアップロードされます。 コーポレートサイトとして運用しカスタム投稿や固定ページを多く使用するような場合はカスタム投稿やページ毎に分けて...続きを読む

2015.03.13WordPress

藤枝おんぱく『村松八百蔵商店ギャラリー』(5/30)

藤枝駅前の古民家「村松八百蔵商店」を会場に藤枝おんぱくで行われたさまざななプログラムのフォトギャラリーの展示の様子をお届けします。 フォトギャラリー ※写真をクリックすると拡大表示します。 [gallery link="file" columns="4" ids="98...続きを読む

2015.08.17フォトギャラリー

サロンドブー様で行われたテレビ撮影に密着しました

富士市にある美容室とエステサロンの『サロンドブー』様の写真撮影をいたしました。サロンドブー様でサービス提供している霧でかける新感覚のパーマシステム「プルームパーマ」のテレビ撮影があるとのことで、密着さいて撮影の様子や「プルームパーマ」の施術の様子を撮影いたしました。 ...続きを読む

2015.04.23フォトギャラリー

【WP】ワードプレスで使用する名前の付け方の注意事項

WordPressを使用してWEBサイトやブログを構築するとき、ページの名前、カテゴリーの名前、タグの名前などに英単語で名前をつける際に注意することがあります。プログラミングに馴染みのある方にとっておなじみだと思いますが、名前をつけるときには「予約語」を避けることです。 ...続きを読む

2015.08.20WordPress

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

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

2015.02.17WEB