HTML（HyperText Markup Language）の属性の中には、値としてCSS（Cascading Style Sheets）の単位を含む数値を使用できるものがあります。
普段あまり好まれて使用するようなものではないですが、jQueryのプラグインなどで使用されている事や古いサイトなどでは使用されているのをちらほらと見かけることがあるHTMLタグに直接CSSの単位を使用する方法です。
今回は、これらの属性とCSS単位の使い方について詳しく解説します。
HTML属性とCSS単位
HTML属性は要素に追加情報を提供するために使用されます。
これらの属性には数値だけでなくCSS単位を付けた数値を含めることができるものがあります。
代表的な属性例
widthheightborder（CSSのプロパティとして使うことが一般的）cellpaddingcellspacingsize（input要素のsize属性）
使用例と説明
1. widthとheight属性
これらの属性は、要素の幅と高さを指定します。単位を付けることで、ピクセル（px）、パーセンテージ（%）、emなどの異なる単位でサイズを設定できます。
例
<img src="image.jpg" width="300px" height="200px">この例では、画像の幅を300ピクセル、高さを200ピクセルに設定しています。
まだレスポンシブデザインといったものがなく、20年以上のサイトなどではよくこの方法も使用されていましたが、現在ではほぼほぼ見なくなりました。
2. cellpaddingとcellspacing属性
これらの属性は、HTMLテーブル内のセルの間隔を設定します。
単位を付けることで、ピクセルなどの単位で間隔を調整できます。
例
<table cellpadding="10px" cellspacing="5px">
<tr>
<td>セル1</td>
<td>セル2</td>
</tr>
</table>この例ではセル内のパディングを10ピクセルセル間の間隔を5ピクセルに設定しています。
こちらも、width同様20年以上前などには見られた方法ですが、現在はCSSで最初にリセットしてしまって、そこから装飾をしていくといった方法をとられていることが多いかと思いますので、ほぼほぼ使用されていない方法になると思います。
3. size属性
input要素のsize属性は、入力フィールドの幅を文字数で指定しますが、ピクセル単位でも設定できます。
例
<input type="text" size="20px">この例では、入力フィールドの幅を20ピクセルに設定しています。
CSS単位の種類
CSS単位には多くの種類があります。以下はその主なものです。
1. ピクセル（px）
ピクセルは、スクリーン上の1画素を表します。固定サイズの要素に適しています。
2. パーセンテージ（%）
パーセンテージは、親要素のサイズに対する相対的なサイズを指定します。レスポンシブデザインに適しています。
3. emとrem
emは、現在のフォントサイズに対する相対サイズを指定します。remは、ルート要素のフォントサイズに対する相対サイズを指定します。
4. ビューポート単位（vw、vh）
vwはビューポートの幅の1%、vhはビューポートの高さの1%を表します。ビューポート全体に対する相対サイズを設定するのに適しています。
まとめ
HTML属性にCSS単位を使用することで要素のサイズやスタイルを柔軟に設定できます。
widthやheight以外にも、cellpaddingやcellspacing、size属性など、さまざまな属性でCSS単位を活用することができます。
現在ほぼほぼ使用されていない記述になるとは思いますが、これらの知識を理解しておくことで柔軟に対応することが可能になるほか、ウェブデザイン技能検定においても、このような基礎知識をしっかりと理解しておくことが重要です。
