まえがき
最近のウェブサイトの殆どはヘッダーを設置し、うつくしく飾っています。ヘッダーは非常に大切な存在です。例えばブログサービスなら、ブログの投稿ボタンやマイページへのリンクなど、必要なものを完璧に取り揃えてあります。また組織の公式サイトなどでは、一種のサイトマップのように活用されています。
即ち、ヘッダーこそすべてであるということです。
私は思いました。最近はどうもヘッダーを飾っているが、ここは 1 つシンプルなヘッダーを作るべきではなかろうかと。ヘッダーをキラキラさせる時代の流れを逆行し、簡潔にまとめられたヘッダーを作るべきではなかろうかと。
その試練を達成すべく、我々はアマゾンの奥地へと向かった—。
ヘッダー制作
1. レイアウト
レイアウトは以下の通りにします。シンプルを追求するので、ロゴと少しコンテンツを置くのみです。なお、これはソースコードを改変して使っていただいて結構です。
2. コーディング
使用言語は HTML と CSS のみです。
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Simple Header</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<header>
<img src="logo.png" alt="logo">
<div class="headercontent">
<span>コンテンツ 1</span>
<span>コンテンツ 2</span>
<span>コンテンツ 3</span>
<span>コンテンツ 4</span>
<span>コンテンツ 5</span>
</div>
</header>
</div>
</body>
</html>
img タグの logo.png は、適当なロゴの画像に張り替えてください。
span タグの中に a タグを入れることでリンクとして機能します。
.header {
width: 100%;
height: 40px;
background-color: #ffffff;
}
.header img {
height: 30px;
padding: 5px 5px 5px 5%;
}
.header img, .headercontent {
float: left;
}
.headercontent span {
position: relative;
top: 10px;
margin-left: 20px;
}
ヘッダーの高さは画像の高さ＋上下 padding の高さなので、そこらへんをいじれば高さも自由に変更可能です。
3. 鑑賞
なかなかシンプルに仕上がりました。美しいです。シンプルこそ正義であります。
コーディングの手間をかけずとも皆様にご覧いただけるよう、デモサイトもご用意いたしました。じっくりとご堪能ください。なお、デモサイトではヘッダーの背景色（#ffffff）が body と被らないよう、body に #777777 を染色してあります。
デモサイトはこちら
あとがき
非常に美しい、シンプルなヘッダーが完成しました。シンプルなヘッダーこそ正義であり、真理です。ぜひとも、このシンプルなヘッダーをご利用ください。
コードは GitHub にプッシュしておいたので、ご自由に fork なりしてください。
Issue や Pull Request も受け付けております。
ありがとうございました。