HTML 属性を使用して、HTML要素の色、サイズ、およびその他の機能を変更できます。 たとえば、属性を使用して、テキスト要素のフォントの色やサイズ、または画像要素の幅と高さを変更できます。 このチュートリアルでは、HTML属性を使用して、HTMLテキスト要素のサイズと色のプロパティの値を設定する方法を学習します。
HTML属性は、次のように開始タグに配置されます。
<element attribute="property:value;">
一般的な属性の1つはstyleで、これを使用するとHTML要素にスタイルプロパティを追加できます。 別のスタイルシートを使用してHTMLドキュメントのスタイルを決定するのが一般的ですが、このチュートリアルではHTMLドキュメントのstyle属性を使用します。
スタイル属性の使用
<h1>要素の複数のプロパティをstyle属性で変更できます。 「index.html」ファイルをクリアして、以下のコードをブラウザに貼り付けます。 （チュートリアルシリーズに従わなかった場合は、チュートリアルHTMLプロジェクトのセットアップでindex.htmlファイルのセットアップ手順を確認できます。
<h1 style="font-size:40px;color:green;">This text is 40 pixels and green.</h1>
ブラウザにファイルをロードする前に、このHTML要素の各部分を確認しましょう。
h1はタグの名前です。 これは、最大サイズの見出し要素を指します。styleは属性です。 この属性は、さまざまな異なるプロパティを取ることができます。font-sizeは、style属性に設定する最初のプロパティです。40px;は、プロパティfont-sizeの値であり、要素のテキストコンテンツを40ピクセルに設定します。colorは、style属性に設定する2番目のプロパティです。greenは、プロパティcolorの値であり、テキストコンテンツの色を緑に設定します。
プロパティと値は引用符で囲まれ、property:valueの各ペアはセミコロン;で終わることに注意してください。
ファイルを保存して、ブラウザにリロードします。 （ブラウザにファイルをロードする手順については、チュートリアルを参照してください。）次のようなメッセージが表示されます。
このテキストは40ピクセルで緑色です。
これで、style属性を使用して、テキスト要素のフォントサイズとフォントの色を変更する方法を学習しました。 テキストまたは画像へのリンクを追加できる<a>要素や、次のことができる<img>要素など、特定の要素require属性に注意してください。ドキュメントに画像を追加します。 次のチュートリアルではこれら2つの要素について説明し、チュートリアルシリーズの後半で<div>コンテナおよびその他のHTML要素の追加の属性の使用法について学習します。
