HTML5, CSS3, jQueryを使用したフロントエンド開発用のフレームワーク -G5 Framework

IE6対策、角丸やボタンなどCSS3の人気のスタイル、jQueryベースの便利なスクリプト、SEO、グリッドレイアウトなどウェブサイトでよく利用される機能が用意された、フロントエンドを開発するためのフレームワークを紹介します。

HTML5 Front End Development Framework -G5
デモページ

[ad#ad-2]

ページレイアウトに使用するグリッドは、幅、溝、パディングなどすべての単位に%を使用し、柔軟なデザインを設計できます。

グリッドのサンプル

G5 Frameworkの主な特徴

SEO

• 検索エンジン用のrobots.txt
• .htaccessによるcanonicalタグの設定
• ネガティブマージンを使用した非表示用のclass
• より早いページロードのためのgzip

CSS

• CSSのキャッシュ対策
• クロスブラウザ対応の角丸、ボックスシャドウ、不透明
• ショートハンドCSS、再利用可能なclass
• ページ下部に固定表示されるSticky Footer

CSS（Reset関連）

• リセットはHTML5ベースのEric Meyer's Reset Reloaded
• フォントのノーマライゼーション
• Webkit系ブラウザのフォントのスムージング
• フォーススクロールバー
• ラベルの一列化
• クリック可能なインプット要素
• スクリーンリーダー対応
• IE7のイメージリサイジング
• 印刷時のスタイル

X(HTML)

• クリーンなコード構造
• コンテンツ幅は940px
• F型レイアウト
• 古いバージョンのIEからイメージツールバーの削除
• 最新のIEのレンダリングエンジン

jQuery

• jQuey 1.5.2ベース（1.4.4も可）
• ページ上部へスムーズにスクロール
• HTML5のプレースホルダー機能
• ナビゲーション　最後のアイテムからマージンを削除
• 最後のパラグラフからボタンのパディングを削除

PHP

• ナビゲーションのアクティブなアイテムにclassを追加
• gzipページ

[ad#ad-2]

G5 Frameworkの同梱リソース

G5 Frameworkでは便利なリソースが含まれた状態でダウンロードできます。

• Modernizr
  ブラウザが対応していないCSSのプロパティを使用した際に、classを追加します。
• Eric Meyer's Reset Reloaded
  ブラウザのスタイルをリセットします。
• jQuery 1.5.2
  ページにさまざまな機能をを実装するスクリプト。
• CSS3 PIE
  IE6-8でもCSS3のプロパティが利用できるようにします。
• CSS3 Buttons
  CSS3グラデーションを使用したボタン。
• Easy Grid
  数値の単位に%を使用したグリッド。
• IE6 Update
  IE6で閲覧時にアップデートを促します。
• Tipsy Tool Tips
  Facebookスタイルのツールチップ。
• Rebeal Modals
  アニメーションで動作するモーダルボックス。
• Orbit Image Slider
  超軽量のイメージスライダー。