スクロール情報量が多く縦に長いWebページではページ内をスクロール移動させるアンカーリンクを設置することはよくあります。その際、Webページ内のヘッダー要素を固定していると、アンカーリンクをクリックしてスクロール移動した位置と固定ヘッダー要素が被ってしまう、という事象に陥ることがあります。アンカーリンクで移動した位置に固定ヘッダーが被ってしまう動作サンプルこの固定ヘッダーを被らないようにするにはスクロールさせる位置の要素の上部に固定ヘッダーの高さ分の余白を付けておくなど画面構成において余白の対策が必要になったりするのですがそのような煩わしい調整をせずにCSSのbefore疑似要素を使って簡単に解消する方法があったのでご紹介してみます。冒頭で紹介している動作サンプルではアンカーリンクでスクロールした位置に固定ヘッダーが被ってしまっていました。上記のサンプルではHTMLなどの基本構造は同じですがアンカーリンクでスクロールしても固定ヘッダーが該当位置の要素に被らずに停止位置を調整しています。このアンカーリンクのスクロール位置の制御についてまずはHTMLから。4</a></li></ul></nav>アンカーリンクのメニュー部分はページ内のIDに飛ばすようにリンク先を「#」をつけたID名にします。これに対して、このサンプルでは飛ばす先の要素は「section」で囲って構成しています。※もちろん「section」以外のタグでも可。・スクロール動作のスクリプト動作についてはこの記事では割愛させていただきますがリンク先が「#」のついたID名となっている要素をクリックしたら該当箇所にスクロール移動させる構成になります。このままで単純にCSSでレイアウト調整をするだけだとスクロールした位置にヘッダー要素が被ってしまいます。そこで、スクロール移動させる対象となる「section」にbefore疑似要素をつけて停止位置を制御するようにします。実際の「section」につけるbefore疑似要素の内容は以下のように指定します。hidden;}before疑似要素でヘッダー要素の高さ(+多少の余白)分の空のブロック要素を追加して「margin-top」の位置をネガティブマージンでヘッダー要素の高さ分を上に移動させます。※サンプルではヘッダー要素の高さが「100px」になっています。アンカーリンクでスクロール移動した際はこのbefore疑似要素をつけた位置でスクロールが停止することになります。このようにbefore疑似要素で位置を調整するだけでアンカーリンクで移動させる要素に対して固定ヘッダーがあっても停止位置と被ることなく指定させることが可能になります。※今回のサンプルは「CSS-Tricks」さんの記事を参考にさせていただいております。CSS-Tricks以上がCSSのbefore疑似要素を使ってページ内スクロールでリンクした位置と固定したヘッダー要素が被らないようにする方法でした。意外とこのアンカースクロールの位置調整は画面の余白などレイアウトで調整しようとすると面倒だったりするのでこのようにbefore疑似要素を使って制御ができるととても便利になるかと思います。ページ内スクロールでリンクした位置と固定したヘッダー要素が被らないようにする際にぜひ。※コメントにHTMLタグを直接入力しないでください。※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。Webサイト構築に関する技術やWebサービスを紹介するブログです。jQueryをはじめとしたWebサイトを彩る技術のほか、HTML(HTML5)、CSS(CSS3)、iPhoneやTwitterを使った実験などなど、Webサイト制作に役立つであろうと思われる情報を備忘録として掲載しています。