目次
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ヘッダーにスタイルを設定することで、ウェブページの見た目を効果的にコントロールできます。
この方法は、特に小規模なプロジェクトや単一のページに適しています。
より複雑なスタイリングが必要な場合は、外部スタイルシートを利用することを検討してください。