目次
HTMLヘッダーにスタイルを設定する方法
HTMLドキュメントの見た目をカスタマイズするためには、CSS(カスケーディングスタイルシート)を使用します。
この記事では、HTMLのヘッダー部分にスタイルを設定する方法を説明します。
基本的な構造
HTMLドキュメントは、<head> と <body> の二つの主要な部分で構成されています。<head> タグは、スタイルシート、メタデータ、スクリプトなど、ページの設定に関連する要素を含む部分です。
一方、<body> タグは、ページの内容(テキスト、画像など)を含みます。
<style> タグの使用
HTMLヘッダー内にスタイルを設定するには、<style> タグを使用します。
このタグ内にCSSコードを記述することで、ページ全体または特定の要素にスタイルを適用できます。
<!DOCTYPE html>
<html>
<head>
<title>ページのタイトル</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
</style>
</head>
<body>
<h1>これは見出しです</h1>
<p>これは段落です。<br></p>
</body>
</html>
上記の例では、body タグに背景色を、h1 タグに文字色とマージンを設定しています。
これにより、HTMLドキュメント内で直接スタイルを設定することができます。
まとめ
HTMLヘッダーにスタイルを設定することで、ウェブページの見た目を効果的にコントロールできます。
この方法は、特に小規模なプロジェクトや単一のページに適しています。
より複雑なスタイリングが必要な場合は、外部スタイルシートを利用することを検討してください。