Web Site

SiteTemplate07:Autumn Lovely

2008/12/16 Web Site No comments , , , ,

ちょっとテクニカルなレイアウトのWebサイトテンプレート。
時期ハズレの秋用テーマです…

このテンプレートは1カラムの固定レイアウトで、slideBoxを使用してスクロールバーをカスタマイズしています。
元々ブログ用に作ったものなので、普通のサイトだと使いづらいかもしれません。
コンテンツのスライドはslideBox.js ver1.0を改変してマウスホイール対応にさせてます。
詳しくはこちらの記事を参照»[mootools]slideBox ver1.0をマウスホイールに対応させる
下方向の処理は手抜いてるので普通にスクロールバー出した方がいいかも。

トップページでコンテンツを非表示にするスクリプトと、
マウスオーバーで一言コメント表示するToolTipも仕込んであります

フォントサイズ指定はYUIのやつ使ってます。

SiteTemplate07:Autumn Lovely

  • 1Columun 2BOX
  • XML宣言あり
  • ドキュメントタイプ:XHTML 1.0 Transitional
  • 文字コード:UTF-8

(さらに…)

SiteTemplate06: PhantomWhite

2008/11/11 Web Site No comments , , , ,

ちょっとテクニカルなレイアウトのWebサイトテンプレート。
個人サイト或いはブログ向けの2カラム固定幅レイアウト。色違いの黒もあります。

半透明の背景、PNG24のタイトル画像、オーバーフローによる擬似フレーム。
ページを開いた際に一時的にコンテンツを隠すカバーと、別ページにジャンプするときにダイアログ出すスクリプトが入れてあります。
フォントサイズ指定はYUIのやつ使ってます。
Divまみれなので変更はしづらいかもしれない。

SiteTemplate06

  • 2Columun 2BOX(irregular)
  • XML宣言あり
  • ドキュメントタイプ:XHTML 1.0 Transitional
  • 文字コード:UTF-8

(さらに…)

SiteTemplate05: PhantomBlack

2008/11/11 Web Site No comments , , , ,

ちょっとテクニカルなレイアウトのWebサイトテンプレート。
個人サイト或いはブログ向けの2カラム固定幅レイアウト。色違いの白もあります。

半透明の背景、PNG24のタイトル画像、オーバーフローによる擬似フレーム。
ページを開いた際に一時的にコンテンツを隠すカバーと、別ページにジャンプするときにダイアログ出すスクリプトが入れてあります。
フォントサイズ指定はYUIのやつ使ってます。
Divまみれなので変更はしづらいかもしれない。

SiteTemplate05

  • 2Columun 2BOX(irregular)
  • XML宣言あり
  • ドキュメントタイプ:XHTML 1.0 Transitional
  • 文字コード:UTF-8

(さらに…)

SiteTemplate03:2Column 5box CenterVisual&TabMenu

2008/06/03 Web Site 1 comment , , , ,

ちょっとテクニカルなレイアウトのWebサイトテンプレートその3。
中身は基本的なXHTMLとCSSだけで、メニューとレイアウト要素以外は入っていません。

このテンプレートは上にタブメニュー、中央にメインビジュアル用のwidth:100%ブロックがある2カラム構成で、タブが上に動くアクションはCSSでやっています。
並び順は上から、ヘッダ(メニュー)»ビジュアル»コンテンツ»サイドバー»フッタ。
フォントサイズ指定はYUIのやつ使ってます。

SiteTemplate03
このテンプレートには、使用しているボタン・コンテンツタイトル画像のpdfファイルが添付してあります。

▼所謂Web2.0っていう感じのやつ
SampleButton

  • 2Columun 5BOX
  • XML宣言あり
  • ドキュメントタイプ:XHTML 1.0 Transitional
  • 文字コード:UTF-8

(さらに…)

SiteTemplate02: 2-3Columun 4-5BOX BlogStyle

2008/05/30 Web Site No comments , , , ,

ちょっとテクニカルなレイアウトのWebサイトテンプレートその2。
中身は基本的なXHTMLとCSSだけで、メニューとレイアウト要素以外は入っていません。

このテンプレートはブログによくあるトップのみ3カラム、中が2カラムの構成で、ヘッダとフッタが横100%に見えるように作ってあります。
コンテンツ・サイドバーの量が多くなるのを想定した作りなので、中身が少ないとフッタが下にピッタリくっつきません。
We
並び順は上から、ヘッダ»グローバルメニュー»コンテンツ»サイドバー»フッタ。
フォントサイズ指定はYUIのやつ使ってます。
CSSのフィルタリングで使用しているif文については、IEのみに適用させるIFで解説しています。

SiteTemplate02

  • 2-3Columun 4-5BOX
  • XML宣言あり
  • ドキュメントタイプ:XHTML 1.0 Transitional
  • 文字コード:UTF-8

(さらに…)