Category Archives: CSS

CSS3のグラデーション表示領域を固定化する

Posted by 1000k on 2011年2月24日 No comments

#uso {
    background: #202a2e;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(34,39,45)),
        color-stop(1, rgb(11,63,61))
    );
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(34,39,45) 0%,
        rgb(11,63,61) 100%
    );
    background-attachment: fixed !important;
}

参考

css – filter: gradient and background: fixed – Stack Overflow

HTML5テンプレート

Posted by 1000k on 2010年10月17日 No comments

遅ればせながら、HTML5の勉強を始めました。divタグだらけの(X)HTMLに比べ、意味のあるタグで構成できるようになり、可読性が上がっています。願わくばHTML5の普及後、クロスブラウザ対策という雑用から解放されますように。

さしあたり、HTML5でページを作るときの最小構成をメモしておきます。The W3C Markup Validation Serviceで問題ないことを確認しています。

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="description" content="HTML5 Tamplate" />
    <meta name="keywords" content="HTML,HTML5,template" />
    <link rel="stylesheet" href="sample.css" type="text/css" media="all">
    <link href="favicon.png" rel="icon" type="image/png">
    <link href="favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
    <title>html 5 sample</title>
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <header>header</header>
    <nav>nav</nav>
    <section>
        <article>
            <header>
                <h1>Heading 1 of article #1</h1>
            </header>
            <section>
                <p>paragraph 1</p>
            </section>
        </article>
    </section>
    <footer>footer</footer>
</body>
</html>

補足

HTML5の新要素をIE9未満でも認識できるよう、”html5.js”をロードしています。
faviconの指定が2行あるのはIE用とそれ以外用です（たぶん）

参考

サイト表示高速化メモ

Posted by 1000k on 2010年6月14日 No comments

表示速度確認ツール

FireBug

-基本のアドオン

YSlow

Yahooのやつ
FireBugと連携
評価の低い項目 (E,F)を優先して修正する
一定規模以上のサイトは「YSlow(V2)」、小規模サイトは「Small Site or Blog」などを選択
「Use a Content Delivery Network(CDN)」はアメリカ以外だとFになるので無視してよい

PageSpeed

Googleのやつ

高速化の手段

HTTPリクエストを減らす

CSSスプライト

外部CSSロードには@importを使わない

外部CSSファイルはlink要素のみで読み込む。

IEはlink要素で読み込まれたCSSをダウンロード完了するまで、@importで指定したCSSファイルを読み込まない
IEもFirefoxも、link要素で読み込まれるCSSファイルのダウンロードが完了してからでないと、次のCSSファイルを読み込まない

CSSやJavaScriptのロード順

CSSはheadのlink要素で指定するとアクセス後の空白の時間（ホワイトページタイム）が減らせる
-ブラウザはCSSを読み込むまでレンダリングを待つため。
JavaScriptはbody要素内の最後で読み込むのがよい
- 並列ダウンロードができず、応答の遅れによってそれ以降のコンテンツのダウンロードが停止されるので。

ファイルの圧縮

CSSやJSは「YUI Compressor」などのツールで圧縮可能
gzip圧縮転送を使うことでさらに圧縮できる
- Apache2のmod_deflateモジュールを有効化することで使用可能

CSSや画像の最適化

CSSスタイルの適用対象は子孫セレクタで記述するより、シンプルなIDやクラスセレクタの方が処理速度が速い（特にIE6で顕著）
画像は「Yahoo! Smush.it™」などのWebサービスでギリギリまで最適化できる
PNGを最適化するなら「BlastPNG」あたり
画像サイズをHTMLで変更するとブラウザに負荷がかかり重くなるので、やらない方が良い
CSSスプライトを利用する際のGIF画像は、縦方向ではなく横方向に画像を配置したほうが圧縮率が高い。8bit PNGでは縦横ともに圧縮方式が変わらないのでどっちでもいい。

1000g

技術メモ