05. styleタグ
レッスン4では、style属性を使って表に罫線をつけました。このレッスンでは、<style>タグを使ってスタイルをまとめて書く方法を学びます。
styleタグを使う
レッスン4では、style属性を使って直接スタイルを指定しました。
<table style="border: solid 1px black; border-collapse: collapse;">
<tr style="border-bottom: solid 1px black;">
この方法でも動きますが、スタイルの指定が増えてくると管理が大変になります。
<style>タグを使うと、スタイルをまとめて書くことができます。<head>の中に<style>タグを追加して、スタイルを移動してみましょう。
<!-- battle.html highlight:6-17 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>バトル</title>
<style>
table {
border: solid 1px black;
border-collapse: collapse;
}
tr {
border-bottom: solid 1px black;
}
img {
width: 400px;
}
</style>
</head>
<body>
<table>
<tr>
<th>ゆうしゃ</th><th>せんし</th><th>そうりょ</th><th>まほうつかい</th>
</tr>
<tr><td>HP 153</td><td>HP 198</td><td>HP 101</td><td>HP 77</td></tr>
<tr><td>MP 25</td><td>MP 0</td><td>MP 35</td><td>MP 58</td></tr>
</table>
<div>
<img src="img/dark-lord.png">
</div>
<div>
まおうがあらわれた。
</div>
</body>
</html>
内容の説明
styleタグ
<style>タグは、CSSをHTMLファイルの中に書くためのタグです。<head>の中に書きます。
<style>タグはstyle属性と違って、複数の要素にまとめてスタイルを適用できます。
CSSの基本構造
table {
border: solid 1px black;
}
table- セレクタ（どの要素に適用するか）border- プロパティ（何を変えるか）solid 1px black- 値（どう変えるか）
確認しよう
ブラウザで確認すると、問題が起きています。すべての行に下線が付いてしまいました。
これは、trというセレクタが「すべての<tr>要素」に適用されるためです。レッスン4では1行目の<tr>にだけstyle属性を付けていたので問題ありませんでしたが、<style>タグでは区別がつきません。
classで特定の要素を指定する
特定の要素だけにスタイルを適用するには、class属性を使います。
1行目の<tr>にclass="name-row"を追加します。名前（name）の行（row）だからname-rowです。
<!-- battle.html selection:20-26 highlight:21 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>バトル</title>
<style>
table {
border: solid 1px black;
border-collapse: collapse;
}
tr {
border-bottom: solid 1px black;
}
img {
width: 400px;
}
</style>
</head>
<body>
<table>
<tr class="name-row">
<th>ゆうしゃ</th><th>せんし</th><th>そうりょ</th><th>まほうつかい</th>
</tr>
<tr><td>HP 153</td><td>HP 198</td><td>HP 101</td><td>HP 77</td></tr>
<tr><td>MP 25</td><td>MP 0</td><td>MP 35</td><td>MP 58</td></tr>
</table>
<div>
<img src="img/dark-lord.png">
</div>
<div>
まおうがあらわれた。
</div>
</body>
</html>
そして、<style>タグの中で.name-rowと指定します。
<!-- battle.html selection:6-17 highlight:11-13 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>バトル</title>
<style>
table {
border: solid 1px black;
border-collapse: collapse;
}
.name-row {
border-bottom: solid 1px black;
}
img {
width: 400px;
}
</style>
</head>
<body>
<table>
<tr class="name-row">
<th>ゆうしゃ</th><th>せんし</th><th>そうりょ</th><th>まほうつかい</th>
</tr>
<tr><td>HP 153</td><td>HP 198</td><td>HP 101</td><td>HP 77</td></tr>
<tr><td>MP 25</td><td>MP 0</td><td>MP 35</td><td>MP 58</td></tr>
</table>
<div>
<img src="img/dark-lord.png">
</div>
<div>
まおうがあらわれた。
</div>
</body>
</html>
これで、class="name-row"が付いた要素だけに下線が付きます。
class属性とセレクタ
class属性は、要素に名前を付けるための属性です。同じクラス名を複数の要素に付けることができます。
CSSでクラスを指定するには、クラス名の前に.（ドット）を付けます。
tr- すべての<tr>要素.name-row-class="name-row"が付いた要素
試してみよう
<style>タグの中に別のスタイルを追加してみましょう- クラス名を変えて、CSSのセレクタも変えてみましょう
これまでの成果
<!-- battle.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>バトル</title>
<style>
table {
border: solid 1px black;
border-collapse: collapse;
}
.name-row {
border-bottom: solid 1px black;
}
img {
width: 400px;
}
</style>
</head>
<body>
<table>
<tr class="name-row">
<th>ゆうしゃ</th><th>せんし</th><th>そうりょ</th><th>まほうつかい</th>
</tr>
<tr><td>HP 153</td><td>HP 198</td><td>HP 101</td><td>HP 77</td></tr>
<tr><td>MP 25</td><td>MP 0</td><td>MP 35</td><td>MP 58</td></tr>
</table>
<div>
<img src="img/dark-lord.png">
</div>
<div>
まおうがあらわれた。
</div>
</body>
</html>