CSSを使用したウェブページのスタイリング方法


  1. インラインスタイル: HTML要素のstyle属性を使用して、特定の要素に直接スタイルを適用することができます。例えば、以下のように使用します。
<style>
  h1 {
    color: blue;
    font-size: 24px;
  }
  p {
    font-weight: bold;
  }
</style>
<head>
  <link rel="stylesheet" href="styles.css">
</head>

styles.cssの中身は以下のようになります。

h1 {
  color: blue;
  font-size: 24px;
}
p {
  font-weight: bold;
}
  1. クラスとIDセレクタ: クラスとIDセレクタを使用することで、特定の要素にスタイルを適用することができます。以下は例です。
<style>
  .red-text {
    color: red;
  }
  #highlight {
    background-color: yellow;
  }
</style>
<p class="red-text">赤いテキスト</p>
<p id="highlight">ハイライトされた要素</p>

これらは、CSSを使用してウェブページをスタイリングするための基本的な方法です。他にも、セレクタの種類やプロパティの使い方など、さまざまな応用的な方法があります。詳細については、CSSのドキュメントやチュートリアルを参照してください。