スタイルの一覧
属性と指定値一覧
文字色と背景
- color
- 文字の色を指定する。色は#336699のように6桁のカラーコードのほか、red, blue なども使える。yellow を間違えて yelow などと間違えると指定が無視され、たいていは黒にもどる。
color:#336699;
color:red;
- background-color
- 背景色の指定。指定の仕方は color と同じ。
background-color:#336699;
- background
- 背景色と背景画像の指定。背景色は画像の表示ができないときのため。
background:#336699 url(images/yelsq.png);
マージン・パディング
- margin
- ブロックの上右下左の空白を指定する。半角スペースで区切られた4つの数字は順に上右下左の空白。emは文字の幅を指す。%で指定してもよい。この場合ブラウザの幅が100%
margin:0.5em 1em 0.5em 2em;
margin:3% 5% 2% 10%;
- padding
- ブロックの背景部分とテキスト領域の隙間
padding: 0.5em 1em 0.5em 1em;
padding: 3% 5% 2% 10%;
ボーダー
- border
- ブロックを枠で囲む。タイプ、色、太さで指定する。(省略があってもよい)
border: solid #336699 2px;
上右下左で太さを変えたいときは、2つに分けて、
border: solid #336699 2px;
border-width:2px 0px 0px 1em;
テキスト
- text-align
- ブロック内のテキスト(文)の配置。leftが左寄せ、centerが中央揃え、rightが右寄せ。
text-align:center;
text-align:right;
- text-indent
- 段落最初の字下げ。emは文字の幅を指す。マイナスの値も可
text-indent:1em;
- line-height
- 行間隔の指定。指定しなければ120%弱になっている。画像を含む段落には指定しない方がよい。
line-height: 150%;
フォント
- font-weight
- 文字の太さの指定。normal(普通), bold(太字)の他に、100, 200, 300, 400, 500, 600, 700, 800, 900 の数字で指定できます。400 が normal で 700 が bold ですがあまり細かな変化は期待しないでください。
font-weight:bold;
font-weight:normal;
- font-size
- フォントの大きさです。その部分(親要素)で普通の大きさが100%です。
font-size:140%;
font-size:80%;
- font-style
- 斜体かどうかを設定します。
font-style: normal; 普通
font-style: italic; 斜体
聖愛高等学校
http://www.seiai.ed.jp/