外部スタイルシートを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が適用されているかチェックできます。
コメント