HTML5 UP!をひもとく 第0回 HTML5 UP!とは？編

次回:第1回 30分で目を見張るWebページを作ろう編

HTML5 UP!とは？

HTML CSS Javascriptが一つになったレスポンシブテンプレートを配布しているサイト。
ライセンスはCC-BY3.0(Creative Commons Attribution 3.0)。
以下の条件を守れば商用・改変・再配布などなんでもOKな太っ腹のライセンス。

表示 — あなたは 適切なクレジットを表示し、ライセンスへのリンクを提供し、変更があったらその旨を示さなければなりません。あなたはこれらを合理的などのような方法で行っても構いませんが、許諾者があなたやあなたの利用行為を支持していると示唆するような方法は除きます。
追加的な制約は課せません — あなたは、このライセンスが他の者に許諾することを法的に制限するようないかなる法的規定も技術的手段 も適用してはなりません。

via:Creative Commons
要するにブラウザで表示されるようにHTML5 UP!へのリンクが必要というわけ。
ソース内ではクレジットと見なされません。
また、ライセンス条文は以下をどうぞ。
Creative Commons

使い方

1. HTML5 UP!にアクセス。
2. 好きなテンプレートを選んでダウンロード。
3. 圧縮されているので展開する。
4. htmlファイルを編集する。
5. まるごとアップロードする。

(注)複数のカラムが用意されている場合があるが、好きなものを選べばよい。

変更すべき箇所

• jQueryをCDNから読み込むようにする。
  Minimaxingの場合254行(編集していない状態)の

index.html

(254:)<script src="assets/js/jquery.min.js"></script>

を

index.html

(254:)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

に書き換えよう。
(この場合はGoogleCDNよりバージョン2.24を読み込んでいます。)

• IE8/9のサポートをしない場合は関連ファイルの読み込みをストップさせる。
  Minimaxingの場合12/14/258行の

index.html

(12:)<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
(14:)<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
(258:)<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->

を削除しよう。
そして、サーバーからも削除する。

• 2-6行目のコメント部分を不要なら削除しておこう。
  ソースコード上にライセンスは基本的に不要です。

注意

タグについて

以下のタグは一部のテンプレートにおいてクラスdefaultが必要です。

• table
• li
• ol

CSSについて

非常にサイズの大きいファイルです。
gzip圧縮やタブ・改行の削除が必要です。
また、かなり重ためのデザインです。
不要な要素は削除しましょう。
それなりのサーバー環境が必要です。

サポートブラウザについて

公式には発表はありませんが、おそらく以下の通りです。

• IE8/9/10/11 (html5shiv.js / ie9.css / respond.min.cssを抜くとIE8/9ではデザインが崩れます。)
• Microsoft Edge
• Google Chrome
• Mozilla Firefox
• Opera

要するにモダンブラウザならOK!

---

今回はここまで。
次回からは、各テンプレートについて解説していきます。

「HTML5 UP!をひもとく」連載目次

• 第0回 HTML5 UP!とは?編
• 第1回 30分で目を見張るWebページを作ろう編