お問い合わせ
お問い合わせ
ホーム > CSS > HTMLとCSSの使い方まとめ｜初心者が基礎から身につける完全ガイド

HTMLとCSSの使い方まとめ｜初心者が基礎から身につける完全ガイド

CSS
HTMLとCSSの基礎を学ぶためのイメージ（コードとデザインを組み合わせたイラスト）
HTMLとCSSの基礎をまとめて学べる完全ガイドのイメージ

Web制作を始めるにあたって必ず学ぶのが HTML と CSS です。
HTMLはWebページの「構造」を作り、CSSは「デザイン」を整える役割を持っています。この記事では、初心者の方が基礎を完璧にできるよう、HTMLとCSSの使い方を体系的にまとめました。

あわせて、関連する解説記事への内部リンクを配置しているので、必要に応じて参考にしてください。

1. HTMLの役割と基本構造

HTML（HyperText Markup Language）は、Webページの骨組みを作るための言語です。

HTMLの基本構造は以下のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>
</head>
<body>
  <h1>見出し</h1>
  <p>これは段落です。</p>
  <a href="#">リンク</a>
</body>
</html>

👉 詳しくは HTMLの基本構文まとめ をチェックしてください。

2. よく使うHTMLタグ

代表的なHTMLタグは以下の通りです。

  • <h1>～<h6>：見出し
  • <p>：段落
  • <a>：リンク（aタグの使い方まとめ）
  • <img>：画像
  • <ul> / <ol>：リスト
  • <table>：表
  • <form>：入力フォーム

👉 より体系的な理解のために HTMLセマンティックタグ徹底解説 も参考になります。

3. CSSの役割と基本構文

CSS（Cascading Style Sheets）は、HTMLで作ったページに装飾やデザインを与える言語です。

基本の書き方は以下の通りです。

h1 {
  color: blue;
  font-size: 24px;
}

👉 詳細は CSSの基本プロパティ解説 で確認できます。

4. CSSの指定方法

CSSは3つの方法で指定できます。

1. インラインCSS

<p style="color:red;">赤い文字</p>

2. 内部CSS（<style>を使う）

<style>
  p { color: green; }
</style>

3. 外部CSS（.cssファイルを読み込む）

<link rel="stylesheet" href="style.css">

👉 初心者には 外部CSS をおすすめします。管理がしやすくなります。

5. CSSでよく使うプロパティ

代表的なCSSプロパティは以下の通りです。

  • color（文字色）
  • font-size（文字サイズ）
  • background-color（背景色）
  • margin（外側の余白）
  • padding（内側の余白）
  • border（枠線）
  • display（表示方法：block, inline, flexなど）

👉 各プロパティの実例は CSSの基本プロパティ解説 を参照してください。

6. レイアウトの基本：FlexboxとGrid

HTMLとCSSで複雑なレイアウトを作るには、以下の仕組みを理解すると便利です。

  • Flexbox：横並び・縦並びを柔軟に配置できる
  • Gridレイアウト：二次元的に整列可能

👉 具体的な例は今後の記事で詳しく解説予定です。

7. HTMLとCSSを組み合わせたサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTMLとCSSサンプル</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
    }
    h1 {
      color: #333;
      text-align: center;
    }
    p {
      max-width: 600px;
      margin: 0 auto;
      line-height: 1.8;
    }
  </style>
</head>
<body>
  <h1>HTMLとCSSの使い方まとめ</h1>
  <p>このページはHTMLとCSSを組み合わせて作られています。</p>
</body>
</html>

まとめ

  • HTML → ページの構造を作る
  • CSS → デザインや装飾を与える
  • よく使うタグやプロパティを理解すれば、Webページは自由に作れる

👉 基礎が身についたら、次のステップとして

をあわせて学習するのがおすすめです。