タグの中にidとかclassとかいろいろ書いてあるんだけど、これ何？
それは属性と呼ばれるもので、タグに名前を付けたりすることが出来るものだよ。HTMLを理解する上でとっても重要だから、しっかり学ぼうね。
- HTMLタグの属性とは
- よく使う属性
前回のゼロわかはこちら▼
HTMLタグの属性って？
タグに対する追加情報のことで、そのタグを区別することに使ったり、読み込むファイルを指定出来たりします。
英語で表現すると「attribute」で、追加情報と言った意味。ファンタジーで出てくる属性であるelementとは違うので注意しましょう。
属性では「属性値」を設定して具体的に指示を出すことができ、aタグを例にすると以下のように使われます。
この画像ではhrefという属性の属性値として”index.html”を指定して、index.htmlへのリンクを”indexへ”というテキストに付与しています。
属性と値の書き方については以下のルールがあります。
- タグと属性の間に半角スペースを入れる
- 属性と属性値は「=」イコールで結ぶ
- 属性値は「”」ダブルクォーテーションで囲む
- 属性は複数指定可能（重複は不可）
- タグごとに使える属性は限定されている
- 属性値は指定できる値が決められている
タグも多いのに、属性って言うのまで覚えないといけないの？
大丈夫。属性はタグほど多くないし、ほとんど特定のタグとセットになっているから結構簡単だよ。
HTMLタグでよく使う属性一覧
HTMLタグでよく使う属性一覧が以下です。
太字にしているものは、その中でも特に使う属性です。
| タグ | 属性 | 属性値 | 解説 |
|---|---|---|---|
| すべて | id | 任意(半角英数とハイフン) | 固有名（重複使用不可） |
| class | 任意(半角英数とハイフン) | 種別名（重複使用可能） | |
| style | CSSの内容 | CSSの直接指定 | |
| a | href | リンク先のURL | リンク先を指定 |
| target | _blank | 別タブで開く | |
| img | src | 画像ファイルのURL | 画像を表示させる |
| alt | 任意（全角） | 画像の説明 | |
| width | 半角数字 | 画像の幅 | |
| height | 半角数字 | 画像の高さ | |
| table | border | 1 | 表の罫線 |
| td,th | colspan | 半角数字 | 横結合 |
| rowspan | 半角数字 | 縦結合 | |
| input | type | text | テキストボックス |
| radio | ラジオボタン | ||
| checkbox | チェックボックス | ||
| submit | 送信 | ||
| name | 任意(半角英数) | 項目に名前をつける | |
| value | 任意 | 入力内容 | |
| label | for | 任意(半角英数) | 表示名 |
最重要属性！全ての要素に使えるidとclass
CSSやJavaScriptの操作とは切っても切れない最重要属性がidとclassです。
どちらも要素に名前を付ける役割ですが、付けた名前が重複使用可能かどうかで使い方を分けます。
サンプル
<div class="this-is-class" id="this-is-id">サンプル</div>class
要素に種別名を付けることが出来ます。
種別名は別の要素にも全く同じものを適用することが出来、まとめて同じCSSを適用したい時などに使用します。
主に要素へCSSを適用したり、JavaScriptで操作するために使用します。
id
要素に固有名を付けることが出来ます。
ただし、そのWebページにつきid名は一つしか使えません。
そのため、classでまとめて操作をしたくない要素などに使用して、一つの目的のために付けることが多いです。
主に要素へCSSを適用したり、JavaScriptで操作するために使用します。
classとidの使い分け
どちらも似たものですが、使い分けはその適用範囲によります。
ざっくりいうとclassは広範囲、idは特定の要素だけが範囲です。基本的にはclassを使用することを意識して、classだけではどうしようもなくなった時にidを使用しましょう。
まとめてスタイルを適用したりしたい時はclass、特定の要素だけに絞ってスタイルを適用したり操作したりしたい時はidを使うといいでしょう。
idはJavaScriptによる操作の時に付けることが経験上多いよ。
各種HTMLタグ特有の属性
aタグ
サンプル
<a href="sample.html" target="_blank">サンプル</a>
href
超重要属性。リンク先を指定します。URLや同一ページの特定箇所が指定可能です。
aタグはこの属性がないと役に立たないので、タグとセットで覚えましょう。
target
リンク先の開き方を設定します。
いくつか属性値はありますが、別タブでリンク先を開く”_blank”を覚えておけばいいでしょう。
imgタグ
サンプル
<img src="サンプル.jpg" alt="サンプル画像です" width="200" height="250">src
超重要属性。ファイルの場所（URL）を指定します。
imgタグはこの属性がないと役に立たないので、タグとセットで覚えましょう。
alt
画像を説明するテキストを記載します。
Webページでは表示されることは少ないですが、画像が読み込めないときや、検索時に使用されたりします。
width
画像の横幅を指定します。
指定方法は以下です。
| 設定値 | 解説 |
|---|---|
| auto | 自動で調整します。初期値はこれ。 |
| 数値指定（pxなど） | 指定された横幅で画像を表示します。 |
| %表示 | 要素に対する割合で画像を表示します。 |
height
画像の縦幅を指定します。
指定方法は以下です。
| 設定値 | 解説 |
|---|---|
| auto | 自動で調整します。初期値はこれ。 |
| 数値指定（pxなど） | 指定された横幅で画像を表示します。 |
| %表示 | 要素に対する割合で画像を表示します。 |
tableタグ
サンプル
<table border="1">
<tr>
<td colspan="2">横結合セル</td>
</tr>
<tr>
<td>サンプルセル</td>
<td>サンプルセル</td>
</tr>
<tr>
<td rowspan="2">縦結合セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
</tr>
</table>| 横結合セル | |
| サンプルセル | サンプルセル |
| 縦結合セル | セル |
| セル | |
border
表に罫線を付ける場合に設定します。罫線を付ける場合は”1″を指定します。
td,thタグ
colspan
表を横結合する属性です。
値は数値を指定し、結合したい項目数を指定します。
例えば、2個の項目を結合したい場合は2を指定します。
rowspan
表を縦結合する属性です。
値は数値を指定し、結合したい項目数を指定します。
例えば、2個の項目を結合したい場合は2を指定します。
inputタグ
inputタグは少し特殊で、typeの値によってその内容を変えます。
type
それぞれ以下の値を設定可能です。
| 設定値 | 解説 |
|---|---|
| text | テキストボックス |
| radio | ラジオボタン |
| checkbox | チェックボックス |
| submit | 送信 |
textサンプル
<input type="text" placeholder="ここに文字を入力してください">radioサンプル
<input type="radio" name="sample" id="id1" value="値1"><label for="aaa">ラベル1</label><br>
<input type="radio" name="sample" id="id2" value="値2"><label for="bbb">ラベル2</label><br>
<input type="radio" name="sample" id="id3" value="値3"><label for="ccc">ラベル3</label>checkboxサンプル
<input type="checkbox" name="sample" id="id1" value="値1"><label for="aaa">ラベル1</label><br>
<input type="checkbox" name="sample" id="id2" value="値2"><label for="bbb">ラベル2</label><br>
<input type="checkbox" name="sample" id="id3" value="値3"><label for="ccc">ラベル3</label><input type="submit" value="送信">name
項目グループに名前を付けます。
CSSやJavaScriptなどの操作に使用します。
value
入力された値です。
主にsubmitで送信されたときに使用します。
このページではこれだけ覚える！
超頻出属性4個
| タグ | 属性 | 属性値 | 解説 |
|---|---|---|---|
| すべて | id | 任意(半角英数とハイフン) | 固有名（重複使用不可） |
| class | 任意(半角英数とハイフン) | 種別名（重複使用可能） | |
| a | href | リンク先のURL | リンク先を指定 |
| img | src | 画像ファイルのURL | 画像を表示させる |
とりあえずこの4つだけ覚えましょう！
今回のゼロわか
- HTMLタグの属性とは
- タグに対する追加情報のこと
- よく使う属性
- ひとまずidとclassを覚えよう
お疲れさまでした。
今回は、HTMLの属性をゼロからわかっていただきました。
次に学ぶこと
次は超重要なaタグについて詳しく学びます。
エンジニアの大敵である腰痛が気になる人はこちらもどうぞ。
プログラミングをゼロから学ぶあなたはこちらから▼
