CSS で div 要素の高さ（height）を 100% にしてブラウザ・ウィンドウの高さ一杯（ページ一杯）に背景色（background-color）やボーダー（border）を適用させるための Tips。

ページ内のコンテンツが少なく、でも背景やボーダー（枠線）はページの一番下まで表示させたい時がありますよね。

デザインにもよると思いますが、必要なモノが足りていないのは寸足らずのパンツのように格好良いモノではありません。

ビジネスマン（営業マン）のスーツが七分丈では、まとまる商談もこじれてしまう可能性だってあります。

七分丈ならまだしも、膝小僧丸出しの、わんぱくそうなビジネスマンに大きな仕事を任せられるでしょうか？

そのビジネスマンが一見わんぱくそうに見えて、実は仕事は滅茶苦茶出来る方だったとしても、ホットパンツでは出世も遅れるはずです。

外見より中身が重要なのは、人もWebページも一緒だと思うのですが、外見だって大切だと思うのです。

このページをご覧頂いている方には、どうか商談中にホットパンツの端から金の玉をチラつかせるようなわんぱく過ぎるビジネスマン、もとい寸足らずな Web ページを作らない Web 制作者であって欲しいと切に願っています。

コンテンツ量に関わらず、ブラウザ・ウィンドウの下まで、しっかりと背景や罫線を表示させたい方は続きをどうぞ。

続きを読む ≫

CSS の覚え書き。

お仕事中、background プロパティで指定した背景色と背景画像が、ネットスケープ（Netscape）だけ表示されない状況に遭遇。

他のブラウザでは何も問題なく表示されているのに、ネスケだけ background プロパティの指定が適用されていない。

今回の解決策は

background : url(image/hoge.gif) 10px center no-repeat #eee;

上の赤いソース部分 center を

background : url(image/hoge.gif) 10px 5px no-repeat #eee;

上のように、実数値の指定（5px）に修正すると、ネットスケープでも背景色と背景画像が無事表示される♪

●結論
ネットスケープだけに無視されている時はプロパティの値を統一すると吉かも。

今日は定義リスト（dl タグ）内の dt と dd タグを CSS で横に並べる方法です。

いつも dt と dd を CSS で並べようとした時に『さてさて・・・はて？』となり、CSS の専門書から同じページを開いているような気がしたのでメモ。

続きを読む ≫

当ブログで配布中のテンプレート「h007-3middle」をカスタマイズ中の方から以下のご質問を頂きました。

右サイドバーは問題なくテーブルリンクになってますが、左サイドバーは通常のリンク（文字にポイントして指マークが出るリンク）になってしまいます。

上記のご質問の不具合は Windows の IE6 で確認でき、発生条件はテンプレートの記事部分の拡張カスタマイズと併せ、サイドバーの背景色、フォントサイズ、記事のタイトル部分の装飾などなど、多岐に及んでいますので、必ずしもテンプレートをカスタマイズした時に IE6 で発生するとは断言できません。今回、原因の追究を数日間試みていたのですが、残念ながらはっきりとした答えは見つかりませんでした。

しかし、原因（おそらく IE6 のバグ）は分りませんでしたが、解決策は発見できましたので、上記のご質問と似たような症状が発生した際は以下の解決方法をお試しください。

今回の解決方法を適用後 Mac と Windows のモダンブラウザで確認しましたが他の要素への悪影響はありませんでした。

また、Web 制作者の方も IE6 において display:block させた a 要素の挙動が不安定な時に覚えておいて損のない Tips（小技）だと思いますので、宜しければ続きをどうぞ。

続きを読む ≫

Windows の IE6 に CSS で float を指定した際、その float 指定した要素の親要素に指定された左右の border が消えるバグがあるようです。

私が上記のバグに気が付いたのは ul 要素内の li 要素を並列させる為に、li 要素に float:left; と指定しボタンを作成した時に気が付きました。
以下、その時のサンプルソースです。（※ボタンは３つを並列させているとお考えください。）

ul {
	width : 99%;/* IE6 の為に指定 */
	text-align : center;
	list-style-position : inside;
	border-left : solid 1px #ccc;
	overflow : auto;
}

ul li {
	float : left;
	width : 33%;
	height : 30px;
	line-height : 30px;
	list-style-type : none;
	border-top : solid 1px #ccc;
	border-bottom : solid 1px #ccc;
	border-right : solid 1px #ccc;
}

上のソースの赤い部分のように、親要素に width を指定すると border が表示されます。

ちなみに IE7 では親要素に width を指定しなくても border は表示されていました。

●結論
IE6 の親は子供が浮かれると甘くなりがち。