それなりに使い勝手が良さそうなヘッダーのサンプル4種

01月21日（月）16:57

category: CSSテンプレート, ビジュアル・小技

17日から下書き状態だったエントリー、、、沢山用意する予定だったけど色んな都合で増えない予感なんで公開。

ずいぶん昔にフッターの区切りっぽいサンプルを作ったけど、ヘッダーは作ってなかったので、ヘッダーのサンプルを作ってみましたよっと。

というか、ヘッダーのサンプルって見かけたことがほっとんど有りません。（必要とされてないから？

ヘッダーって作るの大変というか、厄介だったりしませんかね。

全部画像ならがっちり固定しちゃえば、文字サイズ変更されても耐えられますけど、一部テキストがあったりした場合とかに文字サイズ変更するとレイアウト崩れてしまったりっていうアレが厄介だったりするのです。

文字サイズ変更しても崩れないようにする事を、DDTT対応っていうんでしたっけ。

今回のサンプルデザインは、一部弊社デザイナーにお願いしてつくってもらいました。
感謝感激でございまする。

デザイン提供してくれた方はこの人↓

---- こっから続き

ヘッダーのサンプル 1

サンプル1のキャプチャ

ブログっぽいののヘッダーです。あんまり説明が必要ってほどでも無いので割愛。

ヘッダーのサンプル 2

サンプル2のキャプチャ

かなり多いと思われる配置のヘッダー。
XHTMLソースはこんな感じで、ありがちなヘッダーのマークアップだと思います。

<div id="header">
<p class="logo"><a href="/"><img src="./img/share/logo.gif" alt="サンプル株式会社ホーム" /></a></p>
<h1><img src="./img/share/company_name.gif" alt="サンプル株式会社" /></h1>
<ul id="helpNav">
<li><a href="/privacy.html"><img src="./img/share/help_nav_privacy.gif" alt="個人情報保護方針" /></a></li><!--
--><li><a href="/sitemap.html"><img src="./img/share/help_nav_sitemap.gif" alt="サイトマップ" /></a></li>
</ul>
<address><img src="./img/share/address_header.gif" alt="東京都港区三田1-1-15三田ソネットビル6階 TEL.03-5444-3200/FAX.03-5444-0505" /></address>
<ul id="gNav">
<li><a href="/product/"><img src="./img/share/nav_product.gif" alt="製品情報" /></a></li>
<li><a href="/service/"><img src="./img/share/nav_service.gif" alt="サービス案内" /></a></li>
<li><a href="/company/"><img src="./img/share/nav_company.gif" alt="会社情報" /></a></li>
<li><a href="/press/"><img src="./img/share/nav_press.gif" alt="プレスリリース" /></a></li>
<li><a href="/contact/"><img src="./img/share/nav_contact.gif" alt="お問い合わせ" /></a></li>
</ul>
<!-- / #header --></div>

右上の、ガイドナビとかヘルプナビとかユーティリティナビとか言われてる部分が、テキストになっているので、DDTT対応して崩れないようにしてます。
ココにテキストが有って、DDTT対応が出来てない場合、レイアウト破綻の原因になりやすいので、注意です。

今回は、positionプロパティ使って崩れないようにしています。

具体的には以下のように。

#header {
	position: relative;
	width: 820px;
	height: 145px;
	margin-bottom: 10px;
	font-size: 1px;
}
 
#header img {
	vertical-align: top;
	font-size: small;
}
 
#header h1 {
	float: left;
	width: 173px;
	margin-bottom: 20px;
	padding-top: 27px;
}
 
#header #helpNav {
	position: absolute;
	top: 0;
	right: 0;
	margin-bottom: 15px;
	padding-top: 10px;
	font-size: x-small;
}
 
#header #helpNav li {
	display: inline;
	margin-left: 10px;
}
 
#header #helpNav li a {
	color: #557184;
}
 
#header #helpNav li a:hover {
	color: #7A0000;
	text-decoration: none;
}
 
#header #helpNav li + li {
	padding-left: 10px;
	border-left: 1px solid #999;
}
 
#header address {
	float: right;
	margin-bottom: 16px;
	padding: 45px 0 0 0;
}

文字サイズによって、ヘッダーが下がってしまうのを防ぐ為に、#headerにposition: relative;の指定をして、子要素になる#helpNavの指定を、position: absolute; とすることで対応してます。
でもこの方法だと極端にでっかくされると住所とかに被ってしまいますが、十分許容範囲だと思います。

img要素にfont-size: small;を指定してるのは、#headerで、font-size: 1px;と指定してるので、画像が表示されない時のaltまで読めなくなってしまうのを防ぐように。

あと、#helpNavはfloat: right;で寄せると、プライバシーポリシーが右に行ってしまうので、ココはdisplay: inline;で対応してます。