cssの書き方
前回の続き
前回は、HTMLにCSSを見込ませるところまででした。
今回は、CSSの書き方について少しお話いたします。
CSSは、HTMLにデザインを追加することができます。
つまりデコれる！！ｗ
文字にデザインを追加したり、背景をつけたり
少し動きをつけたりなどさまざまなことができます。
記述の仕方ですが。
body{
margin: 2px;
background-color: red;
font-size: 12px;
borber: 1px #ccc solid;
}
のように書きていきます。
HTMLの記述ででてきた、bodyやtableなどを
始めに書く。
table
その次に { をつける！
もちろん } ちゃんと閉じてください。
そうすることで、bodyところに色がついたり、
文字の大きさが変化したり、間をあけたり、線を描いたり
などができます。
HTMLで記述している要素に対して、
デザインを追加できます。
HTMLにないものは、デザインを追加できません。
次は、クラス（class）とIDについて
CSSでは、クラスとIDをつけてその部分だけを編集することが可能です。
まずは、HTMLにclassを追加してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>プログラミング</title>
</head>
<body>
<h1>見出し</h1>
<p>文字文字文字</p>
<table>
<tr>
<th class="midashi">金額</th>
<th id="midashi">内容</th>
</tr>
<tr>
<td>100円</td>
<td>鉛筆</td>
</tr>
</table>
</body>
</html>
赤字のように追加しました。
たとえば表の見出しの色のみを変化させたい場合は、
th class="kinngaku"を追加する。
また、ほかの書き方でこんな形でも可能です。
<h1>見出し</h1>
<p>文字文字文字</p>
<table>
<tr>
<div class="midashi">
<th>金額</th>
<th>内容</th>
</div>
<tr>
上記では、div で囲った範囲がCSSで変更可能になります。
これをidにしたいときは、classの部分をidに変更するだけでOKです！
HTMLに追加したら、次は
CSSです。
まずは、クラスを変更します。
.midashi{
margin: 2px;
background-color: red;
font-size: 12px;
borber: 1px #ccc solid;
}
これで変更できます。
要素の前にドットをつけてください。
idの場合は
要素の前に#をつければOK！！
あとは、自分でお好みのCSSを記述していってください！！
参考までに。
