技術ブログ

プログラミング、IT関連の記事中心

HTMLヘッダーにスタイルを設定する方法

目次

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