Fixed – WebTecNote

[MooTools] border-radiusの簡単なIE対策

角丸にする既存ライブラリは色々あるけどHTML5対応してなかったり配置が崩れたりで、もう面倒だから四隅にspan置いて背景指定すればいいわ…と思って作ったクラス。角丸にしたい対象を指定すると、その要素内に次のようなs […]

ちょっとテクニカルなレイアウトのWebサイトテンプレート。このテンプレートは１カラムレイアウトで、slideBox.jsでスクロールバーをカスタマイズしています。秋用に作ったテーマです。

メインビジュアルをヘッダー直下に置き、その下にナビゲーション、さらにその下を２カラムに分割して、左側にメニュー、右側にコンテンツを配置したレイアウト。メニューが多くなりがちな商業サイトでよく採用されている。

ちょっとテクニカルなレイアウトのWebサイトテンプレート。コンテンツ少なめの個人サイトやブログ向け。フォントサイズは10px前後で固定、表示エリアもかなりコンパクトです。White x Gray。

ちょっとテクニカルなレイアウトのWebサイトテンプレート。コンテンツ少なめの個人サイトやブログ向け。フォントサイズは10px前後で固定、表示エリアもかなりコンパクトです。Black x Aqua。

ちょっとテクニカルなレイアウトのWebサイトテンプレートその３。中身は基本的なXHTMLとCSSだけで、メニューとレイアウト要素以外は入っていません。このテンプレートは上にタブメニュー、中央にメインビジュアル用のwi […]

ちょっとテクニカルなレイアウトのWebサイトテンプレート。このテンプレートは上にタブっぽいメニューがある１カラム構成で、ロールオーバーとカレントページのタブのスタイル変更はjavascriptを使用しています。

３カラム。観音開きっぽいレイアウト。

positionとfloatの合わせ技。IEでのバグ対策が最大のポイントか・・。

position:absoluteでメニューを浮かせてあります。実用性は低いかも。

position:absoluteを使ったレイアウト。#contentの高さが出ないレイアウトには不向き。

Float使用、横幅固定で中央寄せ。コンテンツの量が少ないサイト向き。

コンテンツの下にサブエリアが左右に並ぶレイアウト。

１カラム４BOXのレイアウトテンプレート。xml宣言ありの中央配置サンプルにも。