ITエンジニア/デザイナ向けにオープンソースを毎日紹介

新しいWebサービスを作ろうと思った時にはまずデザインにこだわりたいでしょう。最近ではスマートフォン、タブレットデバイスのサポートもあってデザインはさらに複雑になっています。これまでのデザインテンプレートでは対応できない場合も多いでしょう。

そこで使ってみたいのがHTML5、レスポンシブWebデザインに対応したテンプレートです。特にHTML5 UP!ではカスタマイズも考慮された多彩なテンプレートが公開されています。

HTML5 UP!の主なテンプレート

HTML5 UP!では全部で21種類のテンプレートが登録されています。今回はその中から幾つか紹介します。

こちらは画面全体に表示されます。スクロールなしです。
こちらは画面全体に表示されます。スクロールなしです。

Twentyというテンプレートです。
Twentyというテンプレートです。

基本的に文字とアイコンなのでカスタマイズが容易です。
基本的に文字とアイコンなのでカスタマイズが容易です。

こういうのも使いどころが多そうですよね。
こういうのも使いどころが多そうですよね。

フッターにはアイコンも。
フッターにはアイコンも。

minimaxing。
minimaxing。

Halcyonic。
Halcyonic。

Arcana。
Arcana。

Zerofour。
Zerofour。

Txt。
Txt。

Dopetrope。
Dopetrope。

Astral。
Astral。

全てレスポンシブ対応です。
全てレスポンシブ対応です。

テンプレートによるかも知れませんが、幅を変更した時にフレキシブルに対応するのではなく、JavaScriptで表示を切り替えている場合もあります。向きを変更した時にはうまく表示できないケースもありそうなのでご注意ください。

サイト全体はもちろん、シングルページWebアプリケーションなどに使うと効果的かも知れません。

HTML5 UP!はHTML5/CSS3/JavaScript製、Creative Commonsのオープンソース・ソフトウェアです。

HTML5 UP! Responsive HTML5 and CSS3 Site Templates

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2