CSSパーツテンプレート

このサイトは、「初心者でも使えるCSSパーツテンプレート」を配布しています

テンプレート サイズ カラー 文字の設定 背景の設定 枠線の設定
 

  文字に関するスタイル

color

文字の色を指定する

使用例

p { color: gray; }   h1 { color: #808080; }

grayのように色の名前で指定してもいいですし#808080のように16進数で指定してもいいです。

font-size

文字の大きさを指定する

使用例

body { font-size: 12px; }   p { font-size: smaller; }   h1 { font-size: x-large; }

フォントのサイズは数値指定、キーワード指定、親要素に対する大きさで指定など様々な指定方法があります。

キーワードで指定する
xx-large 非常に大きい
x-large 大きい
large やや大きい
medium 通常
small やや小さい
x-small 小さい
xx-small 非常に小さい
数値で指定する
% パーセント
px ピクセル
em フォントサイズを1とする単位
pt ポイント

親要素に対して指定する
larger 親要素より1段階大きい
smaller 親要素より1段階小さい

font-weight

文字の太さを指定する

使用例

p { font-weight: bold; }   p { font-weight: normal; }

h1などの見出しタグは初めから太字に設定されています。フォントには通常と太字があるだけです。


font-style

文字の斜体を指定する

使用例

p { font-style: italic; }   p { font-style: normal; }

斜体にするときはitalicを使用します。何も指定しない場合はnormalがデフォルトで適用されます。


line-height

行の高さを指定する

使用例

p { line-height: 150%; }

行の上辺から次の行の上辺までの高さを指定します。%指定だと100%が通常の状態、200%が1行分空いてる状態になります。


高さを指定する単位
px 画面の解像度によって表示サイズが異なります
em 使用しているフォントの高さを基準にした値
% パーセント(割合)での指定も可能

text-align

行揃えを指定する

使用例

p { text-align: center; }   h1 { text-align: right; }

左、真ん中、右のいずれかに行を揃えます。デフォルトでは左側に設定されています。

行揃えの値
left 左側に表示されます
center 中央に表示されます
right 右側に表示されます

text-decoration

文字の装飾を指定する

使用例

a { text-decoration: none; }   h1 { text-decoration: overline; }

文字に下線などを付けたり付けなかったりできます。リンクの場合はデフォルトで下線が付くよう設定されています。

文字の装飾の指定
none 何も付きません
underline 文字に下線を付けます
overline 文字に上線を付けます
line-through 文字の真ん中に取消し線を付けます

letter-spacing

文字の間隔を指定する

使用例

h3 { letter-spacing: 5px; }   p { letter-spacing: 0.4em; }

値には数値+単位でサイズ表記するか、normalで指定します。



Copyright © 2009 CSSパーツテンプレート All rights reserved.