オライリーの本「ハイパフォーマンスWebサイト」を読みました。副題は「高速サイトを実現する14のルール」。ブラウザ表示のパフォーマンスを高速化するための方法が具体的に書かれていました。

CSSで出来ることについては、以下の点が書かれていました。

1. CSSスプライトを利用する
2. CSSはlinkタグを使用してhead内に置く
3. CSS expressionの使用を控える
4. CSSファイルは外部ファイル化する
5. CSSのソースコードを縮小化する

「Steve Souders「ハイパフォーマンスWebサイト」を読みました」の続きを読む

関連タグ：CSS html 

10/10（土）に、名古屋国際会議場にて「WCAN 2009 Autumn」が開催されました。

内容はおおまかに

最新トレンド系（iPhone）→最新技術系（HTML5）→上流系（ディレクション・ブランディング）

てな感じで、流れ的にも内容のバランス的にもよかったと思います。

「WCAN 2009 Autumnはアツかった」の続きを読む

関連タグ：appleple wcan twitter CSS html5 

CSS Nite Biginners 大阪版に参加してきました。時間は14:30〜20:00。みっちりと、かなり濃い内容でした。

「CSS Nite Biginners 大阪版に参加してきました」の続きを読む

関連タグ：CSS CSS Nite html 

Yahoo! UI Libraryで公開されている、Reset CSSを発見しました。

Yahoo! UI Library: Reset CSS
http://developer.yahoo.com/yui/reset/

reset CSSは、Webブラウザごとに異なる表示を統一するCSS。

Yahoo!のReset CSSを拝借する簡単な方法

以下のコードを自分が作ったHTMLの内に書くと、reset CSSを適用できます。

「Yahoo! UI LibraryのReset CSS」の続きを読む

関連タグ：CSS UI 

CSS3で実現できる、角丸ボックスのサンプルです。
プロパティに-webkit-border-radiusと記述します。（Safariの場合）

<div class="boxA">
	<h2 class="title">角丸サンプル</h2>
    <div class="boxB">
    	<p>タイトル部分に背景画像を入れて角丸にするサンプルです。</p>
        <p>角丸の画像を個別に用意しなくてもいいので使い回しができます。</p>
    </div>
</div>

div.boxA {
	width: 300px;
	margin: 10px;
	padding: 0px;
	border: 1px solid #E5E5E5;
	background-color: #FFFFFF;
	-webkit-border-radius: 10px;
}

div.boxB {
	padding: 10px;
}

h2 {
	background-image: url(../images/h2bg.gif);
	background-repeat: repeat-y;
	padding: 10px;
	color: #ffffff;
	font-size: 13px;
	font-weight: bold;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
}

「CSS3の角丸ボックスサンプル」の続きを読む

関連タグ：css