HTMLとCSSの組み合わせ方:コード例と手法の紹介

2024-02-09 22:08 HTML CSS コーディング
  1. インラインスタイル: HTML要素のstyle属性を使用して、直接CSSを指定する方法です。以下は、段落のテキストカラーを赤色に設定する例です。
<p style="color: red;">テキストの例</p>
<head>
  <style>
    h1 {
      background-color: blue;
    }
  </style>
</head>
<body>
  <h1>見出しの例</h1>
</body>
  1. 外部スタイルシート: CSSコードを別のファイルに保存し、HTMLファイルでそれを参照する方法です。以下は、外部スタイルシートの例です。

まず、styles.cssという名前のファイルを作成し、以下のCSSコードを保存します。

/* styles.css */
h1 {
  color: green;
}

次に、HTMLファイルで<link>要素を使用して外部スタイルシートを参照します。

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>見出しの例</h1>
</body>

以上が、HTMLとCSSを組み合わせる方法の一部です。これらの手法を組み合わせることで、より複雑なデザインやスタイルを実現することができます。詳細な情報や他の手法については、CSSのドキュメントやチュートリアルを参照してください。