CSS講座-CSSの基本
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[CSS]] > CSSの基本
#contents
* CSSのバージョン [#if8fc919]
CSSのバージョンには、
- CSS1
- CSS2、CSS2.1
- CSS3
等がある。
しかし、CSSファイルには「バージョン」を指定する記法がない...
* CSSの書き方 [#x9e6ccae]
** セレクタ、プロパティ、値 [#x32aff80]
CSSは、
- セレクタ
- プロパティ
- 値
という３つの要素で見た目を指定する。
p { color: red; }
- この場合、「p」がセレクタ、「color」がプロパティ、「red...
- セレクタは、HTMLタグ名やユーザーが指定した文字列を指定...
- セレクタの後に、「{」「}」で囲って、プロパティと値の対...
- プロパティと値は、「:」で区切る。
- 値の末尾に「;」を付ける。
- 「;」の後に続けて次のプロパティと値の対を記述できる。
** コメント [#tcdbeb1f]
CSSではコメントを「/*」と「*/」で囲む。
/* コメント */
- C言語のコメントと同様。
- コメントは複数行にわたってもOK。
- コメントの中にコメントを記述する入れ子にはできない。
* CSSの適用方法 [#he276d06]
** CSSの指定 [#zb995cd5]
XHTMLに適用するCSSを指定する方法は、４つある。
- 「link」、「@import」で、別ファイルのCSSを呼び出す方法...
- 直接XHTMLに書き込む「style」の使用は望ましくない。
*** link要素 [#m30a356f]
#code(css,nomenu){{
<link rel="stylesheet" type="text/css" href="css/style.cs...
}}
*** @import [#ce6d28fe]
#code(css,nomenu){{
<style type="text/css">
@import "css/style.css"
</style>
}}
*** style要素 [#cc6f539c]
#code(css,nomenu){{
<style type="text/css">
p { margin: 15px; }
</style>
}}
*** style属性 [#bfbdaf6d]
#code(css,nomenu){{
<p style="margin: 15px;">テキスト</p>
}}
** CSSの文字コード [#caa76e51]
「link」や「@import」で読み込むCSSファイルの先頭行に「@ch...
#code(css,nomenu){{
@charset "UTF-8";
}}
日本語ページの場合は、
- UTF-8
- Shif_JIS
- EUC-JP
等の文字コードが指定される。
あくまでもCSSファイルで使用する文字コードの指定であり、XH...
XHTMLと別の文字コードでも問題ないが、特に理由がなければXH...
** CSSのメディアタイプ [#w937a923]
CSSを適用するメディア（デバイス、ソフトウェア）を、「メデ...
カンマ区切りで並べて、複数のメディアタイプを同時に指定で...
メディアタイプを指定しない場合は、CSSがすべてのメディアに...
| メディアタイプ | デバイスやソフトウェア |h
| all | すべてのメディア |
| screen | 一般的なパソコンのモニタ |
| projection | プロジェクター・映写機 |
| tv | テレビ・テレビゲーム機など |
| handheld | 携帯端末（PDA・携帯電話）など |
| tty | 固定ピッチフォントで表示される端末 |
| print | プリンタ（印刷プレビューなどを含む） |
| speech | 音声読み上げ（音声ブラウザなど） |
| braille | 点字ピンディスプレイなど |
| embossed | 点字プリンタなど |
*** XHTMLのlink要素でメディアタイプ指定 [#p549212e]
- パソコンのモニターやプロジェクターに適用するCSSの指定
#code(css,nomenu){{
<link ref="stylesheet" type="text/css" href="css/screen.c...
}}
- テレビ、テレビゲーム機に適用するCSSの指定
#code(css,nomenu){{
<link ref="stylesheet" type="text/css" href="css/tv.css" ...
}}
- プリンターなどの印刷メディアに適用するCSSの指定
#code(css,nomenu){{
<link ref="stylesheet" type="text/css" href="css/print.cs...
}}
- 携帯電話に適用するCSSの指定
#code(css,nomenu){{
<link ref="stylesheet" type="text/css" href="css/handheld...
}}
*** @importでメディアタイプ指定 [#uafaceac]
#code(css,nomenu){{
@import url("projection.css") projection;
}}
*** @mediaでメディアタイプ指定 [#tdf26e61]
#code(css,nomenu){{
@media print {
body { font-size: medium; }
}
}}
* セレクタ [#z0d317cd]
スタイルの適用対象を指定するのが「セレクタ」
** セレクタの種類 [#sbb99f55]
| 名称 | セレクタ | 意味 | 例 |h
| ユニバーサルセレクタ | * | すべての要素 | * { color: #0...
| タイプセレクタ | E | その要素（E） | p { color: #222222...
| 子孫セレクタ | E F | 親要素（E）に含まれる子孫要素（F）...
| 子セレクタ | E > F | 兄要素（E）に含まれる直接の子要素...
| 隣接セレクタ | E + F | 兄要素（E）の直後の弟要素（F）| ...
| クラスセレクタ | .classname | class属性値が「classname...
| IDセレクタ | #idname | id属性値が「idname」の要素 | #he...
| 属性セレクタ | E[attr] | 要素（E）がその属性（attr）を...
|~| E[attr="value"] | 要素（E）がその属性（attr）と値（va...
|~| E[attr~="value"] | 要素（E）がその属性（attr）をもち...
|~| E[attr｜="value"] | 要素（E）がその属性（attr）をもち...
セレクタの記号について
- E
要素名のセレクタを「E」と表現することがある。これは「Elem...
- E F
要素名のセレクタ「E」の次のアルファベット「F」は、他の関...
** 擬似クラス・擬似要素 [#f1b376b5]
- 擬似クラスは、要素の状況やタイミングに対しスタイルを設...
- 擬似要素は、要素内の特定の箇所に対してスタイルを設定で...
| 名前 | セレクタ | 意味 | 例 |h
| リンク擬似クラス | :link | 未訪問リンクのとき | a:link ...
|~| :visited | 既訪問リンクのとき | a:link { color: #8000...
| ダイナミック擬似クラス | :hover | 要素がカーソルオンさ...
|~| :focus | 要素がフォーカスされたとき | a:focus { color...
|~| :active | 要素がアクティブになったとき | a:active { c...
| 言語擬似クラス | :lang() | 要素に言語コードが指定されて...
| :first-child擬似クラス | :first-child | 要素の中の最初...
| :first-line擬似要素 | :first-line | 要素の1行目のみ | p...
| :first-letter擬似要素 | :first-letter | 要素の1文字目の...
| :before/:after擬似要素 | :before | 要素の直前に内容を生...
|~| :after | 要素の直後に内容を生成 | #main:after { conte...
リンク擬似クラスとダイナミック擬似クラスを一緒に使う場合...
＝ユーザーによるアクションの順番にする。
+ :link
+ :visited
+ :hover
+ :focus
+ :active
** セレクタの組み合わせ [#k2e394e1]
- 各セレクタは組み合わせて使用可能
例えば、「#header h1」と指定した場合、「id="header"」（ID...
コンテンツ範囲を示すID名やクラス名を基に、子孫セレクタで...
#code(css,nomenu){{
#header {
height: 60px;
background: #33cccc url(../images/header.jpg);
}
#header h1 {
padding-top: 20px;
padding-left: 15px;
color: #ffffff;
}
#header h1 a {
color: #0000ff;
}
}}
擬似クラスも利用した、やや複雑な子孫セレクタの例
#code(css,nomenu){{
#main .highlight ul li a:link {
color: #000080;
}
#main .highlight ul li a:visited {
color: #800080;
}
}}
子孫セレクタで、構造を示すIDやクラスは、タイプセレクタ（...
「div#header」ではなく、単に「#header」と指定する。
子孫セレクタをつなげて記述する場合、いちいち「div」が出て...
** セレクタのグループ化 [#ld123bd0]
セレクタはカンマ区切りでグループ化して、同じスタイルを同...
#code(css,nomenu){{
h1,h2,h3 {
color: #ff6600;
}
}}
グループ化するセレクタが長いときは、カンマごとに改行する...
最後のセレクタには、カンマを付けないので注意。
#code(css,nomenu){{
#utility-nav ul li a:link,
#global-nav ul li a:link,
#local-nav ul li a:link {
color: #0000cc;
}
#utility-nav ul li a:visited,
#global-nav ul li a:visited,
#local-nav ul li a:visited {
color: #cc0000;
}
}}
* プロパティ [#l2e14234]
- スタイルの種類（どのような効果を与えるか）が、「プロパ...
- 効果の具体的な内容を「値」で指定する。
** ボックスモデル [#f1201e03]
- XHTMLの要素は、各自の表示領域を持っている。
- この領域は「四角形」と決まっており、四角形の領域を「ボ...
- ボックスは、さらに４つの領域に細分化されている。
-- content （内容）
-- padding （内余白）
-- border （枠線）
-- margin （外余白）
CENTER:&ref(boxmodel01.gif);
>http://html-coding.co.jp/knowhow/tips/000014/
''ボックスモデルの概念''
ボックスモデルとはブロックレベル要素がもつ短形領域の概念...
- 背景色の指定は、marginには適用されない。
CENTER:&ref(boxmodel02.jpg);
>http://www.justmystage.com/home/hodogaya/css11.html
''マージン領域は常に透明として扱われます''
ボックスと背景の関係ボックスに背景を指定した場合、内容領...
|>| プロパティ | 効果 | 指定できる値 |h
| マージン | margin | マージンの一括指定 | 長さ、%、auto |
|~| margin-top | 上下左右のマージン | 長さ、%、auto |
|~| margin-right |~|~|
|~| margin-bottom |~|~|
|~| margin-left |~|~|
| ボーダー | border | ボーダーの一括指定 | 太さ、形状、色...
|~| border-width | ボーダーの太さ | 長さ、thin、medium、t...
|~| border-style | ボーダーの形状 | solid、dotted、dashed...
|~| border-color | ボーダーの色 | #rrggbb、#rgb、色名、tr...
|~| border-top | 上下左右のボーダー | 太さ、形状、色をス...
|~| border-right |~|~|
|~| border-bottom |~|~|
|~| border-left |~|~|
| パディング | padding | パディングの一括指定 | 長さ、% |
|~| padding-top | 上下左右のパディング | 長さ、% |
|~| padding-right |~|~|
|~| padding-bottom |~|~|
|~| padding-left |~|~|
| 幅と高さ | width | 内容の幅 | 長さ、%、auto |
|~| height | 内容の高さ | 長さ、%、auto |
| 幅と高さの最大/最小 | max-width, max-height | 内容の最...
|~| min-width, min-height | 内容の最小幅と最小高さ | 長さ...
終了行:
[[CSS]] > CSSの基本
#contents
* CSSのバージョン [#if8fc919]
CSSのバージョンには、
- CSS1
- CSS2、CSS2.1
- CSS3
等がある。
しかし、CSSファイルには「バージョン」を指定する記法がない...
* CSSの書き方 [#x9e6ccae]
** セレクタ、プロパティ、値 [#x32aff80]
CSSは、
- セレクタ
- プロパティ
- 値
という３つの要素で見た目を指定する。
p { color: red; }
- この場合、「p」がセレクタ、「color」がプロパティ、「red...
- セレクタは、HTMLタグ名やユーザーが指定した文字列を指定...
- セレクタの後に、「{」「}」で囲って、プロパティと値の対...
- プロパティと値は、「:」で区切る。
- 値の末尾に「;」を付ける。
- 「;」の後に続けて次のプロパティと値の対を記述できる。
** コメント [#tcdbeb1f]
CSSではコメントを「/*」と「*/」で囲む。
/* コメント */
- C言語のコメントと同様。
- コメントは複数行にわたってもOK。
- コメントの中にコメントを記述する入れ子にはできない。
* CSSの適用方法 [#he276d06]
** CSSの指定 [#zb995cd5]
XHTMLに適用するCSSを指定する方法は、４つある。
- 「link」、「@import」で、別ファイルのCSSを呼び出す方法...
- 直接XHTMLに書き込む「style」の使用は望ましくない。
*** link要素 [#m30a356f]
#code(css,nomenu){{
<link rel="stylesheet" type="text/css" href="css/style.cs...
}}
*** @import [#ce6d28fe]
#code(css,nomenu){{
<style type="text/css">
@import "css/style.css"
</style>
}}
*** style要素 [#cc6f539c]
#code(css,nomenu){{
<style type="text/css">
p { margin: 15px; }
</style>
}}
*** style属性 [#bfbdaf6d]
#code(css,nomenu){{
<p style="margin: 15px;">テキスト</p>
}}
** CSSの文字コード [#caa76e51]
「link」や「@import」で読み込むCSSファイルの先頭行に「@ch...
#code(css,nomenu){{
@charset "UTF-8";
}}
日本語ページの場合は、
- UTF-8
- Shif_JIS
- EUC-JP
等の文字コードが指定される。
あくまでもCSSファイルで使用する文字コードの指定であり、XH...
XHTMLと別の文字コードでも問題ないが、特に理由がなければXH...
** CSSのメディアタイプ [#w937a923]
CSSを適用するメディア（デバイス、ソフトウェア）を、「メデ...
カンマ区切りで並べて、複数のメディアタイプを同時に指定で...
メディアタイプを指定しない場合は、CSSがすべてのメディアに...
| メディアタイプ | デバイスやソフトウェア |h
| all | すべてのメディア |
| screen | 一般的なパソコンのモニタ |
| projection | プロジェクター・映写機 |
| tv | テレビ・テレビゲーム機など |
| handheld | 携帯端末（PDA・携帯電話）など |
| tty | 固定ピッチフォントで表示される端末 |
| print | プリンタ（印刷プレビューなどを含む） |
| speech | 音声読み上げ（音声ブラウザなど） |
| braille | 点字ピンディスプレイなど |
| embossed | 点字プリンタなど |
*** XHTMLのlink要素でメディアタイプ指定 [#p549212e]
- パソコンのモニターやプロジェクターに適用するCSSの指定
#code(css,nomenu){{
<link ref="stylesheet" type="text/css" href="css/screen.c...
}}
- テレビ、テレビゲーム機に適用するCSSの指定
#code(css,nomenu){{
<link ref="stylesheet" type="text/css" href="css/tv.css" ...
}}
- プリンターなどの印刷メディアに適用するCSSの指定
#code(css,nomenu){{
<link ref="stylesheet" type="text/css" href="css/print.cs...
}}
- 携帯電話に適用するCSSの指定
#code(css,nomenu){{
<link ref="stylesheet" type="text/css" href="css/handheld...
}}
*** @importでメディアタイプ指定 [#uafaceac]
#code(css,nomenu){{
@import url("projection.css") projection;
}}
*** @mediaでメディアタイプ指定 [#tdf26e61]
#code(css,nomenu){{
@media print {
body { font-size: medium; }
}
}}
* セレクタ [#z0d317cd]
スタイルの適用対象を指定するのが「セレクタ」
** セレクタの種類 [#sbb99f55]
| 名称 | セレクタ | 意味 | 例 |h
| ユニバーサルセレクタ | * | すべての要素 | * { color: #0...
| タイプセレクタ | E | その要素（E） | p { color: #222222...
| 子孫セレクタ | E F | 親要素（E）に含まれる子孫要素（F）...
| 子セレクタ | E > F | 兄要素（E）に含まれる直接の子要素...
| 隣接セレクタ | E + F | 兄要素（E）の直後の弟要素（F）| ...
| クラスセレクタ | .classname | class属性値が「classname...
| IDセレクタ | #idname | id属性値が「idname」の要素 | #he...
| 属性セレクタ | E[attr] | 要素（E）がその属性（attr）を...
|~| E[attr="value"] | 要素（E）がその属性（attr）と値（va...
|~| E[attr~="value"] | 要素（E）がその属性（attr）をもち...
|~| E[attr｜="value"] | 要素（E）がその属性（attr）をもち...
セレクタの記号について
- E
要素名のセレクタを「E」と表現することがある。これは「Elem...
- E F
要素名のセレクタ「E」の次のアルファベット「F」は、他の関...
** 擬似クラス・擬似要素 [#f1b376b5]
- 擬似クラスは、要素の状況やタイミングに対しスタイルを設...
- 擬似要素は、要素内の特定の箇所に対してスタイルを設定で...
| 名前 | セレクタ | 意味 | 例 |h
| リンク擬似クラス | :link | 未訪問リンクのとき | a:link ...
|~| :visited | 既訪問リンクのとき | a:link { color: #8000...
| ダイナミック擬似クラス | :hover | 要素がカーソルオンさ...
|~| :focus | 要素がフォーカスされたとき | a:focus { color...
|~| :active | 要素がアクティブになったとき | a:active { c...
| 言語擬似クラス | :lang() | 要素に言語コードが指定されて...
| :first-child擬似クラス | :first-child | 要素の中の最初...
| :first-line擬似要素 | :first-line | 要素の1行目のみ | p...
| :first-letter擬似要素 | :first-letter | 要素の1文字目の...
| :before/:after擬似要素 | :before | 要素の直前に内容を生...
|~| :after | 要素の直後に内容を生成 | #main:after { conte...
リンク擬似クラスとダイナミック擬似クラスを一緒に使う場合...
＝ユーザーによるアクションの順番にする。
+ :link
+ :visited
+ :hover
+ :focus
+ :active
** セレクタの組み合わせ [#k2e394e1]
- 各セレクタは組み合わせて使用可能
例えば、「#header h1」と指定した場合、「id="header"」（ID...
コンテンツ範囲を示すID名やクラス名を基に、子孫セレクタで...
#code(css,nomenu){{
#header {
height: 60px;
background: #33cccc url(../images/header.jpg);
}
#header h1 {
padding-top: 20px;
padding-left: 15px;
color: #ffffff;
}
#header h1 a {
color: #0000ff;
}
}}
擬似クラスも利用した、やや複雑な子孫セレクタの例
#code(css,nomenu){{
#main .highlight ul li a:link {
color: #000080;
}
#main .highlight ul li a:visited {
color: #800080;
}
}}
子孫セレクタで、構造を示すIDやクラスは、タイプセレクタ（...
「div#header」ではなく、単に「#header」と指定する。
子孫セレクタをつなげて記述する場合、いちいち「div」が出て...
** セレクタのグループ化 [#ld123bd0]
セレクタはカンマ区切りでグループ化して、同じスタイルを同...
#code(css,nomenu){{
h1,h2,h3 {
color: #ff6600;
}
}}
グループ化するセレクタが長いときは、カンマごとに改行する...
最後のセレクタには、カンマを付けないので注意。
#code(css,nomenu){{
#utility-nav ul li a:link,
#global-nav ul li a:link,
#local-nav ul li a:link {
color: #0000cc;
}
#utility-nav ul li a:visited,
#global-nav ul li a:visited,
#local-nav ul li a:visited {
color: #cc0000;
}
}}
* プロパティ [#l2e14234]
- スタイルの種類（どのような効果を与えるか）が、「プロパ...
- 効果の具体的な内容を「値」で指定する。
** ボックスモデル [#f1201e03]
- XHTMLの要素は、各自の表示領域を持っている。
- この領域は「四角形」と決まっており、四角形の領域を「ボ...
- ボックスは、さらに４つの領域に細分化されている。
-- content （内容）
-- padding （内余白）
-- border （枠線）
-- margin （外余白）
CENTER:&ref(boxmodel01.gif);
>http://html-coding.co.jp/knowhow/tips/000014/
''ボックスモデルの概念''
ボックスモデルとはブロックレベル要素がもつ短形領域の概念...
- 背景色の指定は、marginには適用されない。
CENTER:&ref(boxmodel02.jpg);
>http://www.justmystage.com/home/hodogaya/css11.html
''マージン領域は常に透明として扱われます''
ボックスと背景の関係ボックスに背景を指定した場合、内容領...
|>| プロパティ | 効果 | 指定できる値 |h
| マージン | margin | マージンの一括指定 | 長さ、%、auto |
|~| margin-top | 上下左右のマージン | 長さ、%、auto |
|~| margin-right |~|~|
|~| margin-bottom |~|~|
|~| margin-left |~|~|
| ボーダー | border | ボーダーの一括指定 | 太さ、形状、色...
|~| border-width | ボーダーの太さ | 長さ、thin、medium、t...
|~| border-style | ボーダーの形状 | solid、dotted、dashed...
|~| border-color | ボーダーの色 | #rrggbb、#rgb、色名、tr...
|~| border-top | 上下左右のボーダー | 太さ、形状、色をス...
|~| border-right |~|~|
|~| border-bottom |~|~|
|~| border-left |~|~|
| パディング | padding | パディングの一括指定 | 長さ、% |
|~| padding-top | 上下左右のパディング | 長さ、% |
|~| padding-right |~|~|
|~| padding-bottom |~|~|
|~| padding-left |~|~|
| 幅と高さ | width | 内容の幅 | 長さ、%、auto |
|~| height | 内容の高さ | 長さ、%、auto |
| 幅と高さの最大/最小 | max-width, max-height | 内容の最...
|~| min-width, min-height | 内容の最小幅と最小高さ | 長さ...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
