【初心者向け】HTMLの属性とCSSプロパティについて徹底解説

2024.01.06

「HTMLのプロパティと属性って何が違うんだろう？」
「HTMLのプロパティってそもそも何？」

上記のような疑問を抱えている方も多いのではないでしょうか？

HTMLとCSSには数多くの専門用語があるので、用語の意味が交差して分からなくなりますよね。

今回、WEBCAMP MEDIAは、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には、特定の要素のみ追加で切る属性と全ての要素に追加できるグローバル要素の2種類あります。

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要素のスタイルを変更できます。

ぜひ参考にしてみてくださいね！

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ

目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	12週間〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】大手DMMが運営のプログラミングスクール転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】フリーランスのエンジニアを最短で目指すエンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

2024.01.29

2024.01.12

2024.01.06

2024.01.11

DMM WEBCAMPでは転職成功率98％を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

資料をダウンロードする
IT技術の発展により、今後10~20年程度で47％の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

資料をダウンロードする
働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

資料をダウンロードする