はじめてのブログデザイン

ホームページ制作の経験を活かしてブログテンプレートのデザインに挑戦!

スポンサーサイト

--/--/-- -- [Edit]

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSSで背景やボーダー(枠線)をページの一番下まで表示

2009/06/28 Sun [Edit]

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

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

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

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

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

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

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

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

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

スポンサーサイト

続きを読む ≫

ネットスケープ(Netscape)だけ背景が表示されない

2008/06/12 Thu [Edit]

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)に修正すると、ネットスケープでも背景色と背景画像が無事表示される♪

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

dt と dd を横に並べる CSS

2008/03/14 Fri [Edit]

今日は定義リスト(dl タグ)内の dtdd タグを CSS横に並べる方法です。

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

続きを読む ≫

IE6 で float させると親要素の border が消える CSS バグ

2008/02/04 Mon [Edit]

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

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

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 の親は子供が浮かれると甘くなりがち。

透過 PNG を IE6 で背景としても使える JavaScript

2007/12/29 Sat [Edit]

先日の記事「透過 PNG を IE6 でも奇麗に表示するクリスマス☆」では AlphaImageLoader と言う Filter(フィルター)を使い、透過 PNG を IE6 でも奇麗に表示させていました。

しかし、私は少し勘違いをしていたのですが、先日の方法だと透過 PNG を背景( background )に指定できないのです。

「じゃあ、どうすんの?」

はい。その答えは JavaScript が握っていました。

「えぇ~?でも、なるべくなら CSS で解決したい問題なんだけど。」

そうですね。私も同意見ですが、おそらく今回ご紹介する解決策が現在(2007年の暮れ)主流のようです。

それでは、一人芝居を気持ち悪がられる前に、そろそろ「透過 PNG を IE6 で背景としても使える JavaScript」をメモしておきます。

続きを読む ≫

Top
はじめてのブログデザイン
Next
Older Entries

はじめに・・・

hajime

Author:hajime
はじめまして!齢32を迎えたおっさんです。
当ブログではホームページ制作の経験を活かして、日々ブログテンプレートのデザインを勉強しています。ご意見ご質問アドバイスなどありましたら、お気軽にコメントください!

ブログテンプレートのご使用についてをご覧頂けると注意点などをご確認いただけます。

ブログテンプレート一覧表では、今迄当ブログで制作してきたテンプレートをご覧頂けます。

はじめてのブログデザイン記事一覧で、気になる記事を探してみませんか?

はじめてのブログはFC2ブログで良いと思うに一票。

Mail Address

Google AdSense

RSSフィード

便利なブックマーク

リンク

ロックオン


ドメインが増えてきたので引っ越し検討中のレンタルサーバー。

カテゴリー

タグクラウド

検索フォーム

最近の記事

最近のコメント

最近のトラックバック

お気に入り

EIZOダイレクト
私の中で出ている1つの答え。それは液晶モニターに関しては今も昔もこれからも EIZO(ナナオ)。

ドメイン検索
a
.com .net .info .mobi

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。