プログラミング

プログラミングノート no.4

今日は主にclass属性とid属性をまとめて、HTMLのタグをいくつか説明します!

1年1組 かぜはやえりです!

このタイトルでいうと「1年1組」がclass属性、「かぜはやえり」がid属性となります。

HTMLで記述し、CSSで装飾するときの目印になります。

class属性…分類を割り当てる(1ページに何度でも使用可)

id属性…固有名詞を割り当てる(1ページに1回のみ)

ここからは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”>サイズ24で赤</p>

<p class=”font24 green”>サイズ24で緑</p>

<p class=”font24 blue”>サイズ24で青</p>

こんな感じでフォントと色に関するclassを2つ並べて指示したとします。

これに対し、CSSでの記述は

.font24 {font-size:24px;}

.red {color: #ff0000;}

.green {color: #00ff00;}

.blue {color: #0000ff;}

とすることで、全てサイズ24pxで、上から赤、緑、青になります。

ページ内リンクが使えるid

id属性は1ページの中で1回しか使えないので、同じページ内だけどリンクをクリックすると、目的の項目までジャンプできるという特徴があります。

例えば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サイトの背景関連につづく…

ABOUT ME
KAZEPA
1994年名古屋生まれ横浜育ち大阪在住。 3歳からダンスと共に育ち、中高バレーボール部、大学は東海大学体育学部で割とアクティブに過ごす。そして現在はエンターテイナー兼クリエイターとして人生を楽しんでいる。