今回の概要と目標 0:13
HTML入門講座2回目は、HTMLの属性とは何かと属性の指定方法を学習し、最終的には、html 要素に lang 属性を指定できるようになりましょう。
RERUN
HTMLの属性とは 0:50
HTMLの各要素には、属性という何かしらの設定を付ける事ができます。
属性は、開始タグの要素名の後ろに半角スペースを開けて、「属性名=”属性値”」の書式で記述します。
<要素名 属性名="属性値">
〇〇の 〇〇は 〇〇です
属性値を囲む引用符は「"（ダブルクオート）」の代わりに、「'（シングルクオート）」を使っても構いません。
例えば、Chapter01で紹介した、html要素には、lang属性という属性を指定することが推奨されています。このlang属性は、その要素内の言語が、何語かを指定をする属性で、この属性をhtml要素に指定することで、音声でWebサイトを読み上げるソフトや、自動翻訳機などにページの言語を伝えるサポートをすることができます。
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Webの勉強を開始</title>
</head>
<body>
<p>伝説のWebクリエーターに、俺はなる！</p>
</body>
</html>なお、属性を複数指定する必要がある場合は、半角スペースで区切ることで必要な数だけ順不同で指定することができます。
<要素名 属性名1="属性値1" 属性名2="属性値2">また、よく引用符を閉じ忘れて、うまく表示されないという人が多いので、属性値は引用符で囲むという事を覚えておいて下さい。
属性の種類 3:58
属性には、特定の要素にのみ指定できる属性と、どの要素にでも指定できるグローバル属性の2種類があります。特定の要素にのみ指定できる属性に関しては、その要素を紹介するタイミングで合わせて紹介します。
グローバル属性
グローバル属性はどの要素にも指定することができる属性です。
先程紹介した、lang属性も、このグローバル属性になります。以下に主なグローバル属性を紹介します。ただし今は、どの要素にも使える属性があるということだけを理解して頂ければ良いので、さらっと目を通すだけで大丈夫です。
| 属性名 | 役割 |
|---|---|
id |
要素に固有の名前を指定する属性。 |
class |
要素に分類名（種類）を指定する属性。 |
title |
要素に補足情報を指定する属性。 |
lang |
要素内の言語を言語コードで指定する属性。 （日本語："ja"、英語："en" など） |
これらが主なグローバル属性になりますが、他にも多数のグローバル属性が存在しますので、必要に応じて確認して見てください。
lang属性を使ってみよう 4:33
では、実際にlang属性を使ってみましょう。
-
「Chapter02」フォルダ内の「index.html」をテキストエディタで開く
（テキストエディタでHTMLファイルを開くときは、そのファイルをテキストエディタの画面内か、アイコンにドラッグ＆ドロップしたら開けます。） -
下記を参考に、1行目の
html要素に「lang属性」を追記
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Webの勉強を開始</title>
</head>
<body>
伝説のWebクリエーターに、おれはなる！
</body>
</html>-
上書き保存し、ブラウザで開く
（「Chapter02」フォルダ内の「index.html」をダブルクリック） - 見た目に何も変化がないことを確認
RERUN
練習問題 8:07
「Chapter02」 › 「quest」フォルダ内の「index.html」を開いて下記の属性を指定して下さい。なお、解けた問題は問題文の横のチェックボックスをオンにしましょう。
-
- 要素内の言語： en（英語）
RERUN
まとめ 10:40
HTMLの属性が何かわかりましたか？
- 属性は要素に何かしら設定を付けるもの
- 属性は開始タグの要素名の後ろに記述する
html要素にはlang属性を指定する