Twitter Bootstrapとかを使っていると、ヘッダ部分を簡単に固定することができます。Qiitaのヘッダとかもそうです。 ただここで問題なのが、同一ページ内でidとかnameを使って遷移する場合、そのままだとリンク先の部分がヘッダに隠れてしまいます。 Qiitaでまさにこの問題にハマりました。 解決方法 方法はいろいろあると思いますが、とりあえず簡単にやりたいなーということで空の<span>を使う方法を選択しました。 コメントで教えていただいたのですが、見出しの中にblock要素を入れるのは標準規約違反となるので注意して下さい。 見出し部分のソースは下のとおりになっています。 <h1> <span id="1-1"></span> <a href="#1-1"><i class="icon-link"></i></a>簡単なまとめ </h1>
![ヘッダが固定されているページで、ページ内リンクの位置を調整する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/21567e887bcc69f271836f6a9c25b40ffe65b897/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgzJTk4JUUzJTgzJTgzJUUzJTgzJTgwJUUzJTgxJThDJUU1JTlCJUJBJUU1JUFFJTlBJUUzJTgxJTk1JUUzJTgyJThDJUUzJTgxJUE2JUUzJTgxJTg0JUUzJTgyJThCJUUzJTgzJTlBJUUzJTgzJUJDJUUzJTgyJUI4JUUzJTgxJUE3JUUzJTgwJTgxJUUzJTgzJTlBJUUzJTgzJUJDJUUzJTgyJUI4JUU1JTg2JTg1JUUzJTgzJUFBJUUzJTgzJUIzJUUzJTgyJUFGJUUzJTgxJUFFJUU0JUJEJThEJUU3JUJEJUFFJUUzJTgyJTkyJUU4JUFBJUJGJUU2JTk1JUI0JUUzJTgxJTk5JUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1lYzA3MWYxZWY1ZTJlMTg1ZDk0Njg3MGNhOWYzYmZkMA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrb255JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hMWRmN2M5MjczYWEwNWU5ZTdjMWM0OWViZGJiYTRiZA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D13d8d25c024dcd6a2264a1c8e60dab3b)