HTMLとCSSの基本

最終更新： 22/04/2025

1 分の読み

HTML/CSS 101: 初心者のための完全ガイド

ウェブサイトを作成するために最も基本的な言語である HTML と CSS は、ウェブデザインの基盤となる技術です。このガイドでは、HTMLとCSSの基本的な使い方を説明し、それらをどのように組み合わせてウェブページを作成するかを学びます。

1. HTMLとは？

HTML（Hypertext Markup Language）は、ウェブページの構造を作成するための言語です。HTMLを使うことで、ウェブページに含まれるテキスト、画像、リンク、フォームなどの要素を定義できます。

1.1 HTMLの基本構造

HTMLの基本的な文書構造は以下の通りです。

html
html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ウェブページタイトルtitle>
head>
<body>
  <h1>ウェブページの見出しh1>
  <p>これはHTMLの基本的な段落です。p>
body>
html>

はHTML5の文書であることをブラウザに伝える宣言です。
タグはHTMLドキュメント全体を囲むタグです。
タグは、ページのメタ情報（タイトルや文字エンコードなど）を含みます。
タグは、実際にブラウザに表示される内容を含みます。

1.2 HTMLの基本タグ

〜
: 見出しタグ。数字が小さくなるほど重要度が低くなります。
: 段落タグ。テキストを段落として表示します。
: ハイパーリンクを作成するためのタグ。href 属性を使用してリンク先を指定します。
```
html
<a href="https://example.com">リンクテキストa>
```

: 画像を表示するタグ。src 属性を使用して画像のURLを指定します。

html
<img src="image.jpg" alt="画像の説明">

: 順不同リスト（
2. CSSとは？

CSS（Cascading Style Sheets）は、HTMLで作成したウェブページのデザインやレイアウトを整えるための言語です。CSSを使用することで、色、フォント、配置、余白などを変更できます。

2.1 CSSの基本的な構造

CSSは、セレクタと宣言ブロックで構成されます。セレクタはスタイルを適用するHTML要素を指定し、宣言ブロックはその要素に適用するスタイルを定義します。
```
css
セレクタ {
  プロパティ: 値;
}
```
例えば、以下のCSSコードは、
タグに対してフォントサイズを大きくし、色を青に設定します。
```
css
h1 {
  font-size: 36px;
  color: blue;
}
```
2.2 CSSの適用方法

CSSは3つの方法でHTMLに適用できます。
1. インラインCSS: HTMLタグのstyle属性を使用して直接スタイルを定義します。
```
html
<h1 style="color: red;">赤い見出しh1>
```
2. 内部CSS:

HTMLとCSSの基本

HTML/CSS 101: 初心者のための完全ガイド

1. HTMLとは？

1.1 HTMLの基本構造

1.2 HTMLの基本タグ

〜
: 見出しタグ。数字が小さくなるほど重要度が低くなります。

: 見出しタグ。数字が小さくなるほど重要度が低くなります。

2. CSSとは？

2.1 CSSの基本的な構造

タグに対してフォントサイズを大きくし、色を青に設定します。

css
`h1 { font-size: 36px; color: blue; }`

2.2 CSSの適用方法

HTML/CSS 101: 初心者のための完全ガイド

1. HTMLとは？

1.1 HTMLの基本構造

1.2 HTMLの基本タグ

〜 : 見出しタグ。数字が小さくなるほど重要度が低くなります。

: 見出しタグ。数字が小さくなるほど重要度が低くなります。

2. CSSとは？

2.1 CSSの基本的な構造

タグに対してフォントサイズを大きくし、色を青に設定します。 cssCopyEdith1 { font-size: 36px; color: blue; }

2.2 CSSの適用方法

〜
: 見出しタグ。数字が小さくなるほど重要度が低くなります。

タグに対してフォントサイズを大きくし、色を青に設定します。

css
`h1 { font-size: 36px; color: blue; }`