2023年4月27日

HTMLとCSSを理解しよう

HTMLとCSSの基本概念

HTML（HyperText Markup Language）は、ウェブページの構造を定義するマークアップ言語です。HTMLは、タグと呼ばれる要素を使ってテキストやメディアコンテンツを囲むことで、ブラウザに表示する内容や構造を指定します。主要なHTMLタグには、<head>、<body>、<h1>〜<h6>、<p>、<a>、<img>などがあります。

CSS（Cascading Style Sheets）は、ウェブページのスタイルやレイアウトを設定する言語です。CSSは、セレクタを使ってHTML要素を選択し、プロパティと値を指定してスタイルを適用します。CSSは外部ファイルに記述してHTMLとリンクさせることも、HTMLの<style>タグ内に記述することもできます。CSSのプロパティには、color、font-size、background、margin、paddingなどがあります。

HTMLの要素と属性

HTML要素は、開始タグ、終了タグ、要素の内容から構成されます。開始タグには<要素名>、終了タグには</要素名>の形式が使われます。例えば、<p>タグは段落を表し、<p>ここに文章が入ります。</p>のように使用されます。

HTML要素には、属性を追加することができます。属性は、要素の振る舞いやスタイルを制御するために使われます。属性は開始タグ内に属性名="値"の形式で記述されます。よく使われる属性には、class、id、href、srcなどがあります。

CSSのセレクタとプロパティ

CSSセレクタは、スタイルを適用するHTML要素を特定するために使われます。セレクタには、要素セレクタ、クラスセレクタ、IDセレクタ、属性セレクタ、擬似クラス、擬似要素などがあります。要素セレクタはタグ名で要素を選択し、クラスセレクタは.に続けてクラス名を記述し、IDセレクタは#に続けてID名を記述します。

CSSプロパティは、選択された要素のスタイルを指定するために使われます。プロパティと値は、プロパティ名: 値;の形式で記述されます。例えば、`p {color: red;}は、<p>要素のテキストカラーを赤に設定します。複数のプロパティを適用する場合は、カンマで区切って記述します。例えば、p { color: red; font-size: 16px; }`のようにします。