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エレメントはウェブページでよく使用されるものが揃っています。

サイトのキャプチャ

ボタン

サイトのキャプチャ

検索フィールド

サイトのキャプチャ

タブ

サイトのキャプチャ

メニュー

サイトのキャプチャ

ログインボックス

サイトのキャプチャ

テーブル

サイトのキャプチャ

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

[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エレメントの利用にあたっては、個人でも商用でも無料とのことです。

sponsors

top of page

©2018 coliss