外部スタイルシートの入れ方

外部スタイルシートをHTMLファイルにリンクする方法は、<link>タグを使用することです。このタグをHTMLの<head>セクションに追加します。基本的な書き方は次の通りです。

htmlコピーする編集する<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部スタイルシートの例</title>
    <!-- 外部CSSファイルのリンク -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>こんにちは、世界!</h1>
    <p>これは外部スタイルシートを使用したページです。</p>
</body>
</html>

ポイント

  • rel="stylesheet": これはリンクされるファイルがスタイルシートであることを示します。
  • href="styles.css": ここに外部CSSファイルのパスを指定します。ファイル名がstyles.cssの場合、同じディレクトリ内にあることを示していますが、他の場所にある場合は、相対パスや絶対パスを使って指定します。

注意点

  • CSSファイルの場所や名前が正しいか確認してください。
  • 外部CSSが正しく読み込まれているか確認するために、ブラウザの開発者ツールを使ってCSSが適用されているかチェックできます。

コメント