【初心者向け】HTMLの属性とCSSプロパティについて徹底解説
「HTMLのプロパティと属性って何が違うんだろう？」
「HTMLのプロパティってそもそも何？」
上記のような疑問を抱えている方も多いのではないでしょうか？
HTMLとCSSには数多くの専門用語があるので、用語の意味が交差して分からなくなりますよね。
今回、WEBCAMP MEDIAは、HTMLの属性とCSSプロパティについて解説していきます。
- HTMLの属性とは
- CSSプロパティとは
以上の項目に沿って説明します。
この記事を読むことで、HTMLの属性とプロパティの違いを理解し、HTML属性とCSSプロパティを正しく使うことができるので、ぜひチェックしてみてくださいね！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
HTMLに属性を付けると色々な性質を与えられる
HTMLに追加できる性質のことを属性といいます。属性にはさまざまな種類があり、HTML要素に追加することで各属性が持っている性質を利用できます。
中には、HTMLで利用する属性のことをプロパティと認識している方もいるのではないでしょうか？
属性は英語でproperty(プロパティ)と表現するので、HTMLの属性をプロパティと呼ぶことも正解ですが、一般的には属性と表現することが多いです。
また、属性が持っている性質の役割部分を属性値といいます。
<HTML要素 属性="属性値">HTML要素と属性の間は半角スペースで空間を作り、属性と属性値はイコール(=)でつなぎます。
たとえば、pタグにstyleという属性を付けるとcssを追加できるようになります。
<p style="color: red;">スタイルを赤色に変更する</p>上記コードは、style属性にCSSのcolorというプロパティを使って赤色を設定しています。styleの部分が属性でcolorの部分が属性値です。
よく使うHTMLの属性とグローバル属性一覧
HTMLには、特定の要素のみ追加で切る属性と全ての要素に追加できるグローバル要素の2種類あります。
HTMLコーディングでよく利用する要素と属性のペアと、グローバル属性を紹介していきます。
CSSプロパティはHTMLの見た目を変更できる
HTMLのスタイルを変更する際に利用するのが、CSSプロパティです。HTML要素にCSSプロパティを追加することで、要素の見た目や役割を変えることができます。
CSSプロパティの記述方法は下記になります。
HTML要素またはclass名{
プロパティ: 値;
}CSSを適用したいHTML要素かclass属性の値を指定し、右にプロパティ名、左に値を指定します。
たとえば、pタグにheightという高さを調節できるプロパティを利用することで高さを変えられます。
<body>
<style>
p{
height: 200px;
}
</style>
<p>スタイルを赤色に変更する</p>
</body>上記コードでは、pタグの高さを200pxにしています。
このように、HTML要素のスタイルをCSSプロパティで変更する方法はWeb制作で頻繁に利用するので、この記事をきっかけに覚えておくとよいでしょう。
まとめ
今回、WEBCAMP MEDIAでは、HTMLの属性とCSSプロパティについて解説しましたが、いかがでしたでしょうか？
HTMLの属性は、英語で表すとプロパティなので意味は同じで、属性を使うことでHTML要素にさまざまな役割を追加できます。
また、CSSプロパティを使うことでHTML要素のスタイルを変更できます。
ぜひ参考にしてみてくださいね！
