2カラムのサンプルを色々作ってみました。
事の発端は、Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!を見ててですが、こういうレイアウトサンプルサイトは色々あって、P O P * P O Pさんでも紹介されていますね。
IE7もサポートしているCSSレイアウトがダウンロードし放題の『CSS Layouts』 | P O P * P O P
http://www.popxpop.com/archives/2007/04/ie7csscss_layouts.html
で、まぁ日本語のサイトがあんまり無いっていうのと、どーにもこーにも使い勝手が悪い気がしてならないので、自分が使いやすいだろう2カラムのサンプルを作ったという訳です。
細かく作っていけば限りなく出来るけど、13種作ったら疲れました。
11からは既にネタ切れ感が無きにしも非ず・・・
次は3カラムも色々つくろうかなーとか思ってます。
ってことで作りました。
3カラムサンプル18種
---- こっから続き
仕様っぽいことと注意事項っぽいこと
DOCTYPEは XHTML 1.0 Strict で文字コードは utf-8 で、XML宣言はしておりません。
表示確認は、IE6とFirefox2でおこなってます。
IE5xは対応してません。仕様です。
主流ブラウザだったら大半は問題ないと思いますが、崩れているサンプルは教えてくれると嬉しいです。
このサンプルを使うことの一切の制限が無いです。
人に配ろうが、どうカスタマイズしようが、商用だろうが、何に使うのもご自由です。
ウチから拾ってきたとかって紹介や、リンクも不要です。
その代わりという訳ではないですが、このサンプルを使ったことで何らかの問題等が発生しても一切の保障やら責任は負いません。
あ、紹介やリンク、ブクマとかは不要だけどしてくれたら嬉しいっす。
2カラムサンプル一覧
2カラムサンプル全て
Sample 01
- ネガティブマージン。メニュー左
- Sample 01 ダウンロード（zip）
Sample 02
- ネガティブマージン。メニュー右
- Sample 02 ダウンロード（zip）
Sample 03
- 固定幅、センタリング、メニュー右、背景繰り返し
- Sample 03 ダウンロード（zip）
Sample 04
- 固定幅、センタリング、メニュー左、背景繰り返し
- Sample 04 ダウンロード（zip）
Sample 05
- 固定幅、センタリング、メニュー左、背景繰り返し指定無し
- Sample 05 ダウンロード（zip）
Sample 06
- 固定幅、センタリング、メニュー右、背景繰り返し指定無し
- Sample 06 ダウンロード（zip）
Sample 07
- エラスティックレイアウト、センタリング、メニュー右
- Sample 07 ダウンロード（zip）
Sample 08
- エラスティックレイアウト、センタリング、メニュー右、背景無理やり繰り返しているように（サイドより本文の方が高さが有る場合のみ）
- Sample 08 ダウンロード（zip）
Sample 09
- エラスティックレイアウト、センタリング、メニュー左
- Sample 09 ダウンロード（zip）
Sample 10
- エラスティックレイアウト、センタリング、メニュー左、背景無理やり繰り返しているように（サイドより本文の方が高さが有る場合のみ）
- Sample 10 ダウンロード（zip）
Sample 11
- 固定幅、センタリング、メニュー右、背景繰り返し、サイドがヘッダーに重なる
- Sample 11 ダウンロード（zip）
Sample 12
- 固定幅、センタリング、メニュー右、背景繰り返し、ヘッダー、フッター横幅100%
- Sample 12 ダウンロード（zip）
Sample 13
- 可変、メニュー右、ヘッダー、フッター横幅100%
- Sample 13 ダウンロード（zip）
- 各種SBMに追加
-
Track Back [1]
「nJOY BLOG」模様替え
あまり気付いている人はいないと思うけれど、先日「nJOY BLOG」を動かしているブログスクリプトを変えました。今まで「Blogn（ぶろぐん）」を使ってい...
by nJOY BLOG｜2008年09月06日（土）
comment [12]
1 - あのにまうす さん
グッジョブ！
2007年7月 2日 09:00
2 - novo さん
どうも、コーディングコンテストに参加したnovoです。
CBRは元気ですか？
奇遇にも、つい最近（サンプル的な）ベーシックテンプレートをサイトで公開したもんですから、コメントしました。
横幅固定，リキッド，エラスティックの3種類で、それぞれ3カラムを3つ、2カラムを2つの計15種類作りました。
XHTML1.0 Strictで、共通のHTMLファイルを使用しています。
平澤さんのソースと比べると、考え方の違いがはっきりしてて面白いです。
URL｜2007年7月 6日 03:05
3 - hira@管理人 さん
>あのにまうす さん
どうもー
>novoさん
コンテストご参加ありがとうございます。
サンプル見てきました。
確かにまったく違いますね～
おもしろいです。
2007年7月 6日 09:13
4 - hira@管理人 さん
>novoさん
あ、CBRは元気ないかもです。
タイヤ変えたり色々してあげないと・・・
夏のロングツーリングが待ってる！
2007年7月 6日 09:15
5 - novo さん
自分のRVFは深い眠りについてます。
バッテリーが完全に死んでいて、走りがけもできません。
いい季節なのに・・・。今は専ら、自分の足とチャリがたよりです。
PS.少し遅れましたが本の出版おめでとうございます。そしてロングツーリング、腕と腰に注意してくださいね。セパハンはつかれますから。
URL｜2007年7月 7日 12:57
6 - ひら＠管理人 さん
>novoさん
あらら、もったいない。せっかくの名車が！
今の季節走れないときついっすね；
psRe：
ありがとうございます！
RVFよりはまだポジションが楽ですけど、モノがモノだけに腕も腰もやばいことになりそうです。。
2007年7月 8日 02:30
7 - ゆーすけ さん
ひらさわ師匠、お教え下さい！
この2カラムサンプル13種はMacIEに未対応なようですが、僕がこれからつくるサイトってMacIEに未対応でも問題ないですかね。
ひらさわ師匠のお考えを聞かせてください。
2007年8月21日 19:12
8 - hira@管理人 さん
>ゆーすけさん
師匠はちょっと、やめてください（苦笑
どのような用途で作成するかですね。
ぼくの考えとしては基本的に問題ないと思ってます。
2007年8月24日 08:48
9 - ゆーすけ さん
ひらさわ店長ありがとうございます。
聞いといて何なんですがMacIEでも見れるようにしようと思います。そんな難しくないと思うので。。たぶん。
いろいろなサイトをMacIEで見たんですが対応してるサイトが結構多いことにビックリしました。MacIE対応でコーディングなんてもうこれから先出来なくなると思うので最後の思い出に。
2007年8月24日 12:08
10 - かっぺ さん
使わせて頂きます。ありがたやありがたや
2007年10月10日 00:07
11 - Mei さん
はじめまして。
サイト作成時にはいつも参考にさせていただいています。
Sample12をお借りしたのですが、
なぜかNS7だけコンテンツ部分が表示されませんでした。
一応報告させていただきます。
2008年11月28日 14:19
12 - hirasawa さん
>Meiさん
はじめまして。
報告ありがとうございます。
NS7は完全に対象ブラウザから外しているので、おかしいのかと思います。
対象ブラウザに入れる場合は、ご自身で頑張っていただければと思います。
URL｜2008年11月28日 17:02