cssにつて
CSSとは何か
- 正式名称 : Cascading Syle Sheets(カスケーディングスタイルシート)
- ページレイアウトを形成するためのスタイルシート
- HTML = マークアップ,CSS = レイアウト
記述方法の種類
- インラインCSS : body内の各種タグの中に記述する
インラインスタイルシートと呼ぶ場合もある
- 内部CSS : headタグの中に記述
内部スタイルシートと呼ぶ場合もある
- 外部ファイル(.css)
外部スタイルシートと呼ぶ場合もある- コンテンツとデザインの分離ができるので、外部ファイルに記述するのが基本
1.インラインCSS : body内の各種タグの中に記述する
一つ一つのタグに設定する必要がある
インラインCSSと呼ばれる書き方で、直接タグの中で
style属性を指定する1
style=属性:"属性値"color属性で色を変える例1
<p style="color:blue">今回は、新しくリリースするプロダクトの紹介をします</p>複数の属性指定したい場合、;を入力することで指定できる1
<p style="color:blue;font-size:300%">今回は、新しくリリースするプロダクトの紹介をします</p>
2.内部CSS : headタグ内に記述する
headタグの内部に記述するCSS- 具体的には
headブロック内にstyleブロックを作成し、そこにスタイルを記述する1
2
3
4
5
6
7
8
9
10<html>
<head>
<style>
<!--ここにスタイルを記述する-->
</style>
</head>
<body>
</body>
</html>
スタイルの記述には２通りの方法がある
- タグ全体に適応する
- 指定した領域のみに適応する
1. タグ全体に適応する
styleブロック内にタグ名のブロックを作り、そこにスタイルを記述する- 複数のスタイルを記述する場合、
;で区切る1
2
3
4
5
6
7<style>
<!--pタグ内の全てのテキストにここに記述したレイアウトが適応される-->
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></span>)を定義してclass属性にクラス名を指定して、styleブロックに.クラス名でスタイルを記述するclassidとの違いは、タグに対するレイアウトではなく、文字列に対するレイアウトである点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>
