17日から下書き状態だったエントリー、、、沢山用意する予定だったけど色んな都合で増えない予感なんで公開。
ずいぶん昔にフッターの区切りっぽいサンプルを作ったけど、ヘッダーは作ってなかったので、ヘッダーのサンプルを作ってみましたよっと。
というか、ヘッダーのサンプルって見かけたことがほっとんど有りません。（必要とされてないから？
ヘッダーって作るの大変というか、厄介だったりしませんかね。
全部画像ならがっちり固定しちゃえば、文字サイズ変更されても耐えられますけど、一部テキストがあったりした場合とかに文字サイズ変更するとレイアウト崩れてしまったりっていうアレが厄介だったりするのです。
文字サイズ変更しても崩れないようにする事を、DDTT対応っていうんでしたっけ。
今回のサンプルデザインは、一部弊社デザイナーにお願いしてつくってもらいました。
感謝感激でございまする。
デザイン提供してくれた方はこの人↓
ヘッダーのサンプル 1
ブログっぽいののヘッダーです。あんまり説明が必要ってほどでも無いので割愛。
ヘッダーのサンプル 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;で対応してます。
ヘッダーのサンプル 3
さっきののレイアウトが違う版。最初にデザインしてもらったのはコレ。
テキストが無い場合は、DDTT対応を気にしなくて良いので、heightプロパティをがんがん使って固定する感じで。
あと、img要素にvertical-align: top;の指定を忘れると、文字サイズ拡大で徐々に画像が下がってくるので入れておくと良いかと思います。
そのほかは、基本的には2と変わらないです。
ヘッダーのサンプル 4
2となんら変わらないのですが、ドロップダウン（プルダウン？）メニューを実装したバージョンです。
基本はCSSで制御してますが、jQueryと、Superfishをちょこっと変えたのを使わせてもらってます。
CSSがボクオリジナルなのに変わってるので、2階層までしか対応してないです。
あと、なぜかUTF-8でつかえる絵文字リストが見れます。
もっといっぱい用意したかったけど、許したってください。。。