CSSレイアウトテーマのrigid版のデフォルトとして作ってみました。
ラッパーが一つで済む、さらにコラムの並びをfloatではなくinlineで表現したので内部にコンテナーを配する必要がない、など、文書構造上無意味なラッパーdivを極小化することができます。3つのコラムの高さが如何様に上下してもフッタがきちんと納まるという点では汎用性の高いテーマといえるでしょう。
ただし、
- センターの左右ブロックを使う場合はラッパーが避けられません(当然ですが)
- デフォルトでは、デモする上で各ブロックやモジュールコンテンツ部分を視覚的に明確にするため、各カラムやブロックに10pxのmarginを持たせています
- カラムの背景は画像で表示します。1ー3カラムに応じて最高4つの背景画を用意する必要がありますが、ごくシンプルな構造が得られるメリットの代償としては安いものでしょう。
今回は横840px固定タイプのものを公開します。
ソースオーダーはもちろんコンテンツファースト。ヘッダ、中央、左、右、フッタの順になっています。
(absolute positionを用いれば、ヘッダあるいは水平ナビなどのサブヘッダ類を最後に置いた完全コンテンツファーストの実現も可能です)
特徴- CSSレイアウト
- コンテンツファースト
- xoops用コラムには全て対応(柱1本も可能)
- 文書構造上無意味なラッパーがない
- セレクタ名などに工夫などすれば、アクセスビリティ対策用テーマとして有効
- モバイルをのぞきほぼすべてのブラウザに対応
- 4系ブラウザ用cssファイルあり
- 印刷用cssファイルあり
制約- ieではcontainerの下にmarginが働きません
- サイドカラムに背景色を設定する場合画像を必要とします。これは見た目上3カラムとも同じ高さになるようフェイクするためであり、フッタが一番下に納めるための策でもあります。同じ3colでrigidタイプで背景画像を必要としないのは
3col_rigid_baseです。
ChangeLog[v0.1.4 2007.4.16]
- IE以外にはxml宣言追加
- パンくずのスタイルサンプル追加
[v0.1.3 2007.4.14]
- fixed for IE7
[v0.1.2 2006.6.5]
- fixed illegal meta_author description
- fixed a bad order of importing css files
[v0.1.1 2006.1.18]
- fixed the centralized body position bug in case showing a pop-up screen
[v0.1 2006.1.17]
- テスト版レリース