htmlにcssを埋め込みたい

HTMLにCSSを埋め込む方法には主に3つの方法があります。以下にそれぞれの方法を示します。

1. インラインスタイル

インラインスタイルは、HTMLタグのstyle属性を使って直接CSSを適用する方法です。特定の要素に対してスタイルを適用したい場合に便利です。

html
<!DOCTYPE html>
<html>
<head>
    <title>インラインスタイルの例</title>
</head>
<body>
    <p style="color: red; font-size: 20px;">これは赤いテキストです。</p>
</body>
</html>

2. 内部スタイルシート

内部スタイルシートは、HTML文書の<head>セクションに<style>タグを使ってCSSを記述する方法です。複数の要素に対してスタイルを適用したい場合に便利です。

html
<!DOCTYPE html>
<html>
<head>
    <title>内部スタイルシートの例</title>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: navy;
        }
        p {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>これは見出しです</h1>
    <p>これは段落です。</p>
</body>
</html>

3. 外部スタイルシート

外部スタイルシートは、別のCSSファイルを作成し、そのファイルをHTML文書にリンクする方法です。スタイルを複数のHTMLページで共有する場合に便利です。

まず、CSSファイルを作成します（例: styles.css）。

css
/* styles.css */
body {
    background-color: lightblue;
}
h1 {
    color: navy;
}
p {
    font-size: 18px;
}

次に、HTML文書の<head>セクションに<link>タグを使ってCSSファイルをリンクします。

html
<!DOCTYPE html>
<html>
<head>
    <title>外部スタイルシートの例</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>これは見出しです</h1>
    <p>これは段落です。</p>
</body>
</html>

これらの方法を使うことで、HTMLに対してCSSを適用し、ページのスタイルを設定することができます。用途に応じて適切な方法を選択してください。

未分類

Posted by ぼっち