に投稿に更新
cssにつて
CSSとは何か
- 正式名称 : Cascading Syle Sheets(カスケーディングスタイルシート)
- ページレイアウトを形成するためのスタイルシート
- HTML = マークアップ,CSS = レイアウト
記述方法の種類
- インラインCSS : body内の各種タグの中に記述する
- 内部CSS : headタグの中に記述
- 外部ファイル(.css)
外部スタイルシートと呼ぶ場合もある- コンテンツとデザインの分離ができるので、外部ファイルに記述するのが基本
1.インラインCSS : body内の各種タグの中に記述する
スタイルの記述には２通りの方法がある
- タグ全体に適応する
- 指定した領域のみに適応する
1. タグ全体に適応する
styleブロック内にタグ名のブロックを作り、そこにスタイルを記述する- 複数のスタイルを記述する場合、
;で区切る1
2
3
4
5
6
7
| <style>
p{
color:blue;
font-size:150%;
}
</style>
|
2. 指定した領域のみに適応する
class属性を使用する
id属性を使用する
span属性を使用する
1. class属性を使用する
class属性にクラス名を指定し、styleブロックに.クラス名でスタイルを記述する - 同一のクラス名を他のタグにも割り当てることができる
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <html>
<head>
<style>
.A{
color:blue;
font-size:150%;
}
</style>
</head>
<body>
<h1 class="A">クラスでスタイルを指定しています</p>
<p class="A">クラスでスタイルを指定しています</p>
<p> クラス名を指定していません</p>
</body>
</html>
|
2. id属性を使用する
id属性を定義してid名を指定して、styleブロックに#id名でスタイルを記述する - 1つのタグにしか適応できない
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <html>
<head>
<style>
#B{
color:blue;
font-size:150%;
}
</style>
</head>
<body>
<h1 id="B">クラスでスタイルを指定しています</p>
<p><クラス名を指定していません/p>
<p> クラス名を指定していません</p>
</body>
</html>
|
3. span属性を使用する
spanタグ(\\</span>)を定義してclass属性にクラス名を指定して、styleブロックに.クラス名でスタイルを記述するclass idとの違いは、タグに対するレイアウトではなく、文字列に対するレイアウトである点1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <html>
<head>
<style>
.C{
color:blue;
font-size:150%;
}
</style>
</head>
<body>
<h1>クラスでスタイルを指定しています</p>
<p>クラス名を<span class="C">指定</span>していません</p>
<p>クラス名を指定していません</p>
</body>
</html>
|
