html css 書き方

HTML CSS 書き方: 基本をマスターする

この記事では、HTMLとCSSの関係性、CSSの基本的な書き方、HTMLへの適用方法、主要なプロパティ、そして実践的なスタイリング例を通して、初心者の方でもCSSを理解し、ウェブサイトの見た目を装飾する方法を学ぶことができます。3つの適用方法（外部スタイルシート、内部スタイルシート、インラインスタイル）、セレクタ、プロパティ、値の使い方、そしてfont-size、color、text-align、background-color、borderなどの主要プロパティを具体的なサンプルコードとともに解説しています。この記事が、CSS学習の第一歩としてお役立てれば幸いです。

CSS入門：HTMLとCSSの書き方、役割、関係を理解する

このガイドでは、CSSの基本的な書き方、HTMLとの関係性、そしてウェブサイトのスタイリング方法を学びます。初心者の方でも理解しやすいように、サンプルコードと具体的な手順を交えて解説していきます。

1. CSS入門：HTMLとCSSの関係、役割、書き方を学ぶ

CSS (Cascading Style Sheets) は、HTMLで構築されたウェブページの見た目を装飾するための言語です。HTMLが文章の構造を定義するのに対し、CSSは見た目（スタイル）を定義します。例えば、文字の色やサイズ、背景色、レイアウトなどを変更することができます。

HTMLとCSSの関係は、家づくりに例えると分かりやすいでしょう。HTMLは家の骨組みを作り、CSSは壁紙や家具で部屋を装飾する役割を担います。HTMLだけでは味気ないウェブページも、CSSを適用することで魅力的なデザインに仕上げることができます。

2. CSSの書き方３パターン：HTMLへの適用方法をマスターする

CSSをHTMLに適用する方法は、大きく分けて以下の3つあります。

  • 外部スタイルシート: 外部の.cssファイルにCSSを記述し、HTMLから<link>タグで読み込む方法です。複数のHTMLファイルで同じスタイルを共有したい場合に便利です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <link rel="stylesheet" href="style.css">
  <title>外部スタイルシート</title>
</head>
<body>
  <h1>こんにちは</h1>
  <p>これは段落です。</p>
</body>
</html>

/* style.css */
h1 {
  color: blue;
}
p {
  font-size: 16px;
}

  • 内部スタイルシート: HTMLファイルの<head>タグ内に<style>タグでCSSを記述する方法です。特定のHTMLファイルにのみ適用したいスタイルがある場合に便利です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>内部スタイルシート</title>
  <style>
    h1 {
      color: green;
    }
    p {
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>こんにちは</h1>
  <p>これは段落です。</p>
</body>
</html>

  • インラインスタイル: HTMLタグに直接style属性を記述する方法です。特定の要素だけにスタイルを適用したい場合に便利です。ただし、HTML構造とスタイルが混在するため、管理が複雑になる場合があります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>インラインスタイル</title>
</head>
<body>
  <h1 style="color: red;">こんにちは</h1>
  <p style="font-size: 20px;">これは段落です。</p>
</body>
</html>

3. CSSの基本構文：セレクタ、プロパティ、値の使い方を理解する

CSSの基本的な書き方は、セレクタ { プロパティ: 値; } です。

  • セレクタ: スタイルを適用するHTML要素を指定します。

  • プロパティ: 変更するスタイルの種類を指定します (例: color, font-size)。

  • 値: 具体的なスタイルの内容を指定します (例: blue, 16px)。

p {  /* pタグがセレクタ */
  color: blue; /* colorがプロパティ、blueが値 */
  font-size: 16px; /* font-sizeがプロパティ、16pxが値 */
}

上記は、「すべての<p>タグの文字色を青にし、フォントサイズを16pxにする」という意味になります。

4. CSSセレクタ徹底解説：HTML要素の様々な指定方法 

CSSセレクタには様々な種類があり、HTML要素を柔軟に指定できます。

  • 要素セレクタ: p { ... } のように、HTMLタグ名で要素を指定します。

  • idセレクタ: #main { ... } のように、id属性値で要素を指定します。

  • classセレクタ: .highlight { ... } のように、class属性値で要素を指定します。

  • 子孫セレクタ: ul li { ... } のように、要素間の親子関係に基づいて要素を指定します。

  • その他: 隣接兄弟セレクタ、属性セレクタなど、様々なセレクタがあります。

5. 主要CSSプロパティ一覧：文字、背景、線のスタイル変更 

よく使われるCSSプロパティをいくつか紹介します。

  • font-size: 文字のサイズを指定します。

  • color: 文字の色を指定します。

  • text-align: 文字の配置を指定します (例: left, center, right)。

  • background-color: 背景色を指定します。

  • border: 枠線を指定します。

6. CSS実践：サンプルコードでHTMLをスタイリングしてみよう 

以下のHTMLを例に、CSSでスタイリングしてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>CSS実践</title>
  <style>
    h1 {
      color: #333;
      text-align: center;
    }
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <h1>CSSの練習</h1>
  <p class="highlight">強調表示された段落です。</p>
  <p>通常の段落です。</p>
</body>
</html>

この例では、<h1>の見出しを中央揃えにし、.highlightクラスを持つ段落の背景色を黄色にしています。

このガイドを通して、CSSの基本的な書き方、HTMLとの関係性、そしてウェブサイトのスタイリング方法を理解していただければ幸いです。

参考文献: W3Schools

Q&A

Q1: HTMLとCSSはなぜ重要ですか？

A1: HTMLとCSSはウェブ開発の基盤であり、ウェブサイトの構造とスタイルを定義するために不可欠です。

Q2: コーディングを学ぶ最適な方法は何ですか？

A2: 実際にコードを書くことが最も効果的です。チュートリアルやオンラインコースを利用すると良いでしょう。

Q3: よくあるエラーはどのように解決しますか？

A3: エラーメッセージを確認し、文法を見直すことが重要です。また、リファレンスを参照して正しい構文を確認しましょう。