CSSの記述方法には以下の3つがあります。
目次
外部スタイルシート
CSSを別のファイルに記述し、HTMLにCSSファイルをリンクして使用する方法です。拡張子は .css です。これが一般的に推奨される方法で、複数のHTMLファイルで同じCSSを共有できるのでメンテナンスが容易になります。<link rel="styleshjeet" href="URL">
コンテンツが入ります
HTMLコードを表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウェブページのタイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<p>コンテンツが入ります</p>
</div>
</body>
</html>CSSコードを表示
body {
background: #c0e0fc;
}
.box{
margin: 0 auto;
width: 200px;
padding: 20px;
background: #55abff;
text-align: center;
}
.box p{
color: #FFFFFF;
}内部スタイルシート
HTMLファイル内の <style> タグ内にCSSを記述する方法です。<head>～</head>の範囲内に配置します。一つのHTMLファイルでしか適用されないため、外部スタイルシートに比べてメンテナンスが難しくなる可能性があります。
コンテンツが入ります
HTMLコードを表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウェブページのタイトル</title>
<style>
body {
background: #c0e0fc;
}
.box{
margin: 0 auto;
width: 200px;
padding: 20px;
background: #55abff;
text-align: center;
}
.box p{
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="box">
<p>コンテンツが入ります</p>
</div>
</body>
</html>インラインスタイル
HTMLファイル内の <style> 属性に直接CSSを記述する方法です。これは特定の要素にのみスタイルを適用したい場合に使われますが、他の方法と比べてメンテナンスが難しくなるため、避けるべきです。<要素名 style="プロパティ : 値">
コンテンツが入ります
HTMLコードを表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウェブページのタイトル</title>
</head>
<body style="background: #c0e0fc;">
<div class="box" style="margin: 0 auto; width: 200px; padding: 20px; background: #55abff; text-align: center;">
<p style="color: #FFFFFF;">コンテンツが入ります</p>
</div>
</body>
</html>
外部のCSSファイルを読み込む方法(<link>タグを使用する方法)がオススメされています。
その理由は、CSSの変更が必要な場合にはCSSファイルのみを編集すれば良いため、メンテナンスが容易になります。
HTMLとCSSの役割を明確にし、コードの保守性や拡張性を向上させることができます。
外部のCSSファイルは一度読み込まれると、ブラウザにキャッシュされるため、複数のページで同じCSSファイルを使用する場合に効果的です。
外部のCSSファイルは複数のHTMLファイルで共有できるため、再利用性が高いです。