CSSでデザインを設定する

2010-06-0220:54

CSSでデザインを設定する方法について。

文字の色

文字の色は次のように指定します。

color: #000000;

値はカラーコードで、#を除いた6桁の数値がRGB値にあたります。カラーコードの例は次の通りです。

黒：#000000
白：#ffffff
赤：#ff0000
緑：#00ff00
青：#0000ff

文字の大きさ

文字の大きさは次のように指定します。

font-size: 100%;

値は％で指定し、文字を大きくする時は%の値を大きく、文字を小さくする時は％の値を小さくします。注意点として%指定は相対的な指定なので、次の場合に影響を受けます。

<div class="test-font-size-1">
<p class="test-font-size-2">テスト文章。</p>
</div>

.test-font-size-1 {
    font-size: 150%;
}

.test-font-size-2 {
    font-size: 200%;
}

この場合、テスト文章という文字の大きさは1.5 x 2の3倍になります。

余白

余白はある要素の外側と内側の2種類があり、外側の余白はmargin、内側の余白はpaddingというプロパティを使います。margin、paddingは値の書き方が複数あり、次のように書きます。

.test-margin {
    /* 外側の余白について、上下左右に1pxを指定 */
    margin: 1px;

    /* 外側の余白について、上下に2px、左右に1pxを指定 */
    margin: 2px 1px;

    /* 外側の余白について、上に4px、左右に1px、下に2pxを指定 */
    margin: 4px 1px 2px;

    /* 外側の余白について、上に8px、右に3px、下に4px、左に1pxを指定 */
    margin: 8px 3px 4px 1px;
}

/* paddingもmarginと同じ指定方法なので、省略 */