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

関連記事

【CSS】CSS3で実現するドロップシャドウ効果

画像処理のソフトなどには、文字やオブジェクトに影をつける「ドロップシャドウ」という機能があります。 ボタンや写真などに「ドロップシャドウ」使うことで立体的に表現することができるのでよく使われる効果のひとつです。 画像処理のソフトなどで行う「ドロップシャドウ」効果を...続きを読む

2015.02.09HTMLコーディング

寺坂商店様「ウェブ戦略舎」WEBサイト制作

webサイト制作から納品だけでなく、クライアントの、商品サービス、事業戦略、提供手法を深く理解し、ウェブ集客に必要なマーケティングの最適化と売れる仕組み作り。目指す月商売上の再現を導き出すために、売れる仕組み作りのウェブ戦略構築とマーケティング手法、貴社が運用できる様にメ...続きを読む

2023.12.13WEBサイト制作WEBデザイン

【WP】WordPressのアーカイブリストの「年月」表示をカスタマイズする

WordPressでは投稿された記事に対して、年別や月別のアーカイブを生成できます。アーカイブのリスト表示は2014年1月というように掲載されますが、年や月の表示を変えて表示したいこともあります。 アーカイブの日付表示 投稿された記事の日付の形式はWordPr...続きを読む

2015.02.19WordPress

【フォト】藤枝花火大会《蓮華寺池公園》

毎年8月7日に藤枝市の蓮華寺池公園で開催される花火大会。 藤枝花火大会は、大正時代から続く静岡県藤枝市の歴史ある花火大会です。蓮華寺池公園の山々をバックに約5000発が打上がります。蓮華寺池公園周辺で花火を見ることが多いのですが、写真を撮ったのは、山側から花火を見下ろすように撮影...続きを読む

2016.08.07フォトギャラリー藤枝

HTML文章の歴史を振り返る

WEBサイトの制作において基礎となるのは、HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)略称をHTML(エイチティーエムエル)と呼ばれる、拡張子が.htmlや.htmなどであらわされる文章ファイルです。 WEBサイトの制作に...続きを読む

2015.01.14HTMLコーディング