HTML5+CSS3で実装された、さまざまなUIエレメントのコレクション

ウェブページでよく使用されるUIエレメントをHTML5+CSS3で実装した「A Hand-Coded Designer CSS UI Kit」を紹介します。

A Hand-Coded Designer CSS UI Kit
HTML5+CSS3 UIキットのページ

[ad#ad-2]

• HTML5+CSS3で実装されたUIパーツの一覧
• UIパーツの使い方

HTML5+CSS3で実装されたUIパーツの一覧

UIエレメントはウェブページでよく使用されるものが揃っています。

ボタン

検索フィールド

タブ

メニュー

ログインボックス

テーブル

パラグラフ・リスト・見出しなど

[ad#ad-2]

UIパーツの使い方

下記の3つのステップで、これらのUIを自分のページで利用できます。

IEへの対応

IEにHTML5を理解させるために、2つの重要なファイルを使用します。

<!--&#91;if IE&#93;>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" href="ie.css" type="text/css" />
<!&#91;endif&#93;-->

CSSのインクルード

スタイルシートファイルをインクルードしてください。もし使用するエレメントが限られているのであれば、その箇所のみで大丈夫です。

<link rel="stylesheet" href="reset.css" type="text/css" />
<link rel="stylesheet" href="ml-css-ui-kit.css" type="text/css" />

HTMLの挿入

使用したいエレメントのHTMLをあなたのファイルに記述します。
例：ボタン

<div class="button-wrapper">
	<a href="#" class="button light">Lorem ipsum</a>
</div>

これらのUIエレメントの利用にあたっては、個人でも商用でも無料とのことです。