yossy's Log » XHTML + CSS http://yossysan.net 渋谷ランチや男の一人暮らし料理といった食生活の話題、そしてたまにXHTML＋CSSやFlashの話題まで。 Thu, 13 May 2010 15:30:06 +0000 ja hourly 1 http://wordpress.org/?v=3.2.1 DD_belatedPNG.js を試してみた http://yossysan.net/2010/01/2097/ http://yossysan.net/2010/01/2097/#comments Tue, 26 Jan 2010 09:34:29 +0000 yossy http://yossysan.net/?p=2097 Webに携わっている者ならほぼ100%消えて欲しいと思っているであろうIE6。
理由は様々ですが、デザイナー・コーダーから見てよくある問題の一つに「”透過PNG”が使えない」ということがあるかと思います。
この問題を解決させる方法の中で、現在「”DD_belatedPNG.js”が熱い！！」とのことなので試してみました。

当然のことながら、IE6で見ると幸せになります。
今回は次のことを試してみました。

  • 透過PNGを背景としてX軸にリピート
  • その上に5枚の透過PNG雲画像を重ねる
  • jQueryを使って透過PNG雲画像雲をアニメーションさせる

これくらいなら実用に耐えそうですね。
ちょっと使ってるマシンスペックがそこそこいいのでよく分かりませんが、低スペックなマシンだとどう見えるんでしょうか。
透過PNGが自由に使えたら夢がひろがりんぐですね。

次のサイトを参考にさせて頂きました。

]]> http://yossysan.net/2010/01/2097/feed/ 1 ウィンドウを縮めた際にwidth:100%の要素が消えてしまう時の対処法 http://yossysan.net/2008/10/1775/ http://yossysan.net/2008/10/1775/#comments Fri, 17 Oct 2008 11:11:53 +0000 yossy http://yossysan.net/?p=1775 このBlogの説明文に「渋谷ランチや男の一人暮らし料理といった食生活の話題、そしてたまにXHTML＋CSSやFlashの話題まで。」なんて書いておいて、初めてのXHTML+CSS関連のエントリーです（笑

ウィンドウを縮めた際の表示

まずは上の画像をご覧ください。こんなことないですか？
具体的には次のような状況の時に起きます。

  • "header"、"content"、"footer"と3分割でレイアウトされている。
  • "header"、"footer"はwidth:100%（特に明示はしない）である。
  • "content"内の要素はwidthが固定されている。
  • 前述の状態でウィンドウの表示領域幅が"content"を下回り、横スクロールバーを右にスライドさせると"header"、"footer"が途切れてしまう。

HTMLサンプル

僕はありまくりでどうしようもないのかなぁと常々思っておりましたがようやく解決できました。

まずソースは次の通り。

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>min-width test</title>
<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #38302d;
}

#header {
	background-color: #7e6b5a;
	border-bottom: 1px solid #59493f;
	color: #fff;
	padding: 5px;
}

#content {
	background-color: #f1ece4;
	padding: 20px 0;
}

#main {
	background-color: #fff;
	border: 1px solid #7e6b5a;
	margin: 0 auto;
	padding: 10px;
	width: 780px;
}

#footer {
	background-image: url("img/min_width_footer.gif");
	background-repeat: repeat-x;
	color: #fff;
	padding-top: 60px;
	text-align: center;
}
-->
</style>
</head>

<body>
	<div id="header">
		<p>HEADER</p>
	</div>
	<div id="content">
		<div id="main">
			<p>CONTENT WIDTH:800px</p>
		</div>
	</div>
	<div id="footer">
		<p>FOOTER</p>
	</div>
</body>
</html>

#mainでwidth: 780px;となっているのは、padding: 10px;しているので左右に10pxずつ足され、合計で800pxになるということですね。

で、結論から言うとbodyにmin-widthを指定することで解決できました。

    
body {
	background-color: #38302d;
	min-width: 820px;
}

820pxとなっているのは縮んだ際にも左右にマージンを取って欲しかったからです。
サンプルのHTMLは下のリンクからどうぞ。

HTMLサンプル

どうでしょう？各ブラウザ検証はまだやっていないのですが、たぶん大丈夫なのではないかと。
IE6？何それ？？（笑

]]> http://yossysan.net/2008/10/1775/feed/ 0