自分はヘッダー固定のサイトを作ることはあまりないのですが、ヘッダーを固定するサイトって結構ありますよね。ヘッダーにはグローバルメニューを置くことがほとんどなので、ユーザビリティ的にヘッダーを固定するのでしょう。
そんなヘッダーを固定したときに困るのがページ内リンク。ページ内リンクは、縦に長いページ等で使われ、リンクをクリックすると、ブラウザの最上部にリンク先が移動するわけですが、ヘッダーを固定していると、その位置がヘッダーの中めり込んでしまってよくわからない状態になってしまいます。希望としてはヘッダーの最下部にリンク位置が表示されたいですよね。それをcssで簡単に実現します。
以下、サンプルコードです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<style> body { margin:0; padding:0; } header { width: 100%; text-align:center; box-shadow: 0 0 10px rgba(0,0,0,0.4); -moz-box-shadow: 0 0 10px rgba(0,0,0,0.4); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4); -o-box-shadow: 0 0 10px rgba(0,0,0,0.4); -ms-box-shadow: 0 0 10px rgba(0,0,0,0.4); position: fixed; background-color:#fff; } h1 { font-size:48px; margin:0; line-height:100px; } #content { padding-top:100px; } #content h2 { margin-top:-100px; padding-top:100px; } #content p { min-height:500px; } #content .last_p { height:800px; } </style> </head> <body> <header><h1>固定ヘッダー</h1></header> <div id="content"> <ul> <li><a href="#a1">ページ内リンク1</a></li> <li><a href="#a2">ページ内リンク2</a></li> <li><a href="#a3">ページ内リンク3</a></li> </ul> <h2 id="a1">ページ内リンク1</h2> <p>内容</p> <h2 id="a2">ページ内リンク2</h2> <p>内容</p> <h2 id="a3">ページ内リンク3</h2> <p class="last_p">内容</p> </div> |
ポイントはリンク先となるh2のあしらいになります。
padding-top:100pxでヘッダーの高さ分だけh2の範囲を広げます。margin-top:-100pxで先に広げたpadding-topの分だけ位置を戻します。
見た目の位置は変わりませんが、ブロック要素（h2）の高さが広がったことになり、リンクで移動するとヘッダーのすぐ下にリンク位置が移動するし、ヘッダーにめり込むことがなくなります。
以下はサンプルです。
- 普通にページ内リンクを設定した場合（ヘッダー部分に背景を設定していません）
- CSSで位置を調整したページ内リンク
[tmkm-amazon asin=’4798142204′][/tmkm-amazon]
