CSSテクニックコミュのフルスタイルシートでのスライス

現在、フルスタイルシートでサイトを制作しようと思っているのですが、デザインを考えたまではいいのですが、画像のスライスをどうしようか悩んでます。

下記URLがデザインのイメージ画像です。
http://groa.under.jp/portfolio0310/test001.html

構造は…普通に横への段組無しで
header
contents
footer
にするつもりです。
とは言っても左下にカレンダーを置きたいので2段組になりますよね…

一番したの芝の画像はブラウザの左端から右端まで伸ばすつもりです。

こんな説明で申し訳ありませんが、なるべく無駄な画像までを使いたくないでの、何かいい方法あれば教えて下さい。

早くIEでも透明なPNGが使えればいいのに。。。

コメント(3)

最初
全て
最新の40件

[1] mixiユーザー 03月12日 16:06

個人的には、どうやったらデザインを生かしたままアクセシビリティとValidなHTMLとCSSを組めるかが楽しいところなので、その楽しみを奪ってしまうのは惜しいのですが、こんな感じはどうでしょうか？

HTMLは、

header
　(navigation)
colender
content
footer

の順で書いて、CSSで画像のようにレイアウト(やっぱり2段組み避けられないかも)。

ただ、自分の知識では高さが可変するcontentに合わせてカレンダー部分の位置を変える方法を知らないので(text-indent:left/right; みたいに下揃えって出来ましたっけ？)、ご存知の方教えていただけるとうれしいです。

次に画像のスライス。
heaer部分は、1枚目の画像とはやや矛盾がありますが、navigationを除き、contentの上の枠までを1枚の画像にして、headerの背景画像にし、navigationは画像の置き換えトピ( http://mixi.jp/view_bbs.pl?id=5105843&comm_id=15544 )のように配置。
花は(あんまりやりたくないのですが)空の<span></span>をどこかに作って、絶対配置で位置を調節して透過pngを背景画像。IEでも、フィルターで透過させることが出来るので、それを使うのが現状ではベターかと思います。
最後の地面は、bodyの背景画像をrepeat-y(？)で横方向にリピートして、下に配置(bottom)で良いかと。

不確かな記憶を頼りに書いているので、誤りがあるかもしれませんが、そのときはご指摘ください。

[2] mixiユーザー 03月12日 19:09

>Satoさん
分かりやすい画像まで作って頂き有難う御座います。

contentの部分は花の絵があるので1枚の画像で書き出した方がいいですかね？

[3] mixiユーザー 03月12日 19:56

「花だけ」と背景を別々に書き出して、花のほうを絶対配置でその位置に移動させれば可能かと思います。

//IE6でも、アルファチャンネルを使わないpngなら透過させることは出来ます(透過gifのような表示になる)。それなら、フィルタ使わずにも何とかなるかもしれません。

//1で、カレンダーのスペルが普通に間違ってました。calendarですね。恥ずかしー。

ログインすると、みんなのコメントがもっと見れるよ