| ★「Cascading Style Sheets」の基本 | example | |||
| 1、<HEAD>～</HEAD>のあいだに<STYLE>～</STYLE>を記述、「text/css」を指定 | <HTML> <HEAD> <TITLE>Cascading Style Sheets Sample</TITLE> <STYLE type="text/css"> <!-- BLOCKQUOTE { line-height: 1.5 } --> </STYLE> </HEAD> <BODY> <BLOCKQUOTE> ・・・この範囲の行間はフォントサイズの1.5倍になります。 </BLOCKQUOTE> </BODY> </HTML> |
|||
| 2、リンクして組み込む | <LINK rel="stylesheet" type="text/css" href="http://www.zspc.com/abc.css" title="Example"> | |||
| 3､@importを使用して組み込む | <STYLE type="text/css"> <!-- @import url(http://); H2 { color: red } --> </STYLE> |
|||
| ４、他多数の記述法あり | ||||
| example | ||||
| write |
mean |
value |
example |
|
| ★カラー | ||||
| color | 文字色 |
|
H1 { color: red } H1 { color: #ff0000 } H1 { color: #f00 } H1 { color: rgb(255, 0, 0) } H1 { color: rgb(100%, 0%, 0%) } |
|
| ★フォント | ||||
| font-family | フォントファミリ名 | serif sans-serif cursive fantasy monospace |
P { font-family: "New", Times, serif } | |
| font-style | フォントスタイル | normal italic oblique |
H1 { font-style: italic } H1 EM { font-style: normal } |
|
| font-variant | フォントバリエーション | normal small-caps |
H2 { font-variant: small-caps } | |
| font-weight | フォントの太さ | normal bold bolder lighter |
P { font-weight: normal } STRONG { font-weight: bold } |
|
| font-size | フォントのサイズ | xx-small x-small small medium large x-large xx-large |
H1 { font-size: large } EM { font-size: 120% } P { font-size: 12pt } |
|
| font | まとめて設定 | P { font: italic bold 12pt/15pt serif } | ||
| ★テキスト | ||||
| word-spacing | 単語の間隔 | normal 数値指定 |
H1 { word-spacing: 0.4em } P { word-spacing: -0.1em } |
|
| letter-spacing | 文字間隔 | normal 数値指定 |
H1 { letter-spacing: 0.1em } BLOCKQUOTE { letter-spacing: -0.1em } |
|
| text-decoration | 文字の装飾 | none underline overline line-through blink |
A:link { text-decoration: underline } | |
| vertical-align | 縦方向の位置揃え | baseline middle sub super text-top text-bottom top bottom |
IMG { vertical-align: middle } | |
| text-transform | 大文字・小文字 | capitalize uppercase lowercase none |
H1 { text-transform: uppercase } | |
| text-align | 行揃え | left right center justify |
P.kaisetsu { text-align: justify } | |
| text-indent | インデント（距離） | 数値指定 | P { text-indent: 4em } | |
| line-height | 行間 | normal 数値指定 |
P { line-height: 1.5 } P { line-height: 1.5em } P { line-height: 150% } |
|
| ★ボックス | ||||
| margin-topa | 上マージン | auto 数値指定 |
H1 { margin-top: 3em } | |
| margin-right | 右マージン | auto 数値指定 |
H1 { margin-right: 20% } | |
| margin-bottom | 下マージン | auto 数値指定 |
H1 { margin-bottom: 3em } | |
| margin-left | 左マージン | auto 数値指定 |
H1 { margin-left: 3em } | |
| margin | 上右下左マージン | auto 数値指定 |
BODY { margin: 1em 2em 3em 4em } |
|
| padding-top | 枠と内容の上間隔 | 数値指定 | BLOCKQUOTE { padding-top: 0.5em } | |
| padding-right | 枠と内容の右間隔 | 数値指定 | BLOCKQUOTE { padding-right: 8px } | |
| padding-bottom | 枠と内容の下間隔 | 数値指定 | BLOCKQUOTE { padding-bottom: 1em } | |
| padding-left | 枠と内容の左間隔 | 数値指定 | BLOCKQUOTE { padding-left: 10% } | |
| padding | 枠と内容の上右下左間隔 | 数値指定 | BODY { padding: 1em 2em 3em 4em } | |
| border-top-width | 上枠の幅 | thin medium thick 数値指定 |
P { border-top-width: 0.3em } | |
| border-right-width | 右枠の幅 | thin medium thick 数値指定 |
P { border-right-width: 0.3em } | |
| border-bottom-width | 下枠の幅 | thin medium thick 数値指定 |
P { border-bottom-width: 0.3em } | |
| border-left-width | 左枠の幅 | thin medium thick 数値指定 |
P { border-left-width: 0.3em } | |
| border-width | 上右下左枠の幅 | thin medium thick 数値指定 |
P { border-width: 1em 2em 3em 4em } | |
| border-color | 枠の色 | 色指定 16進数 10進数 |
P { border-color: red } P { border-color: #ff0000 } P { border-color: #f00 } P { border-color: rgb(255, 0, 0) } P { border-color: rgb(100%, 0%, 0%) } |
|
| border-style | 枠のスタイル | dotted dashed solid double groove ridge inset outset |
P { border-style: solid } | |
| border-top | 上枠の幅・スタイル･色 | border-top-width border-style color |
H1 { border-top: thick solid blue } | |
| boder-right | 右枠の幅・スタイル・色 | border-right-width border-style color |
H1 { border-right: thick solid blue } | |
| border-bottom | 下枠の幅・スタイル | border-bottom-width border-style color |
H1 { border-bottom: thick solid blue } | |
| border-left | 左枠の幅・スタイル | border-left-width border-style color |
H1 { border-left: thick solid blue } | |
| border | 同じ枠の幅・スタイル | border-width border-style color |
P { border: thick solid blue } P { border-top: thick solid blue ; border-right: thick solid blue ; border-bottom: thick solid blue ; border-left: thick solid blue }
|
|
| width | ボックスの内容の幅 | auto 数値指定 |
IMG.button { width: 80px } | |
| height | ボックスの内容の高さ | auto 数値指定 |
IMG.button { height: 20px } |
|
| float | 文字の回り込み | none left fight |
IMG.button { float: left } | |
| clear | 文字の回り込みクリア | none left right both |
H1 { clear: left } | |
| ★背景 | ||||
| bockground-color | 背景色 | transparent 色指定 16進数 10進数 |
H1 { background-color: red } H1 { background-color: #ff0000 } H1 { background-color: #f00 } BODY { background-color: rgb(255, 0, 0) } BODY { background-color: rgb(100%, 0%, 0%) } |
|
| background-image | 背景画像 | url | BODY { background-image: url(http://) } | |
| background-repeat | 背景画像の並び | repeat repeat-x repeat-y no-repeat |
BODY { background: white url(leftside.gif); background-repeat: repeat-y}
|
|
| background-attachment | 背景画像の固定 | scroll fixed |
BODY { background: white url(leftside.gif); background-attachment: fixed}
|
|
| background-position | 背景画像の位置 | 数値指定 left center right top bottom |
BODY { background-image: url(back.gif); background-attachment: fixed; background-position: 50% 50% } | |
| background | 背景をまとめて設定 | background-color background-image background-repeat background-attachment background-position |
BODY { background: black } P { background: #ff0000 url(bkg.gif) } P { background: url(bkg.gif) blue 50% repeat fixed } |
|
| ★配置 | ||||
| position | 絶対位置･相対位置の指定 | absolute relative static |
#test { position: absolute; top: 100px; left: 100px } | |
| left | 左からの位置 | auto 数値指定 |
#test { position: relative; left: 40px } | |
| top | 上からの位置 | auto 数値指定 |
#test { position: relative; top: 100px } | |
| z-index | 重なる順序 | auto 整数指定 |
#test { position: absolute; z-index: 3 } | |
| clip | クリッピング | auto | #test {position: absolute; top: 100px; left: 100px; clip: rect(5px 25px 25px 5px) } | |
| overflow | 内容が収まりきらない場合 | none clip scroll |
#test {position: absolute; top: 80px; left: 80px; width: 100px; height: 100px; overflow: clip} | |
| ★その他 | ||||
| display | 表示方法 | block inline list-item none |
P { display: block } EM { display: inline } LI { display: list-item } IMG { display: none } |
|
| visibility | 表示･非表示 | inherit visible hidden |
#test { position: absolute; top: 200px; visibility: hidden } | |
| white-space | 空白･タブ・改行の取扱 | normal pre |
PRE { white-space: pre } | |
| list-style-type | リストのマークの種類 | disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none |
OL { list-style-type: decimal }OL { list-style-type:upper-roman }OL { list-style-type:upper-alpha } | |
| list-style-image | リストのマーク画像 | url none |
UL { list-style-image: url(maru.gif) } | |
| list-style-position | リストのマークの表示位置 | inside outside |
OL { list-style-position: inside } | |
| list-style | リストをまとめて設定 | list-style-type list-style-image list-sytle-position |
UL { list-style: url(images/maru.gif) disc } | |
There's a will. There's a way.