ホームページ制作の基本 | HTMLとCSSとは？
公開日:2025年3月12日
目次
HTMLとCSSの役割とは？
ホームページ制作において、HTMLとCSSは欠かせない基礎知識です。
HTMLはウェブページの構造を作り、CSSはその見た目を整えます。この2つを組み合わせることで、魅力的で機能的なウェブサイトが完成します。
HTMLとCSSの役割について、詳しく見ていきましょう。
HTMLの役割
HTML（HyperText Markup Language）は、ウェブページの骨組みを作る言語です。
タグと呼ばれる要素を使って、見出し、段落、リスト、リンク、画像など、ページに表示される要素を定義します。
- 見出しタグ（h1〜h6）：ページのタイトルやセクションの見出しを指定
- 段落タグ（p）：文章のまとまりを表現
- リストタグ（ul、ol、li）：箇条書きや番号付きリストを作成
- リンクタグ（a）：別ページや外部サイトへのリンクを設定
- 画像タグ（img）：ページに画像を表示
例えば、見出しはh1～h6タグ、段落はpタグ、画像はimgタグで囲みます。
<!DOCTYPE html>
<html>
<head>
<title>ページのタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>段落テキスト</p>
<img src="image.jpg" alt="画像の説明">
</body>
</html>
CSSの役割
CSS（Cascading Style Sheets）は、HTMLで作成したページのデザインやレイアウトを整える言語です。
文字の色やサイズ、背景色、余白、配置などを指定し、見た目をカスタマイズします。
- フォントの設定：文字の種類、サイズ、太さ、色などを指定
- 余白と間隔：要素間のスペースやパディング、マージンを調整
- レイアウト：要素の配置やフレックスボックス、グリッドを活用
- 背景デザイン：背景色、画像、グラデーションを設定
- レスポンシブ対応：画面サイズに応じたデザイン変更
例えば、以下のように記述することで、HTML要素の色やサイズを変更できます。
h1 {
color: blue;
font-size: 24px;
}
p {
color: gray;
line-height: 1.5;
}
上記の例では、h1要素（見出し）を青色で24ピクセル、p要素（段落）を灰色で行間1.5で表示するよう指定しています。
HTMLとCSSを組み合わせる方法
HTMLとCSSはそれぞれ独立した言語ですが、組み合わせることで視覚的にも機能的にも優れたページを作れます。具体的な方法は以下の通りです。
- インラインスタイルで記述する
- 内部スタイルシートに記述する
- 外部スタイルシートを読み込む
インラインスタイルで記述する
HTMLタグに直接スタイルを記述する方法です。簡単ですが、スタイルの管理が複雑になります。
内部スタイルシートに記述する
HTMLファイル内のstyleタグを使って、ページ専用のCSSを記述する方法です。小規模なサイトに向いています。
外部スタイルシートを読み込む
別ファイルにCSSを記述し、HTMLからリンクする方法です。複数ページに同じスタイルを適用でき、管理が簡単です。
まとめ
HTMLとCSSは、ホームページ制作の基礎となる重要な技術です。
HTMLはページの構造を作り、CSSはその見た目を整えます。これらを効果的に組み合わせることで、魅力的なウェブサイトを制作できます。学習方法を工夫しながら、ぜひスキルを磨いてください。
