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】Bootstrap4を使いレスポンシブサイトをコーディングする《導入編》

Twitterのデザイナーや開発者が作成した『Bootstrap』は、フロントエンドのフレームワークとオープンソースプロジェクトです。『Bootstrap』は、CSS、JS、およびフォントが基本セットになっています。HTMLのテンプレートソースを組み合わせて、レスポンシブ対応...続きを読む

2018.09.22BootstrapHTMLコーディング

【デザイン】シングルページデザイン海外のクリエイティブWEBサイトまとめ

シングルページデザインは、1ページ内に「お知らせ」「コンセプト」「サービス紹介」「会社概要」「お問い合わせ」などのサイトを構成する一般的な情報をすべて集約したデザインです。従来サイトで、訪問者がページを見て必要な情報が無いと判断して離脱してしまうことを防ぐことから設計されたデ...続きを読む

2015.02.16インスピレーション

LGP(ラッキーガールズプロモーション)様WEBサイト制作

静岡を拠点に活動している『LGP(ラッキーガールズプロモーション)』様のWEBサイトを制作いたしました。ラッキーガールズプロモーション様では、カットモデル・サロンモデル・カメラマン派遣・体験モニター・撮影会・モデルイベント・パーティー企画・変身ビフォーアフター、ホームペー...続きを読む

2015.02.06WEBサイト制作

【WP】ソーシャルブックマークのボタンを追加するプラグイン

WordPressで構築したサイトやブログの記事にソーシャルブックマーク(またはソーシャルメディア)のボタンを追加することができるプラグインをまとめてみました。 ほとんどのプラグインが管理画面のプラグインの検索より探すことができます。 Sharebar 投稿した...続きを読む

2015.02.20WordPress

【フォト】love local MARKET 1/26 HOTマーケット

love local MARKET 月末の金曜日はちょっと豊かに。プレミアムフライデー。藤枝駅南口広場で開催されている、HOTマーケットに行ってきました。 ここ最近は藤枝でもめずらしい雪が舞うほど冷え込む日が続いているなか、屋外でのマーケット。イルミネーションに照らされて、...続きを読む

2018.01.26フォトギャラリー