今日は主にclass属性とid属性をまとめて、HTMLのタグをいくつか説明します！
１年１組 かぜはやえりです！
このタイトルでいうと「１年１組」がclass属性、「かぜはやえり」がid属性となります。
HTMLで記述し、CSSで装飾するときの目印になります。
class属性…分類を割り当てる（１ページに何度でも使用可）
id属性…固有名詞を割り当てる（１ページに１回のみ）
ここからはCodeCampusさんの記事を参考にまとめていきます！
HTMLとCSSでの使い方
<h1 class=”font36″>これはタイトル</h1>
<p id=”font12″>サイズ12のフォント</p>
<p class=”font24″>サイズ24のフォント</p>
<p class=”font36″>タイトルと同じサイズ</p>
こんな感じでコードを書いたとします。
このままではすべて同じサイズで表示されています。
そこでCSSに移動して
#font12 { font-size:12px;}
.font24 { font-size:24px;}
.font36 {font-size+36px;}
と入力すると文字サイズが上の<p>から36、12、24、36に変更されます。
idに対するCSSの指示は「#」で
classに対するCSSの指示は「.」でします。
複数選択できるclass
<p class=”font24 red”>サイズ２４で赤</p>
<p class=”font24 green”>サイズ２４で緑</p>
<p class=”font24 blue”>サイズ２４で青</p>
こんな感じでフォントと色に関するclassを２つ並べて指示したとします。
これに対し、CSSでの記述は
.font24 {font-size:24px;}
.red {color: #ff0000;}
.green {color: #00ff00;}
.blue {color: #0000ff;}
とすることで、全てサイズ24pxで、上から赤、緑、青になります。
ページ内リンクが使えるid
id属性は１ページの中で１回しか使えないので、同じページ内だけどリンクをクリックすると、目的の項目までジャンプできるという特徴があります。
例えばidでフッターがある位置に<div id=”footer”></div>で記述しておくと
<a href=”#footer”>ページ末尾へ</a>
というリンクを貼れば一気にフッターまでたくさんスクロールしなくても飛べます。
HTMLのタグpart2
プログラミングノートno.1で紹介したタグに加えて新しいタグが本に載っていたので追加でまとめます。
br 文中で改行
<p></p>の間で<br>を入れることで強制的に改行することができる。
span 段落の一部だけ装飾したい時に囲う
タイトルはあくまで使用例ですが
<p>こんにちは！<span>かぜはやえり</span>です！</p>
のように囲って、「かぜはやえり」の部分だけCSSで太字の指示をします。
<tr>、<th>、<td></td>、<table><table>表を作成
tr…表の行
th…表の見出しセル
td…表のデータセル
table…表を作成
例えば、経歴を表で書く場合
<table>
<tr>
<th>1994年6月21日</th>
<td>愛知県名古屋市で生まれる</td>
</tr>
<tr>
<th>1996年9月9日</th>
<td>東京ディズニーランドのミッキーを見てダンスがしたいと言う</td>
</tr>
</table>
とします。枠の設定などはCSSで行いますがそれは次回まとめます！
次回はWebサイトの背景関連につづく…
