ホームページ制作のディークラフト » CSS関連

写真に回り込むデザイン例1

admin — Tue, 08 Nov 2011 04:39:53 +0000

▼HTMLソース部




商品名が入ります。
5,000円（税込）
商品の説明や、仕様など。ああああああああああああああああああああああああああああああああああああああああああ




商品名が入ります。
5,000円（税込）
商品の説明や、仕様など。ああああああああああああああああああああああああああああああああああああああああああ

▼CSSソース部

.item p {
	margin: 0;
	padding: 0;
	font-size: 12px;
	line-height: 1.4;
}
.item {
	padding: 5px;
	float: left;
	border: 1px solid #AAA;
	width: 300px;
	margin-right: 5px;
}
.item img {
	float: left;
	margin: 0 10px 10px 0;
}
p.item-title {

}
p.price {
	text-align: right;
	color: #FF0000;
	font-weight: bold;
}
#items {
	zoom: 100%;
}
#items:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

CSSのafter疑似要素で回り込みを解除するコード

admin — Tue, 08 Nov 2011 03:19:55 +0000

回り込みを解除したい要素に、以下のコードを追加します。

.box {
	zoom: 100%;
}
.box:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

コピペで出来るCSS3で見出しスタイリング

admin — Thu, 20 Oct 2011 00:39:45 +0000

見出し(h1〜h6)のスタイリングを、CSS3を使って角丸や影を表現するなどの方法が紹介されています。

◎CSS3グラデーションを生成するサイト

clearfixのまとめ

admin — Tue, 18 Oct 2011 01:03:41 +0000

フロートをクリアする手法は色々ありますが、よく使われる「clearfix」についてまとめてみた。
以下のコードをcssに追加します。

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

使われていないCSS設定があるか教えてくれる『Unused CSS』

admin — Fri, 23 Sep 2011 00:58:23 +0000

使われていないCSS設定って、結構あるんです。
修正を加えていくと、記述がどんどん増えて、余計な設定が残っていて。
簡単に整理できないのかなあ？って思っていたところ、こんなサービスを見つけました。

Unused CSS
http://unused-css.com/
使われているCSS設定を教えてくれるツール。

CSSだけで画像のリサイズを処理

admin — Sat, 10 Sep 2011 01:24:07 +0000

.photo img {
	max-width: 300px;
	max-height: 450px;
}
* html body .photo img {
	width:expression(this.width >= this.width ? "300px" : "auto");
	height:expression(this.height >= this.height ? "450px" : "auto");
}
img {
	-ms-interpolation-mode: bicubic;
}

回り込みを解除する

admin — Fri, 09 Sep 2011 02:12:41 +0000

.clearfix {
    display: block;
}
/* Clear Fix */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

/*
.clearfix {
	display: inline-block;
}
*/
html[xmlns] .clearfix {
	display: block;
}

* html .clearfix {
	height: 1%;
}

Instant CSS Code

admin — Fri, 10 Sep 2010 05:55:17 +0000

ウェブプロジェクトに必要なファイルを瞬時に作ってくれる。

⇒ http://instantcsscode.com/