hodakaの居場所

トップ  >  CSSレイアウトテーマBasic
 このカテゴリには 3 件のファイルがあります  |  表示数   |  
ソート順  タイトル () 掲載日 () 評価 () ダウンロード数 ()
現在のソート順: タイトル(Z→A)

カテゴリ CSSレイアウトテーマBasic
3col_rigid_default 人気ダウンロード情報
掲載日:  2012/12/7
説明
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]
- テスト版レリース

[ ファイル名 ] 3col_rigid_default.zip [ MD5 checksum ] 9c50020ecb4bf849c7e5c88d8e398be0
ダウンロード数 137   ファイルサイズ 12.84 KB   利用可能なOS/ソフト等 Xoops 2.0x| | XOOPS Cube Legacy 2.1.x、2.2.x   ホームページ hodakaの居場所
評価 0 (0 票)
評価する  | ファイル破損/リンク切れを報告 |  友達に伝える |  詳細な説明を見る

カテゴリ CSSレイアウトテーマBasic
3col_rigid_base
掲載日:  2012/9/23
説明
CSSレイアウトテーマのrigid版デフォルト3col_rigid_defaultに対して、左右カラムの背景画像を不要にしたものを公開します。サイドカラムの長さコントロールが簡単になった反面、構造的に無用なラッパーが出てしまいました。
また、技術的にはマイナスmarginを用いるためカスタマイズには多少の知識が必要です。特に各カラムにボーダーを引く場合は明らかにIEバグ対策が入るので面倒なことになります。

今回は横幅840px固定タイプのものを公開します。
ソースオーダーはヘッダ、中央、左、右、フッタの順になっています。
(absolute positionを用いれば、ヘッダあるいは水平ナビなどのサブヘッダ類を最後に置いた完全コンテンツファーストが実現できます)

特徴
- CSSレイアウト
- コンテンツファースト
- xoops用コラムには全て対応(柱1本も可能)
- 文書構造上無意味なラッパーを少なくできる
- モバイルをのぞきほぼすべてのブラウザに対応
- 4系ブラウザ用cssファイルあり
- 印刷用cssファイルあり

制約

ChangeLog
[v0.1.1 2007.4.16]
- IE以外にxml宣言追加
- パンくずのスタイルサンプル追加
[v0.1 2007.4.14]
- レリース

[ ファイル名 ] 3col_rigid_base.zip [ MD5 checksum ] 402b066c0907680df7c9f1aa6ec836b7
ダウンロード数 66   ファイルサイズ 12.74 KB   利用可能なOS/ソフト等 Xoops 2.0x| | XOOPS Cube Legacy 2.1.x、2.2.x   ホームページ hodakaの居場所
評価 0 (0 票)
評価する  | ファイル破損/リンク切れを報告 |  友達に伝える |  詳細な説明を見る

カテゴリ CSSレイアウトテーマBasic
3col_liquid_default
掲載日:  2012/9/23
説明
旧名full_flex_1。
CSSレイアウトテーマ(liquidタイプ)のデフォルトとして作ってみました。
構造のベースとしてcssレイアウトの聖地positioniseverythingの新記事「The Jello Mold Piefecta Layout」を採用しております。
これは、大変な優れもので、
・昨今のブラウザ大型化時代に対応して、max/min-widthを自在にコントロールできる
・したがってブラウザを極小に縮めてもセンターがつぶれない
・liquid、rigidどちらも対応可能
・Xブラウザを考える上でハックも最小に抑えられる
などの特徴をもっており、非固定型コンテンツファースト・テーマのデフォルトと考えてよく、非常に応用範囲の広いものです。

今回は旧来のdeafultテーマに似せて、横幅最大1024px、最小750pxタイプのものを公開します。
ソースオーダーはヘッダ、中央、左、右、フッタの順になっています。
横幅1024px以上のブラウザでは、中央1024px幅で表示します。
最近でかいブラウザが増えてきたので、必要以上に広がらないようにしてみました。
IEでもjavascriptを使わずにmax-width、min-widthが有効になるようになっています。
min-widthは750pxです。それ以下になると横スクロールバーが出現します。
*幅の調整(max/minサイズ)はわずか数行の変更でどうにでもなります。ただし完全固定にする場合は、入れ子が複雑に絡む分3col_rigid_defaultまたは3col_default_baseのシンプルさにはとうてい敵いません。使用を避けてください。

特徴
CSSレイアウト
コンテンツファースト
max-width&min-width対応
xoops用コラムには全て対応(柱1本も可能)
モバイルをのぞきほぼすべてのブラウザに対応
4系ブラウザ用cssファイルあり
印刷用cssファイルあり

詳細な解説
解説ページをxoops関連TIPS集のCSSレイアウトカテゴリーに書いていきますので参考にしてください。

CHANGE LOG
[v0.1.4 2007.4.16]
- IE以外にはxml宣言追加
- パンくずのスタイルサンプル追加
[v0.1.3 2007.4.14]
- IE7登場のためIE用スタイルシートstyleIE.cssに手を入れた。
[v0.1.2 2005.10.5]
- Geckoの古いバージョン対策(悔しいけどjavascriptを使います)
[v0.1.1 2005.10.1]
- misc.phpなどポップアップ画面で、全幅サイズが適用されるバグを解消

[ ファイル名 ] 3col_liquid_default.zip [ MD5 checksum ] a876c86de7cfc06327f9ae39aa0e3730
ダウンロード数 83   ファイルサイズ 13.02 KB   利用可能なOS/ソフト等 Xoops 2.0x| | XOOPS Cube Legacy 2.1.x、2.2.x   ライセンス GPL v. 1.0   ホームページ hodakaの居場所
評価 0 (0 票)
評価する  | ファイル破損/リンク切れを報告 |  友達に伝える |  詳細な説明を見る



ログイン


ユーザー名:


パスワード:





パスワード紛失