• 投稿者:
  • 投稿コメント:0件のコメント
  • 投稿カテゴリー:HTML
  • 投稿の最終変更日:2021年3月23日

id属性の使用

この id属性は、HTML要素の一意のIDを指定します(値はHTMLドキュメント内で一意である必要があります)

id値をCSSおよびJavaScriptで使用して、特定のid値を持つ要素に対して特定のタスクを実行できます

CSSで、特定のIDを持つ要素を選択するには、ハッシュ(#)文字を記述し、その後に要素のIDを続けます:

例文

CSSを使用して、「myHeader」というIDを持つ要素をスタイルします。:

<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding:
40px;
  text-align: center;
}
</style>

<h1 id=”myHeader”>My Header</h1>

結果:

My Header

ヒント: id属性は、任意 の HTML要素で使用できます。
ノート: id値は大文字と小文字が区別されます。
ノート: id値には少なくとも 1 文字 を含める必要があり、空白(スペース、タブなど)を含めることはできません。


クラスとIDの違い

HTML要素は、その単一の要素に属する一意のIDを1つしか持つことができませんが、クラス名は複数の要素で使用できます。:

例文

<style>
/* Style the element with the id “myHeader”
*/
#myHeader {
  background-color: lightblue;
 
color: black;
  padding:
40px;
  text-align: center;
}

/* Style all
elements with the class name “city” */
.city
{
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!– A unique element –>
<h1 id=”myHeader”>My
Cities</h1>

<!– Multiple similar elements –>
<h2 class=”city”>London</h2>
<p>London is the capital of England.</p>

<h2 class=”city”>Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class=”city”>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

スポンサーリンク

IDとリンク付きのブックマーク

HTMlブックマークは、読者がWebページの特定の部分にジャンプ出来るようにするために使用されます。

ブックマークは、Webページが非常に長い場合に役立ちます。

ブックマークを作成するには、まずブックマークを作成してから、リンクを追加する必要があります。

リンクをクリックすると、ページはブックマークのある場所までスクロールします。

最初に id 属性を使用してブックマークを作成します。:

<h2 id=”C4″>Chapter 4</h2>

次に、同じページ内からブックマークへのリンク(”Jump to Chapter 4″), を追加します。:

<a href=”#C4″>Jump to Chapter 4</a>

または、別のページからブックマークへのリンク(”Jump to Chapter 4″), を追加します。:

例文

<a href=”html_demo.html#C4″>Jump to Chapter 4</a>

スポンサーリンク

JavaScriptでid属性を使用する

JavaScriptは、次の getElementById() メソッドを使用して、指定されたIDを持つ要素にアクセスできます。:

例文

id属性を使用して、JavaScriptでテキストを操作します。:

<script>
function displayResult() {
  document.getElementById(“myHeader”).innerHTML = “Have a nice day!”;
}
</script>

コメントを残す