CSSでヘッダーにスタイルを設定する方法をサンプルコード付きで解説
CSSを使ってページのヘッダーにスタイルを設定する方法を、実際のコード例とともに紹介します。ヘッダーはウェブサイトの「顔」となる重要な要素です。背景色・文字色・余白・文字サイズなどを工夫することで、サイト全体の印象を大きく変えることができます。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
}
.header {
padding: 30px;
text-align: center;
background: #bc1a6b;
color: white;
font-size: 30px;
}
main {
padding: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="header">
<h1>My website ⇅</h1>
</div>
<main>
<h1>Some heading</h1>
<p>Some sample content.Some sample content.</p>
<p>Some sample content.Some sample content.</p>
<p>Some sample content.Some sample content.</p>
</main>
</body>
</html>
コードのポイント
- padding: 30px — ヘッダー内に十分な余白を設け、コンテンツが窮屈にならないようにしています。
- text-align: center — 見出しテキストを中央揃えにして、バランスの良いデザインにしています。
- background: #bc1a6b — ヘッダーの背景色を鮮やかなピンク系の色に設定し、サイトのアクセントにしています。
- color: white — 濃い背景色に対して白い文字を使用し、視認性を高めています。
- font-size: 30px — 見出しの文字を大きく表示することで、ヘッダーとしての存在感を強調しています。
表示結果
上記のコードをブラウザで実行すると、次のように表示されます。
このように、.headerクラスに対してCSSを指定するだけで、シンプルなHTMLからでも印象的なヘッダーを作成できます。背景色やフォントサイズを変更しながら、自分のサイトに合ったデザインを試してみてください。
-
CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック
CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>
-
CSSでヘッダーにスタイルを設定する方法をサンプルコード付きで解説
CSSを使ってページのヘッダーにスタイルを設定する方法を、実際のコード例とともに紹介します。ヘッダーはウェブサイトの「顔」となる重要な要素です。背景色・文字色・余白・文字サイズなどを工夫することで、サイト全体の印象を大きく変えることができます。 サンプルコード <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta charset="UTF-8" /> <meta name="viewport" content